写在前面

　　数组和字符串的方法不管是在面试，还是在工作中做项目，亦或者是在做算法都是非常重要的，也许一个API就能让你少写很多逻辑。
　　本文详细总结了ES5，ES6的数组方法，让你做到对他们的用法一网打尽。

食用对象：初级前端
美味指数：?????

ES5

pop

作用：删去数组最后一个值，返回值为删去的值

const arr = [1, 2, 3];
const res = arr.pop();
console.log(arr, res);  // [ 1, 2 ] 3
复制代码

shift

作用：删去数组第一个值，返回值为删去的值

const arr = [1, 2, 3];
const res = arr.shift();
console.log(arr, res);  // [ 2, 3 ] 1
复制代码

push

作用：在数组末尾加上一个值，返回值为数组的长度

const arr = [1, 2, 3];
const res = arr.push(5);
console.log(arr, res);  // [ 1, 2, 3, 5 ] 4
复制代码

unshift

作用：在数组开头加上一个值，返回值为数组的长度

const arr = [1, 2, 3];
const res = arr.unshift(5);
console.log(arr, res);  // [ 5, 1, 2, 3 ] 4
复制代码

concat

作用：用于连接两个或多个数组，不改变原数组

const arr = [1, 2, 3];
const list = [11, 12, 13];
const res = arr.concat(list);
console.log(res);   //[ 1, 2, 3, 11, 12, 13 ]
复制代码

reverse

作用：用于翻转数组

const arr = [1, 2, 3];
arr.reverse();
console.log(arr);  // [ 3, 2, 1 ]
复制代码

join

作用：指定分隔符后，将数组转为字符串并返回，不改变原数组

const arr = [1, 2, 3];
const res = arr.join('-');
console.log(arr, res);   //[ 1, 2, 3 ] 1-2-3
复制代码

slice

作用：截取数组，截取从下标为第一个参数开始到第二个参数（不包括，且为可选参数）的数组，不改变原数组

const arr = [1, 2, 3, 4, 5];
const res = arr.slice(1, 3);
console.log(res);   //[ 2, 3 ]
复制代码

splice

作用：截取数组，第一个参数为开始下标，第二个参数为截取个数，第三个参数为添加的数，返回截取的数组，改变原数组

const arr = [1, 2, 3, 4, 5];
const res = arr.splice(1, 3, 'a');
console.log(arr,  res);   // [ 1, 'a', 5 ] [ 2, 3, 4 ]
复制代码

sort()

作用：用于对数组的元素进行排序，并返回数组。默认排序顺序是根据字符串UniCode码，会改变原数组

//升序
const arr = [1, 3, 2, 5, 4];
arr.sort((a, b) => a - b);
console.log(arr)  //[ 1, 2, 3, 4, 5 ]
//降序
const arr = [1, 3, 2, 5, 4];
arr.sort((a, b) => b - a);
console.log(arr)   //[ 5, 4, 3, 2, 1 ]
复制代码

toString

作用：将数组转化成字符串,不改变原数组

const arr = [1, 2, '掘金'];
const res = arr.toString();
console.log(res, arr);   //1,2,掘金 [ 1, 2, '掘金' ]
复制代码

indexOf

作用：查询数组是否含有指定元素，含有就返回下标，没有就返回-1

const arr = [1, 2, 3, 4, 5];
const res = arr.indexOf(3);
console.log(res);   // 2
复制代码

lastIndexOf：搜索数组中的元素，并返回它最后出现的位置。

forEach

作用：数组每个元素执行一次回调函数, 返回值为undefined

const arr = [1, 2, 3];
const res = arr.forEach(function(value, index, arr) {
  console.log(value);   //1, 2, 3
  console.log(index);   //0, 1, 2
  console.log(arr);     //[ 1, 2, 3 ]
  return value
})
console.log(arr, res)   //undefined
复制代码

map

作用：遍历数组元素传给回调函数处理，返回处理后的新数组，不改变原数组

const arr = [1, 2, 3];
const res = arr.map((value, index, arr) => {
  console.log(value);  //1, 2, 3
  console.log(index);  //0, 1, 2
  console.log(arr);  //[1, 2, 3]
  return value*2;
})
console.log(res);  //[2, 4, 6]
复制代码

filter:

作用：遍历数组元素传给回调函数，返回所有结果为true的元素组成的数组，不改变原数组

const arr = [-1, 1, 2];
const res = arr.filter(item => item > 0);
console.log(res)  //[ 1, 2 ]
复制代码

some

作用：遍历数组元素传给回调函数，结果有一个为true则由some()返回true

const arr = [-1, 1, 2];
const res = arr.some(item => item < 0);
console.log(res);  //true
复制代码

every

作用：遍历数组元素传给回调函数，所有结果都为true则由every()返回true

const arr = [-1, 1, 2];
const res = arr.every(item => item > 0);
console.log(res);  //false
复制代码

reduce

作用：归并，从左往右迭代数组的所有项最终计算为一个值，并返回
第一个参数：上一次调用回调时的返回值，或者初始值 init
第二个参数：表示当前正在处理的数组元素
第三个参数：表示当前正在处理的数组元素的索引
末尾参数：表示初始值

