操作数组元素的常用方法有哪些？

1、复制和填充

② 填充数组：fill()

向一个已有数组中插入全部或部分相同的值。该方法的语法如下： 

array.fill(value, start, end)

• value：必需。填充的值；
• start：可选。开始填充位置(默认0)；
• end：可选。停止填充位置 (默认为 array.length 填充到数组末尾)

把数组从第二位到第五位用 a 进行填充： 

      let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      arr.fill("a", 2, 5);
      console.log(arr); // [0, 1, 'a','a', 'a', 5, 6, 7, 8, 9];

      const arr = [0, 0, 0, 0, 0];

      // 用5填充整个数组
      arr.fill(5);
      console.log(arr); // [5, 5, 5, 5, 5]
      arr.fill(0); // 重置

      // 用5填充索引大于等于3的元素
      arr.fill(5, 3);
      console.log(arr); // [0, 0, 0, 5, 5]
      arr.fill(0); // 重置

      // 用5填充索引大于等于1且小于等于3的元素
      arr.fill(5, 1, 4);
      console.log(arr); // [0, 5, 5, 5, 0]
      arr.fill(0); // 重置

      // 用5填充索引大于等于-1的元素
      arr.fill(5, -1);
      console.log(arr); // [0, 0, 0, 0, 5]
      arr.fill(0); // 重置

② 批量复制：copyWithin()

按照指定范围来浅复制数组中的部分内容，然后将它插入到指定索引开始的位置，开始与结束索引的计算方法和 fill 方法一样。该方法的语法如下：

array.copyWithin(target, start, end)

其参数如下：

• target：必需。复制到指定目标索引位置；
• start：可选。元素复制的起始位置；
• end：可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

将第 start 个位置开始的元素，到 end 结束位置之间的元素，复制给数组的1个位置开始 

      const array1 = [1, 2, 3, 4, 5];
      console.log(array1.copyWithin(0, 3)); // [4, 5, 3, 4, 5]

      const array2 = [1, 2, 3, 4];
      console.log(array2.copyWithin(0, 3)); //  [4, 2, 3, 4]

      const array3 = [1, 2, 3, 4, 5, 6, 7, 8];
      console.log(array3.copyWithin(0, 3)); //  [4, 5, 6, 7, 8, 6, 7, 8]

      const array4 = [1, 2, 3, 4, 5, 6, 7, 8];
      console.log(array4.copyWithin(0, 3, 5)); //  [4, 5, 3, 4, 5, 6, 7, 8]

这两个方法的签名类似，都需要指定已有数组实例上的一个范围，包含开始索引，不包含结束索引。

2、转化方法

数组的转化方法主要有四个：toLocaleString()、toString()、valueOf()、join()

扫描二维码关注公众号，回复： 17297644 查看本文章

需要注意，如果数组中的某一项是 null 或者 undefined，则在调用前面三个方法后，返回的结果中会以空字符串来表示。

① toString()

返回的是由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串，也就是说，数组的每个值都会调用 toString() 方法，以得到最终的字符串

let colors = ["red", "blue", "green"];  
console.log(colors.toString())  // red,blue,green

let array = [{ name: "zz" }, 123, "abc", new Date(), [1, 2]];
console.log(array.toString()); // [object Object],123,abc,Fri Nov 10 2023 22:18:25 GMT+0800 (中国标准时间),1,2

② valueOf()

返回的是数组本身

      let colors = ["red", "blue", "green"];
      console.log(colors.valueOf()); // ["red", "blue", "green"]

③ toLocaleString()

toLocaleString() 方法可能会返回和 toString() 方法相同的结果，但也不一定。

在调用 toLocaleString() 方法时会得到一个逗号分隔的数组值的字符串，它与 toString() 方法的区别是，为了得到最终的字符串，会调用每个值的 toLocaleString() 方法，而不是toString()方法

      let array = [{ name: "zz" }, 123, "abc", new Date()];
      let str = array.toLocaleString();
      console.log(str); // [object Object],123,abc,2016/1/5 下午1:06:23

④ join()

把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的，默认逗号。

该方法返回一个字符串。该字符串是通过把数组中的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。 

let array = ["one", "two", "three","four", "five"];
console.log(array.join());      // one,two,three,four,five
console.log(array.join("-"));   // one-two-three-four-five

3、栈方法

