[JavaScript知识库]数组常用方法的简单梳理

数组常用方法的简单梳理

数组作为开发中常见的数据类型,学会处理数组的方法,会让你的开发更为流畅

数组的方法大致分为两类:

1.改变原数组的方法 : 如 shift()、unshift()、pop()等
2.不改变原数组的方法: 如 reduce()、filter()、every()等

现在依据个人的理解和经验,将一些常用的数组方法用法及参数总结如下,希望对阅读的人有点帮助:

一、会改变原数组的方法

1.Array.shift() : 删除数组的第一个元素,返回值是被删除的元素

 let arr = [1, 2, 3];
 let newArr=arr.shift()
 console.log(newArr); // 打印返回值显示是  [1]   
 console.log(arr); //   打印原数组 [2, 3] 

shift()方法没有参数,所以不需要进行传参

注意: shift()方法一次只能删除一个元素

2.Array.unshift() : 在数组的前面添加一个或者多个数组元素,返回值是新数组的长度

 let arr = [1, 2, 3];
 let newArr=arr.unshift('red', 'purple');
 console.log(newArr); // 打印返回值显示是 5 为新数组的长度   
 console.log(arr); //   打印原数组 ['red','purple',1,2,3]

unshift()的参数就是你需要添加到数组前面的数据,直接写就可以

3.Array.push() 在数组的末尾添加一个或者多个数组元素,返回的结果是新数组的长度

 let arr = ['green', 'yellow', 'skyblue'];
 let newArr=arr.push('red', 'purple');
 console.log(newArr); // 打印返回值显示是 5 为新数组的长度   
 console.log(arr); //   打印原数组 ['green', 'yellow', 'skyblue','red','purple']

push()的参数跟unshift()一样,直接写就可以

4.Array.pop() 删除数组的最后一个元素,返回值是被删除的元素

 let arr = ['green', 'yellow', 'skyblue'];
 let newArr=arr.push('red', 'purple');
 console.log(newArr); // 打印返回值显示是 5 为新数组的长度   
 console.log(arr); //   打印原数组 ['green', 'yellow', 'skyblue','red','purple']

pop()方法跟shift()一样,没有参数,并且一次也只能删除一个元素

5、Array.reverse()：颠倒数组顺序,返回值是颠倒后的数组,原数组也会被颠倒

let arr = ["a","b","c","d"]
let newArr = arr.reverse() 
console.log(newArr) // ["d", "c", "b", "a"] 
console.log(arr) // ["d", "c", "b", "a"]

reveres()方法没有参数

6、Array.sort()：对数组进行排序,返回值是排序后的数组

当数组内部是英文字符串时,默认按字母顺序来排序

当数组内部是中文字符串时,按UTF-16代码排序

一般情况来说,基本不会对字符串类型数组进行排序

let arr = ['March', 'Jan', 'Feb', 'Dec'];
arr.sort();
console.log(arr); //["Dec", "Feb", "Jan", "March"]

要比较数字而非字符串，比较函数可以简单的以 a 减 b，如下的函数将会将数组升序排列

let arr = [5, 9, 3, 7];
arr.sort((a,b)=>{
    return a-b
});
console.log(arr); //[3,5,7,9]

如果是 b 减 a，如下的函数将会将数组降序排列

let arr = [5, 9, 3, 7];
arr.sort((a,b)=>{
    return b-a
});
console.log(arr); //[9,7,5,3]

7、Array.splice(start,length,item)删，增，替换数组元素，返回被删除数组，无删除则不返回

splice()有三个参数:

 start : 起始位置的索引号
 
 length: 需要删除的个数 
 
 item:  需要替换的元素  (在不需要添加,只进行删除操作时可以省略)

splice()方法在不进行删除时,可以在某个索引后面添加元素

let arr = ['Jan', 'March', 'April', 'June'];
arr.splice(1, 0, 'Feb');
console.log(arr); //["Jan", "Feb", "March", "April", "June"]

