JavaScript中数组常用的方法总结

按照是否会改变原数组对数组中常用的方法进行分类

对于学习前端的小伙伴们，对于数组的一些常用方法一定都很了解，就像对于我而言，数组里面的方法基本都有实战或者练习过，所以面试官问起来了解哪些数组的方法的时候，也是很自信满满，但是当面试官再次深问，哪些方法可以改变原数组，就有点犹豫了，索性今天就按是否可以改变原数组来对数组中的方法进行一个分类吧，让你面对面试官的提问可以游刃有余，当然最主要的还是自己能够真的吃透数组的所有方法，对我们未来的开发之路真的很有帮助！

一、不会改变原数组

1. join(separator)：用于把数组中的所有元素放入一个字符串。（将数组转化成字符串）
   语法：arrayObject.join(separator)
   separator：可选参数，代表用指定的分隔符进行分隔，默认会用逗号进行分隔
   返回一个字符串

let arr = [1,2,3,4,5];
let newArr = arr.join('-');
console.log(arr);  // [1,2,3,4,5]
console.log(newArr);  // 1-2-3-4-5

2. concat()：用于连接两个或多个数组。
   语法：arrayObject.concat(arrayX,arrayX,…,arrayX)
   返回一个新的数组

let arr1 = [1,2,3,4,5];
let arr2 = [6,7,8,9];  
let newArr = arr1.concat(arr2);
console.log(arr1);  //[1,2,3,4,5]
console.log(arr2); //[6,7,8,9]
console.log(newArr);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

3. slice()：可从已有的数组中返回选定的元素。(截取数组)
   语法：arrayObject.slice(start,end)

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

返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

let arr = [1,2,3,4,5];
let newArr = arr.slice(2,4);
console.log(arr);  //  [1,2,3,4,5]
console.log(newArr);  //  [3,4]

4. map()：映射，返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，会按照原始数组元素顺序依次处理元素。

语法：array.map(function(currentValue,index,arr), thisValue)
function(currentValue, index,arr)：必须。函数，数组中的每个元素都会执行这个函数。
currentValue：必须。当前元素的值。
index：可选。当前元素的索引值。
arr：可选。当前元素属于的数组对象。
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

返回一个新的数组，map不会对空数组进行检测。

let arr = [1,2,3,4,5];
let newArr = arr.map( a => a*2);
console.log(arr);  //  [1,2,3,4,5]
console.log(newArr);   //  [2,4,6,8,10]

需要注意的是map正常情况下需要有return，如果没有return则和forEach效果相同

5. filter()：过滤，数组中的每一项运行给定函数，返回满足特定条件的元素组成新的数组

语法：array.filter(function(currentValue,index,arr), thisValue)
function(currentValue, index,arr)：必须。函数，数组中的每个元素都会执行这个函数。
currentValue：必须。当前元素的值。
index：可选。当前元素的索引值。
arr：可选。当前元素属于的数组对象。
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

返回一个新数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

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

6. every()：返回布尔值，数组中的每一项都满足条件才返回true，否则返回false。
   如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

语法：array.every(function(currentValue,index,arr), thisValue)
function(currentValue, index,arr)：必须。函数，数组中的每个元素都会执行这个函数。
currentValue：必须。当前元素的值。
index：可选。当前元素的索引值。
arr：可选。当前元素属于的数组对象。
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

返回值为布尔值

let arr = [1,2,3,4,5];
let newArr = arr.every( a => a>2);
console.log(arr);   //  [1,2,,3,4,5]
console.log(newArr);  //  false

7. some()：判断数组中是否有满足条件的项，只要有一项满足就返回true
   如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。

语法：array.some(function(currentValue,index,arr),thisValue)
function(currentValue, index,arr)：必须。函数，数组中的每个元素都会执行这个函数。
currentValue：必须。当前元素的值。
index：可选。当前元素的索引值。
arr：可选。当前元素属于的数组对象。
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