栈是一种后进先出的结构，也就是最近添加的项先被删除。

数据项的插入（称为推入 push）和删除（称为弹出 pop）只在栈顶发生。

① push()

接收任意数量的参数，并将它们添加了数组末尾，并返回数组新的长度。该方法会改变原数组。其语法形式如下：

arrayObject.push(newelement1, newelement2, ...., newelementX)

      let array = ["1", "2",  "3"];
      array.push("4", "5", "6")
      let i = array.push("666");
      console.log(array); // ["1", "2", "3", "4"]
      console.log(i); // 7

② pop()

删除并返回数组的最后一个元素。它没有参数。该方法会改变原数组。

      let array = ["1", "2", "3"];
      let i = array.pop();
      console.log(array); // ["1", "2"]
      console.log(i); // 3

4、队列方法

队列是一种先进先出的数据结构，队列在队尾添加元素，在对头删除元素。

从数组开头删除和添加元素的方法：shift() 和 unshift()

① shift()

删除数组的第一项，并返回被删除的元素。然后数组长度减一，该方法会改变原数组。

注意：如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。 

      let array = ["1", "2", "3"];
      let i = array.shift();
      console.log(array); // ["2", "3"]
      console.log(i); // 1

② unshift()

向数组的开头添加一个或更多元素，并返回新的长度。该方法会改变原数组。

arrayObject.unshift(newelement1,newelement2,....,newelementX)

      let array = ["1", "2", "3"];
      let i = array.unshift('111', '222', '333');
      console.log(array); // ["111", "222", "333", "1", "2", "3"]
      console.log(i); // 6

5、排序方法

数组有两个方法可以对数组进行重新排序：sort() 和 reverse()

① sort()

数组排序sort()方法_小草莓蹦蹦跳的博客-CSDN博客 

该方法会在原数组上进行排序，会改变原数组。

 arrayObject.sort(sortby)

参数 sortby 是可选参数，用来规定排序顺序。它是一个比较函数，用来判断哪个值应该排在前面。默认情况下，会按照升序重新排列数组元素。

为此，sort()方法会在每一个元素上调用 String 转型函数，然后比较字符串来决定顺序，即使数组的元素都是数值，也会将数组元素先转化为字符串在进行比较、排序。

这就造成了排序不准确的情况。

let array = [5, 4, 3, 2, 1];
let array2 = array.sort();
console.log(array2)  // [1, 2, 3, 4, 5]

let array = [0, 1, 5, 10, 15];
let array2 = array.sort();
console.log(array2)  //  [0, 1, 10, 15, 5]

对于 sort() 方法的参数，它是一个比较函数，它接收两个参数。

如果第一个参数应该排在第二个参数前面，就返回-1；

如果两个参数相等，就返回0；

如果第一个参数应该排在第二个参数后面，就返回1。

      function compare(value1, value2) {
        if (value1 < value2) {
          return -1;
        } else if (value1 > value2) {
          return 1;
        } else {
          return 0;
        }
      }

      let array = [1, 5, 0, 15, 10];
      let array2 = array.sort(compare);
      console.log(array2); // [0, 1, 5, 10, 15]

 我们使用箭头函数来定义：

let array = [0, 1, 5, 10, 15];

let array2 = array.sort((a, b) => a - b);  // 正序排序 升序
console.log(array2)  // [0, 1, 5, 10, 15]

let array3 = array.sort((a, b) => b - a);  // 倒序排序 降序
console.log(array3)  // [15, 10, 5, 1, 0]

② reverse()

颠倒数组中元素的顺序。该方法会改变原来的数组，而不会创建新的数组。

      let array = [1, 2, 3, 4, 5];
      let array2 = array.reverse();
      console.log(array); // [5, 4, 3, 2, 1]
      console.log(array2 === array); // true

6、操作方法

① concat()

连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

该方法还可以用于数组扁平化

arrayObject.concat(arrayX,arrayX,......,arrayX)

其中参数arrayX是必需的。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

      let array = [1, 2, 3];
      let array2 = array.concat(4, [5, 6], [7, 8, 9]);
      console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
      console.log(array); // [1, 2, 3], 可见原数组并未被修改

② slice()

从已有的数组中返回选定的元素。返回一个新的数组，包含从 start 到 end （不包括该元素）的数组元素。方法并不会修改数组，而是返回一个子数组。