//求数组各项之和：
const arr = [1, 2, 3, 4, 5];
const res = arr.reduce((pre, cur, index, arr) => {
  console.log(pre)   //0,1,3,6,10
  console.log(cur)   //1,2,3,4,5
  console.log(index)  //0,1,2,3,4
  console.log(arr)   //[ 1, 2, 3, 4, 5 ]
  return pre + cur;
}, 0)
console.log(res)    //15
复制代码

ES6

find

作用：所有数组成员依次执行回调函数，直到找出第一个返回值为true的成员并返回该成员，如果没有则返回undefined
第一个参数为当前元素，第二个为索引值，第三个为当前元素所属数组

const arr = [1, -1, 3, 6];
const res = arr.find((value, index, arr) => {
  console.log(value);    //1
  console.log(index);    //0
  console.log(arr);  //[ 1, -1, 3, 6 ]
  return value > 0;
})
console.log(res)  //1
复制代码

findIndex:

作用：所有数组成员依次执行回调函数，直到找出第一个返回值为true的成员并返回该成员在数组中的位置，如果没有则返回-1

const arr = [1, -1, 3, 6];
const res = arr.findIndex((value, index, arr) => {
  console.log(value);    //1, -1
  console.log(index);    //0, 1
  console.log(arr);  //[ 1, -1, 3, 6 ]
  return value < 0;
})
console.log(res)  // 1
复制代码

copyWithin

作用：将指定位置指定数量的数组成员复制到其他位置，会改变原数组
第一个参数：从该位置开始替换数据
第二个参数：从该位置开始读取数据，默认为 0
第三个参数：到该位置前停止读取数据，默认等于数组长度

const arr = [1, 2, 3, 4, 5];
const res = arr.copyWithin(1, 3, 4);
console.log(res)  //[ 1, 4, 3, 4, 5 ]
复制代码

fill

作用：使用给定值，填充数组,会改变原数组
第一个参数：填充的数
第二个参数：从该位置开始填充，默认为 0
第三个参数：到该位置前停止填充，默认等于数组长度。

const arr = [1, 2, 3, 4, 5];
const res = arr.fill('a', 2, 4);
console.log(res)  //[ 1, 2, 'a', 'a', 5 ]
复制代码

includes

作用：返回一个布尔值，表示数组是否包含某个数
第一个参数：需要查找的值
第二个参数：搜索的起始位置

const arr = [1, 2, 3, 4, 5]
const res = arr.includes(1, 1)
console.log(res)  //false
复制代码

flat

作用：拍平数组，默认拍平一层，可加拍平层数, 不改变原数组

const arr = [1, [2, [3, [4, [5, [6, [7, [8]]]]]]]]
const res = arr.flat(Infinity)
console.log(res)   //[1, 2, 3, 4, 5, 6, 7, 8]
复制代码

flatMap

作用：对原数组的每个成员执行一个函数，然后对返回值组成的数组执行flat()方法，返回一个新数组, 不改变原函数

const arr = [1, 2, 3];
const res = arr.flatMap(item => [[item * 2]])
console.log(res)  //[ [ 2 ], [ 4 ], [ 6 ] ]
复制代码

keys, values，entries

作用：用于遍历数组，返回一个遍历器对象，可以用for…of循环进行遍历
keys()是对键名的遍历
values()是对键值的遍历
entries()是对键值对的遍历

const arr = [1, 'a', 3];
for (let index of arr.keys()) {
  console.log(index);   //0, 1, 2
}
for (let value of arr.values()) {
  console.log(value);  //1, a, 3
}

for (let [index, value] of arr.entries()) {
  console.log(index, value); //0 1, 1 a, 2 3
}
复制代码

静态方法

Array.isArray（ES5）

作用：判断一个对象是否数组

const arr = [1, 2, 3];
const obj = {name: '掘金'};
console.log(Array.isArray(arr))   //true
console.log(Array.isArray(obj))   //false
复制代码

Array.from（ES6）

作用：将类数组或者可遍历的对象转换成真正的数组

const set = new Set([1, 2, 3]);
console.log(set);  //Set(3) { 1, 2, 3 }
console.log(Array.from(set));  //[ 1, 2, 3 ]
复制代码

Array.of（ES6）

作用：用于将一组值转换成数组

const res = Array.of(1, 'a', 2, 3);
console.log(res);   //[ 1, 'a', 2, 3 ]
复制代码

this问题

还可接收第二个参数作为当前this的方法有：
forEach，map，reduce，every，some，filter，find，findIndex
注意此时不要写成箭头函数

//以forEach为例子：
const arr = [1, 2, 3];
const obj = {age: 3};
arr.forEach(function(value, index, arr) {
  console.log(value);   //1, 2, 3
  console.log(index);   //0, 1, 2
  console.log(arr);     //[ 1, 2, 3 ]
  console.log(this.age);  //3   注意这里this指向了obj
  return value
}, obj)
复制代码