JavaScript常用的数组方法

JavaScript常用的数组方法

了解更多请访问https://mp.weixin.qq.com/s/oAkSLSGROv0DHvTDeMVdzA

1、Array.push()

它的作用：push()获取你的数组并将一个或者多个元素添加到数组的末尾，然后返回数组的新长度。此方法将修改你现有的数组。

通过运行 push() 将数字 20 添加到数组中，使用 20 作为参数。

let myArray = [2,4,6,8,9,11,14];
myArray.push(20);
console.log(myArray);// [2, 4, 6, 8, 9, 11, 14, 20]

2、Array.concat()

它的作用：concat() 可以将两个或多个数组合并为一个新数组。它不会修改现有数组，而是创建一个新数组。

取 myArray 并将名为 newArray 的数组合并到其中。

let myArray = [2,4,6,8,10,12];
let newArray = [1,2,3,4,5,6];
let res = myArray.concat(newArray);
console.log(res);// [2, 4, 6, 8, 10, 12, 1, 2, 3, 4, 5, 6]

3、 Array.join()

它的作用：join() 接受一个数组并连接数组的内容，用逗号分隔。结果放在一个字符串中。如果要使用逗号的替代方法，可以指定分隔符。

看看它是如何使用 myArray 工作的。首先使用没有分隔符参数的默认方法，它将使用逗号。

let myArray = [2,4,6,8,9,11,14];
let str = myArray.join();
console.log(str);// '2,4,6,8,9,11,14'

JavaScript 将输出一个字符串，数组中的每个值用逗号分隔。你可以在函数中使用参数来更改分隔符。

let myArray = [2,4,6,8,9,11,14];
let str1 = myArray.join(' ');
console.log(str1);//'2 4 6 8 9 11 14'
let str2 = myArray.join('|');
console.log(str2);//2|4|6|8|9|11|14

4、 Array.forEach()

它的作用：forEach() （区分大小写！）对数组中的每个元素执行一个函数，并将元素传递给回调函数。

将每个值加 15，并让控制台显示结果。

let myArray = [2,4,6];
myArray.forEach(function (item){
    console.log(item + 15);
})
//打印结果为
//17
//19
//21

5、Array.map()

它的作用：map() 对数组中的每个元素执行一个函数，原数组不变 ，并将结果放入一个新数组中。
在每个元素上运行一个函数听起来像 forEach()。这里的区别是 map() 在运行时创建一个新数组。forEach() 不会自动创建新数组。

let myArray = [2,4,6,8,10,12];
let newArray = myArray.map(function (item){
    return item * 2;
})
console.log(newArray);//[4, 8, 12, 16, 20, 24]

6、Array.unshift()

它的作用：与 push() 方法的工作方式类似，unshift() 方法接受你的数组并将一个或多个元素添加到数组的开头而不是结尾，并返回数组的新长度。此方法将修改你现有的数组。

let myArray = [2,4,6,8,10,12];
myArray.unshift(0);
console.log(myArray);//[0, 2, 4, 6, 8, 10, 12]

7、Array.sort()

它的作用：排序是对数组执行的最常见操作之一，非常有用。JavaScript 的 sort() 数组方法可用于仅用一行代码对数字，甚至字符串数组进行排序。这个操作到位，通过修改初始数组返回排序后的数组。这次为 myArray 取一组不同的数字。

let myArray = [12,35,10,54,8,61];
myArray.sort((a,b) => a - b);
console.log(myArray);//    [8, 10, 12, 35, 54, 61]

8、Array.reverse()

它的作用：顾名思义，reverse() 方法用于反转数组中元素的顺序。请注意，这不会反转数组的内容，而只会反转顺序本身。这是一个可以更好地理解此方法的示例：

let myArray = [2,4,6,8,10,12];
myArray.reverse();
console.log(myArray);//[12, 10, 8, 6, 4, 2]

9、 Array.slice()

它的作用：slice() 用于检索数组一部分的浅拷贝。简单来说，此方法允许你通过索引从数组中选择特定元素。你可以传递要从中检索的元素的起始索引和元素以及可选的结束索引。

如果不提供结束索引，则将检索从开始索引到数组末尾的所有元素。此方法返回一个新数组并且不会修改现有数组。

let myArray = [2,4,6,8,10,12];
let slicedArray = myArray.slice(2);
console.log(myArray);//2, 4, 6, 8, 10, 12]
console.log(slicedArray);//[6, 8, 10, 12]
//
slicedArray = myArray.slice(4,5);
console.log(slicedArray);//[10]

10、Array.splice()

它的作用：splice() 是一种有用的数组方法，用于删除或替换数组中的元素。通过指定要删除的元素的索引和数量，它修改了数组。

let myArray = [2,4,6,8,10,12];
myArray.splice(2,3);
console.log(myArray);//[2, 4, 12]

在上面的例子中，myArray 数组是从索引 2 拼接而成的，并且从中删除了 3 个元素。

要替换元素而不是仅仅删除它们，你可以使用要替换的元素传递任意数量的可选参数，如下所示：

myArray.splice(2,3,1,2,3);
console.log(myArray);//2, 4, 1, 2, 3, 12]

11、 Array.filter()

它的作用：filter() 方法是一个有用的数组方法，它接受一个包含测试的函数并返回一个包含所有通过该测试的元素的新数组。
顾名思义，此方法用于从其他元素中过滤你需要的元素。过滤是使用返回布尔值的函数完成的。
下面是一个 filter() 方法的示例，该方法用于仅从数组中获取可被 2 整除的元素。

let myArray = [12,35,10,54,8,61];
let newArray = myArray.filter((number) => number % 2 === 0);
console.log(newArray);//[12, 10, 54, 8]

在上面的例子中，一个箭头函数作为参数传递，它从原始数组中获取每个数字，并使用除 (%) 和相等 (===) 运算符检查它是否可以被 2 整除

12、Array.reduce()

它的作用：reduce() 是一个数组方法，它接受一个 reducer 函数并在每个数组元素上执行它以在返回时输出单个值。
它需要一个带有累加器变量和当前元素变量的 reducer 函数作为必需的参数。累加器的值在所有迭代中都会被记住，并最终在最后一次迭代后返回。
此方法的一个流行用例是计算数组中所有元素的总和。该功能的实现如下：

let myArray = [2,4,6,8,10,12];
let sum = myArray.reduce((sum,curren) => sum + curren,0);
console.log(sum);//42

0 作为上面例子中的第二个参数传递，用作累加器变量的初始值。sum 变量将包含 reduce() 方法的返回值，该值预计是数组中所有元素的总和。

13、Array.includes()

它的作用：在数组中搜索一个元素以检查它是否存在是一个经常使用的操作，因此，JavaScript 有一个内置的方法，以 contains() 数组方法的形式。使用方法如下：

console.log(myArray.includes(2))
console.log(myArray.includes(4,1))
console.log(myArray.includes(5))

此方法接受一个必需参数（要搜索的元素）和一个可选参数（从其开始搜索的数组索引）。

根据该元素是否存在，它将分别返回 true 或 false。因此，输出将是：

true
true
false

14、 Array.indexOf()

它的作用：indexOf() 方法用于找出可以在数组中找到第一次出现指定元素的索引。尽管它类似于includes() 方法，但如果元素不存在于数组中，则此方法返回数字索引或-1。

console.log(myArray.indexOf(4))
console.log(myArray.indexOf("4"))
console.log(myArray.indexOf(8,2))

indexOf() 方法使用严格相等来检查元素是否存在，这意味着值以及数据类型应该相同。可选的第二个参数采用索引开始搜索。根据这些标准，输出将如下所示：

1
-1
3