返回值为布尔值

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

8. reduce() / reduceRight()：接收一个函数作为累加器，数组中的每个值（从左到右 / 从右到左）开始缩减，最终计算为一个值。(求数组和或者阶乘)
   语法：array.reduce(function(prev, cur, index, arr), initialValue)
   function(prev，cur，index，arr)：必需。用于执行每个数组元素的函数。
   prev：前一个元素
   cur：当前元素
   index：元素的索引
   arr：所要遍历的数组
   initialValue 可选。传递给函数的初始值

返回值为最终计算结果

let arr = [1,2,3,4,5];
let newArr = arr.reduce( (a,b) => a+b);
console.log(arr);  // [1,2,3,4,5]
console.log(newArr);  // 15

9. forEach()：遍历数组，需传递一个函数，用于调用数组的每个元素，并将元素传递给回调函数。

语法：array.forEach(function(currentValue, index, arr), thisValue)
function(currentValue, index, arr)：必需。 数组中每个元素需要调用的函数。
currentValue：必需。当前元素
index：可选。当前元素的索引值。
arr：可选。当前元素所属的数组对象。
thisValue：可选。传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值

返回值为undefined

let arr = [1,2,3,4,5];
let newArr = arr.forEach((item,index) => {
	console.log(index +':'+item);  //0:1 1:2 2:3 3:4 4:5
});
console.log(arr);  //  [1,2,3,4,5]
console.log(newArr);  //  undefined

二、会改变原数组

1. push()：从尾部向数组内添加元素，接受任意数量参数，返回值为新数组的长度

let arr = [1,2,3,4,5];
let newArr = arr.push(6,7);
console.log(arr);   //[1, 2, 3, 4, 5, 6, 7]
console.log(newArr);  // 7

2. pop()：从数组尾部移除最后一项，然后返回移除的项，如果数组原本为空，则返回undefined

let arr = [1,2,3,4,5];
let newArr = arr.pop();
console.log(arr);  //  [1, 2, 3, 4]
console.log(newArr);  // 5

3. shift()：删除原数组的第一项，并返回删除元素的值，如果数组原本为空，则返回undefined

let arr = [1,2,3,4,5];
let newArr = arr.shift();
console.log(arr);  //[2,3,4,5]
console.log(newArr);  // 1

4. unshift()：将参数添加到数组的头部，并返回数组的长度

let arr = [1,2,3,4,5];
let newArr = arr.unshift(8,9);
console.log(arr);  //  [8, 9, 1, 2, 3, 4, 5]
console.log(newArr);  // 7

5. reverse()：反转数组项的顺序，该方法会改变原来的数组，而不会创建新的数组。

let arr = [1,2,3,4,5];
let newArr = arr.reverse();
console.log(arr);  //  [5,4,3,2,1]
console.log(newArr);  //  [5,4,3,2,1]

6. sort()：对数组排序，返回排序后的数组

let arr = [8,3,-3,56,23,5];
let newArr = arr.sort();
console.log(arr);  //   [-3, 23, 3, 5, 56, 8]
console.log(newArr);  // [-3, 23, 3, 5, 56, 8]

7. splice()：可以实现数组的删除，插入和替换，返回被删除的项目
   语法：array.splice(index,howmany,item1,…,itemX)
   index：必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
   howmany：可选。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
   item1, …, itemX：可选。向数组添加的新项目。

let arr = [1,2,3,4,5];
let newArr = arr.splice(1);
console.log(arr);  //[1]
console.log(newArr);  // [2, 3, 4, 5]

let arr = [1,2,3,4,5];
let newArr = arr.splice(1,2);
console.log(arr);  // [1,4,5]
console.log(newArr);  //[2,3]

let arr = [1,2,3,4,5];
let newArr = arr.splice(1,2,6,7);
console.log(arr);  // [1, 6, 7, 4, 5]
console.log(newArr);  // [2,3]