arrayObject.slice(start, end) 

其参数如下：

• start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推；
• end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

      let array = ["one", "two", "three", "four", "five"];
      console.log(array.slice(0)); // ["one", "two", "three","four", "five"]
      console.log(array.slice(2, 3)); // ["three"]

③ splice()

数组中的最强大的方法之一了。它会向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。其使用语法如下：

arrayObject.splice(index, howmany, item1,.....,itemX)

其参数如下：

• index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
• howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
• item1, ..., itemX：可选。向数组添加的新项目。

从上面参数可知，splice主要有三种使用形式：

• 删除：需要传递两个参数，即要删除的第一个元素的位置和要删除的元素的数量；
• 插入：需要传递至少三个参数，即开始位置、0（要删除的元素数量）、要插入的元素。
• 替换：在删除元素的同时，在指定位置插入新的元素。同样需要传入至少三个参数，即开始位置、要删除的元素数量、要插入的元素。要插入的元素数量是任意的，不一定和删除的元素数量相等。

      let array1 = ["one", "two", "three", "four", "five"];
      console.log(array1.splice(1, 2)); // 删除：["two", "three"]
      console.log(array1) // ["one", "four", "five"];

      let array2 = ["one", "two", "three", "four", "five"];
      console.log(array2.splice(2, 0, 996)); // 插入：[]
      console.log(array2) // ["one", "two", 996, "three", "four", "five"];

      let array3 = ["one", "two", "three", "four", "five"];
      console.log(array3.splice(2, 1, 996)); // 替换：["three"]
      console.log(array3) //  ["one", "two", 996, "four", "five"];

7、归并方法

① reduce()

数组常用方法 —— reduce()方法【数组求和，求乘积、计算数组中每个元素出现的次数，数组去重，将二维数组转化为一维，将多维数组转化为一维，对象里的属性求和】_reduce求和-CSDN博客

对数组中的每个元素执行一个 reducer 函数(升序执行)，将其结果汇总为单个返回值。

为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。

arr.reduce(callback, [initialValue])

(1) callback （执行数组中每个值的函数，包含四个参数）

• previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
• currentValue （数组中当前被处理的元素）
• index （当前元素在数组中的索引）
• array （调用 reduce 的数组）

(2) initialValue （作为第一次调用 callback 的第一个参数。）

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);  

输出结果如下：

1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

如果没有提供 initialValue，reduce 会从索引 1 的地方开始执行 callback 方法，跳过第一个索引。如果提供 initialValue，从索引 0 开始。 

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
}, 5)
console.log(arr, sum);  

输出结果如下：

5 1 0
6 2 1
8 3 2
11 4 3
[1, 2, 3, 4] 15

② reduceRight()

该方法和的上面的 reduce() 用法几乎一致，只是该方法是对数组进行倒序查找的。而reduce()方法是正序执行的。

      let arr = [1, 2, 3, 4];
      let sum = arr.reduceRight((prev, cur, index, arr) => {
        console.log(prev, cur, index);
        return prev + cur;
      }, 5);
      console.log(arr, sum);

输出结果如下：

5 4 3
9 3 2
12 2 1
14 1 0
[1, 2, 3, 4] 15 

8、搜索和位置方法

ECMAScript提供了两类搜索数组的方法：按照严格相等搜索和按照断言函数搜索。

① 严格相等 indexOf()、lastIndexOf()、includes()

ECMAScript 通过了3个严格相等的搜索方法：indexOf()、lastIndexOf()、includes()。

这些方法都接收两个参数：要查找的元素和可选的其实搜索位置。 

lastIndexOf() ：从数组结尾元素开始向前搜索，其他两个方法则会从数组开始元素向后进行搜索。

indexOf() 和 lastIndexOf()：返回的是查找元素在数组中的索引值，如果没有找到，则返回-1

includes()：返回布尔值，表示是否找到至少一个与指定元素匹配的项。

在比较第一个参数和数组的每一项时，会使用全等（===）比较，也就是说两项必须严格相等。

let arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(2))      // 1
console.log(arr.lastIndexOf(3))  // 2
console.log(arr.includes(4))     // true

② 断言函数 find()、findIndex()

ECMAScript 也允许按照定义的断言函数搜索数组，每个索引都会调用这个函数，断言函数的返回值决定了相应索引的元素是否被认为匹配。

