JS的数组方法-按是否改变原数组分类

因为经常会忘记数组的方法，对照MDN对数组方法进行了粗略的总结，供自己时常回顾。

修改原数组

返回改变后的数组

1. Array.prototype.copyWithin(target[, start[, end]])

   copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回改变后的数组，不会改变原数组的长度。

   • target：索引值，复制序列到该位置。
   • start：索引值，开始复制元素的起始位置。
   • end：索引值，开始复制元素的结束位置，不含end自己。如果end被忽略，一直复制到数组结尾。

   const arr = [1,2,3,4,5,6,7,8,9]
   //将3<=index<5的元素(4,5) 复制到数组索引为2的位置上。
   console.log(arr.copyWithin(2,3,5))//[1，2，4，5，5，6，7，8，9]
   

2. Array.prototype.fill(value[, start[, end]])

   fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

   const arr = [1,2,3,4,5,6,7,8,9]
   console.log(arr.fill(0,1,8))//[1, 0, 0, 0, 0, 0, 0, 0, 9]
   

3. Array.prototype.reverse()

   reverse()方法将数组中元素的位置颠倒，并返回改变后的数组。

4. Array.prototype.sort([compareFn])

   sort()方法对数组的元素进行排序，并返回数组。

   • （可选）compareFn：用于指定按某种顺序进行排列的函数。

     • firstEl：第一个用于比较的元素。
     • secondEl：第二个用于比较的元素。

     firstEl和secondEl是两个要被比较的元素，如果compareFn(a,b)<0，则a会排列到b的前面。

返回undefined

1. Array.prototype.forEach(callback(currentValue [, index [, array]])[, thisArg])

   forEach()方法按升序为数组中含有有效值的每一项执行一次callback函数，已经删除或者未初始化的项将跳过。

返回元素

1. Array.prototype.pop()

   pop()方法从数组中删除最后一个元素，并返回该元素的值。这个方法更改数组的长度。

2. Array.prototype.shift()

   shift()方法从数组中删除第一个元素，并返回该元素的值。这个方法更该数组的长度。

返回数组的新长度

1. Array.prototype.push(element1, ..., elementN)

   push方法将传入的元素添加到数组的末尾，并返回该数组的新长度。

2. Array.prototype.unshift(element1, ..., elementN)

   unshift方法将传入的元素添加到数组的开头，并返回该数组的新长度。

返回数组

1. Array.prototype.splice(start[, deleteCount[, item1[, item2[, ...]]]])

   splice()方法既可以删除数组元素，也可以替换数组元素，也可以添加数组元素。

   • start：指定修改的开始位置。如果start大于数组的长度，则从数组末尾开始添加元素。
   • （可选）deleteCount：要移除的元素个数。0或者负值时不移除元素。
   • （可选）item：要添加进数组的元素，从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

   splice()返回由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

不修改原数组

返回新数组

1. Array.prototype.concat()

   concat()方法用于合并多个数组，会返回一个新数组。如果concat()里面不传入参数，则返回一个浅拷贝。

   const arr1 = [1,2,3]
   const arr2 = [4,5,6]
   const arr3 = [7,8,9]
   ​
   const arr = arr1.concat(arr2,arr3)
   ​
   console.log(arr)//[1,2,3,4,5,6,7,8,9]
   

2. Array.prototype.filter(callback(element[, index[, array]])[, thisArg])

   filter方法返回一个新数组，其包含通过所提供函数实现的测试的所有元素。

   • callback：用于测试数组每个元素的函数，返回true则表示该元素通过测试，保留该元素。false不保留。

     • element：当前被测试的数组元素
     • （可选）index：当前被测试的数组元素的索引
     • （可选）array：调用filter的数组本身

3. Array.prototype.flat([depth])

   flat()方法会按照指定的深度递归遍历数组，并将所有元素与遍历到的子数组的元素合并为一个新数组，并返回。（数组扁平化）

   • （可选）depth：指定要提取嵌套数组的结构深度，默认为1。

   //使用 Infinity，可展开任意深度的嵌套数组
   var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
   arr4.flat(Infinity);
   // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
   