也可以用来替换掉数组中的某一个元素,代替arr[索引号]的方法替换数组元素来触发vue的响应

arr.splice(4, 1, 'May');
console.log(arr); // ["Jan", "Feb", "March", "April", "May"]

二、不会改变原数组的方法

1.Array.reduce()主要于对数组的求和,也可以对字符串,数组进行拼接

reduce()接受四个参数：

   Array.reduce((accumulator,current,index,Array) =>{
          ....... 
          return  accumulator
    } ,int)

第一个参数是：accumulator是当前聚合值，

第二个参数是: current是数组循环时的当前元素

第三个参数是: index 是数组元素的索引值

第四个参数是: Array 是数组本身

int : 是accumulator的初始值 可以自行进行设置

一般常用的是前面的两个参数,后面两个参数不常用,常用的使用场景便是数组的求和

let arr = [1, 2, 3, 4];

let a = arr.reduce((accumulator,current)=> accumulator += current , 0)

//这里使用的es6语法,省略了return

console.log(a); //10

2.Array.filter()要于对数组的筛选,返回值是一个满足条件的新数组

filter()接受四个参数：

 var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

callback 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保 留。它接受以下三个参数：

element 数组中当前正在处理的元素。

index(可选) 正在处理的元素在数组中的索引。

array(可选) 调用了 filter 的数组本身。

thisArg(可选) 执行 callback 时，用于 this 的值。

let arr = [12, 5, 8, 130, 44]

let newArr = arr.filter( item => item>10 );  //筛选数组中大于10的值

console.log(newArr) // [12, 130, 44]

3.Array.every()测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

arr.every(callback(element[, index[, array]])[, thisArg])

里面是回调函数callback用来测试每个元素的函数，它可以接收三个参数：

element 用于测试的当前值。

index(可选)用于测试的当前值的索引。

array(可选)调用 every 的当前数组。

thisArg 执行 callback 时使用的 this 值

const arr = [1, 30, 39, 29, 10, 13];

let a = arr.every((currentValue) => currentValue < 40)); //判断里面的每一个值是否小于40
console.log(a)  // true

只有当数组里面的每一个元素都满足条件才会返回true,否则返回的是false

注意：若收到一个空数组，此方法在一切情况下都会返回 true。

4.Array.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有则返回-1。

arr.findIndex(callback[, thisArg])

callback针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:

element 当前元素。

index 当前元素的索引。

array调用findIndex的数组。

thisArg(可选)执行callback时作为this对象的值.

let arr = [5, 12, 8, 130, 44];
let a = array1.findIndex((element) => element > 13)
console.log(a);  // 3

5.Array.forEach()方法对数组的每个元素执行一次给定的函数,历数组最常用的方法

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

callback 为数组中每个元素执行的函数，该函数接收一至三个参数：

可依次向 callback 函数传入三个参数：

1. 数组当前项的值
2. 数组当前项的索引
3. 数组对象本身

currentValue 数组中正在处理的当前元素。

index (可选) 数组中正在处理的当前元素的索引。

array (可选) forEach() 方法正在操作的数组。

thisArg (可选) 可选参数。当执行回调函数 callback 时，用作 this 的值。

const array1 = ['a', 'b', 'c'];

array1.forEach((item,index)=>{
    console.log(item)  // 分别输出 a  b   c  
    console.log(index)  //分别输出 0  1   2
}

forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。

6.Array.join()方法将一个数组的所有元素连接成一个字符串并返回这个字符串

arr.join([separator])

separator(可选)指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果缺省该值，数组元素用逗号（,）分隔。如果separator是空字符串("")，则所有元素之间都没有任何字符。

let arr = ['Fire', 'Air', 'Water'];

console.log(arr.join()); //  "Fire,Air,Water"
console.log(arr.join('')); //"FireAirWater"
console.log(arr.join('-')); // "Fire-Air-Water"

注意 :如果一个元素为 undefined 或 null，它会被转换为空字符串。

坐的时间有点久,就先写到这望对大家能有所帮助… 睡觉自然醒才是王道