使用断言函数的方法有两个，分别是 find() 和 findIndex()方法。

这两个方法对于空数组，函数是不会执行的。并且没有改变数组的原始值。

它们都有三个参数：元素、索引、元素所属的数组对象。其中元素是数组中当前搜索的元素，索引是当前元素的索引，而数组是当前正在搜索的数组。

find() ：返回的是第一个匹配的元素，如果没有符合条件的元素返回 undefined；

findIndex()：返回的是第一个匹配的元素的索引，如果没有符合条件的元素返回 -1

      let arr = [1, 2, 3, 4, 5];
      arr.find((item) => item > 2); // 结果： 3
      arr.findIndex((item) => item > 2); // 结果： 2

9、迭代器方法 keys()、values()、entries()

在 ES6 中，Array 的原型上暴露了3个用于检索数组内容的方法：keys()、values()、entries()

keys() ：返回数组索引的迭代器

values()：返回数组元素的迭代器

entries()：返回索引值对的迭代器

因为这些方法返回的都是迭代器，所以可以将他们的内容通过Array.from直接转化为数组实例：

let array = ["one", "two", "three", "four", "five"];
console.log(Array.from(array.keys())); // [0, 1, 2, 3, 4]
console.log(Array.from(array.values())); // ["one", "two", "three", "four", "five"]
console.log(Array.from(array.entries())); // [[0, "one"], [1, "two"], [2, "three"], [3, "four"], [4, "five"]]

10、迭代方法 every()、filter()、forEach()、map()、some()

ECMAScript 为数组定义了5个迭代方法，分别是 every()、filter()、forEach()、map()、some()

这些方法都不会改变原数组。这五个方法都接收两个参数：以每一项为参数运行的函数和可选的作为函数运行上下文的作用域对象（影响函数中的this值）。

传给每个方法的函数接收三个参数：分别是当前元素、当前元素的索引值、当前元素所属的数对象。

① every()

对数组中的每一项进行遍历，只有所有元素都符合条件时，才返回 true，否则就返回 false。

let arr = [1, 2, 3, 4, 5]
console.log(arr.every(item => item > 0)) // true

② filter()

用于过滤数组，满足条件的元素会被返回。

它的参数是一个回调函数，所有数组元素依次执行该函数，返回结果为 true 的元素会被返回。该方法会返回一个新的数组，不会改变原数组。

let arr = [1, 2, 3, 4, 5]
console.log(arr.filter(item => item > 2)) // [3, 4, 5]

可以使用 filter() 方法来移除数组中的 undefined、null、NaN 等值

let arr = [1, undefined, 2, null, 3, false, '', 4, 0]
console.log(arr.filter(Boolean)) // [1, 2, 3, 4]

③ forEach

用于调用数组的每个元素，并将元素传递给回调函数。该方法没有返回值 

let arr = [1, 2, 3, 4, 5]
arr.forEach((item, index, arr) => {
  console.log(item, index, arr)
})

该方法还可以有第二个参数，用来绑定回调函数内部 this 变量（回调函数不能是箭头函数，因为箭头函数没有this）

      let arr = [1, 2, 3, 4, 5];
      let arr1 = [9, 8, 7, 6, 5];
      arr.forEach(function (item, index, arr) {
        console.log(this[index]); //  9 8 7 6 5
      }, arr1);

④ map()

会返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

该方法按照原始数组元素顺序依次处理元素。该方法不会对空数组进行检测，它会返回一个新数组，不会改变原始数组。

      let arr = [1, 2, 3];
      let arrNew = arr.map((item) => {
        return item + 1;
      });
      console.log(arrNew); // [2, 3, 4]

第二个参数用来绑定参数函数内部的 this 变量： 

      var arr = ["a", "b", "c"];
      let arrNew = [1, 2].map(function (e) {
        return this[e];
      }, arr);
      console.log(arrNew); // ['b', 'c']

该方法可以进行链式调用：

      let arr = [1, 2, 3];
      let arrNew = arr.map((item) => item + 1).map((item) => item + 1);
      console.log(arrNew); // [3, 4, 5]

⑤ some()

对数组中的每一项进行遍历，只要有一个元素符合条件，就返回 true，否则就返回 false。

      let arr = [1, 2, 3, 4, 5];
      console.log(arr.some((item) => item > 4)) // true