4. Array.prototype.flatMap(function callback(currentValue[, index[, array]]){//return element for new_array}[,thisArg])

   flatMap()方法首先使用映射函数映射每个元素，返回一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。

   • callback：可以生成一个新数组中的元素的函数。

5. Array.from(arrayLike[, mapFn[, thisArg]])

   from()方法可以从伪数组对象或者可迭代对象中创建数组，返回一个新的数组实例。

   • arrayLike：想要转成数组的伪数组对象或者可迭代对象
   • （可选）mapFn：新数组的每个元素都会执行该回调函数

6. Array.prototype.map(function callback(currentValue[, index[, array]]){//return element for new_array}[,thisArg])

   map()方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。

7. Array.of(elementN)

   创建一个新数组实例，传入的参数将按顺序成为返回数组中的元素。

   Array.of(7);       // [7]
   Array.of(1, 2, 3); // [1, 2, 3]
   

8. Array.prototype.slice([begin[, end]])

   slice()方法会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。（是浅拷贝）

返回数组元素

1. Array.prototype.at()

   at()方法接收一个整数值，并且返回该索引的项目，如果找不到指定的索引，则返回undefined。

   允许正数和负数。

   const arr = [1,2,3]
   console.log(arr.at(1)) //2
   

2. Array.prototype.find(callback(element[, index[, array]])[, thisArg])

   find()方法返回数组中满足提供的测试函数的第一个元素的值，如果都不满足，返回undefined。

   • callback：在数组每一项上执行的函数。

     • element：当前被测试的数组元素
     • （可选）index：当前被测试的数组元素的索引
     • （可选）array：调用find的数组本身

返回数组元素的索引

1. Array.prototype.findIndex()

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

   • callback：在数组每一项上执行的函数。

     • element：当前被测试的数组元素
     • （可选）index：当前被测试的数组元素的索引
     • （可选）array：调用find的数组本身

2. Array.prototype.indexOf(searchElement[, fromIndex])

   indexOf()方法返回给定元素在数组中的第一个索引，如果给定元素在数组中不存在，返回-1。

   • （可选）fromIndex：从指定的索引处开始查找。

3. Array.prototype.lastIndexOf(searchElement[, fromIndex])

   lastIndexOf()方法返回给定元素在数组中的最后一个索引，如果给定元素在数组中不存在，返回-1。

   • （可选）fromIndex：从指定的索引处开始从后向前查找。

   var array = [2, 5, 9, 2];
   var index = array.lastIndexOf(2);
   // index is 3
   index = array.lastIndexOf(2, 2);
   // index is 0
   

返回迭代器对象

1. Array.prototype.entries()

   entries()返回一个含有键值对的可迭代对象，该对象的原型上有.next方法，可用用于遍历迭代器取得原数组的[key,value]，当done为true时说明迭代完毕了。

   const arr = [1,2,3,4,5,6,7,8,9]
   let iterator = arr.entries()
   console.log(iterator)//Object [Array Iterator] {}
   for(let i=0;i<arr.length+1;i++){
       console.log(iterator.next())
   }
   /* { value: [ 0, 1 ], done: false }
      { value: [ 1, 2 ], done: false }
      { value: [ 2, 3 ], done: false }
      { value: [ 3, 4 ], done: false }
      { value: [ 4, 5 ], done: false }
      { value: [ 5, 6 ], done: false }
      { value: [ 6, 7 ], done: false }
      { value: [ 7, 8 ], done: false }
      { value: [ 8, 9 ], done: false }
      { value: undefined, done: true }  */
   

2. Array.prototype.keys()

   keys()方法返回一个包含数组中每个索引键的Array Iterator对象。（与entries不同，keys（）返回的迭代器只含有索引）

   const array1 = ['a', 'b', 'c'];
   const iterator = array1.keys();
   ​
   for (const key of iterator) {
     console.log(key);
   }
   ​
   // expected output: 0
   // expected output: 1
   // expected output: 2
   

3. Array.prototype.values()

   values()方法返回一个包含数组中每个值的Array Iterator对象。（与entries不同，value()返回的迭代器只含有值）

返回迭代器迭代后的结果

1. Array.prototype.reduce(callbackFn[, initialValue])

   reduce()方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

   • callbackFn：一个reducer函数，包含四个参数

     • previousValue：上一次调用callbackFN是的返回值。
     • currentValue：数组中正在处理的元素
     • （可选）currentIndex：数组中正在处理的元素的索引
     • （可选）array：被遍历的数组

   • （可选）initialValue：第一次调用callback时previousValue的值。如果指定了初始值，那么第一次调用callback时currentValue则将使用数组第一个元素。如果不指定初始值，第一次调用callback时previousValue为数组第一个元素，currentValue为数组第二个元素。

2. Array.prototype.reduceRight(callbackFn[, initialValue])

   使用方法类似于reduce，不过遍历方向是从右向左。

返回布尔值

1. Array.prototype.every(callback(element[, index[, array]])[, thisArg])

   测试一个数组内的元素是否都能通过某个指定函数的测试，如果收到一个空数组，任何情况下都返回true。

   • callback：回调函数，可以接收三个参数：

     • element：用于测试的当前值
     • （可选）index：索引
     • （可选）array：调用every的当前数组。

   • thisArg：传入该参数时，该参数为调用 callback 时的 this 值。如果省略该参数，则 callback 被调用时的 this 值，在非严格模式下为全局对象，在严格模式下传入 undefined。

2. Array.prototype.some(callback(element[, index[, array]])[, thisArg])

   测试一个数组内的元素是否至少有一个能通过指定函数的测试。

3. Array.prototype.includes(valueToFind[, fromIndex])

   includes()方法判断数组中是否含有指定值，有返回true，否则返回false。

   • （可选）fromIndex：从指定的索引处开始查找。

4. Array.isArray(obj)

   isArray()方法检测传入的对象是不是数组，是返回true，不是返回false。

返回字符串

1. Array.prototype.join([separator])

   join()方法以指定的分隔符连接数组中的所有元素。

   • （可选）separator：字符串。如果不指定该值，则数组元素之间用逗号分隔。

2. Array.prototype.toLocaleString([locales[,options]])

   toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。

3. Array.prototype.toString()

   返回一个字符串，表示指定的数组及其元素。