最近在经历面试的过程。其中不少有关于JS数组的相关问题，所以在此做一个系统的记录以便日后进行回顾。
关于下面介绍的数组方法，从两个大方向入手：
- 改变原数组
- 不改变原数组
- ES6新增的数组方法
改变原数组的方法
1.push()
- 末尾添加数据：
push(数据) - 返回值：数组最终长度
let arr = [1,2,3,4]
let res = arr.push(5);
console.log(arr); // [1,2,3,4,5]
console.log(res); // 5
2.pop()
- 末尾删除元素 -
pop() - 返回值：被删除的值
let arr = [1,2,3,4]
let res = arr.pop();
console.log(arr); // [1,2,3]
console.log(res); // 4
3.unshift()
- 首部添加元素：
unshift(数据) - 返回值：数组最终长度
let arr = [1,2,3,4]
let res = arr.unshift(5);
console.log(arr); // [5, 1, 2, 3, 4]
console.log(res); // 5
4.shift()
- 首部删除元素：
shift() - 返回值：被删除的元素
let arr = [1,2,3,4]
let res = arr.shift();
console.log(arr); // [2, 3, 4]
console.log(res); // 1
- reverve()
- 数组翻转：
reverse() - 返回值：翻转后的数组
let arr = [1,2,3,4]
let res = arr.reverse();
console.log(arr); // [4, 3, 2, 1]
console.log(res); // [4, 3, 2, 1]
6.sort()
- 数组元素排序
sort()：按位排序sort((a,b) => return a-b)：正序sort((a,b) => return b-a)：倒序
- 返回值：排序后的数组
let arr = [1,2,3,4]
let res = arr.sort();
console.log(arr); // [1, 2, 3, 4]
console.log(res); // [1, 2, 3, 4]
let res = arr.sort((a,b) => return a-b);
console.log(arr); // [1, 2, 3, 4]
console.log(res); // [1, 2, 3, 4]
let res = arr.sort((a,b) => return a-b);
console.log(arr); // [4, 3, 2, 1]
console.log(res); // [4, 3, 2, 1]
7.splice()
- 截取数组
splice(开始索引，个数)splice(开始索引，个数，插入的数据)
- 返回值：被截取后的数组（不符合要求，返回空数组）
let arr = [1,2,3,4]
let res = arr.split(1,2);
console.log(arr); // [1, 4]
console.log(res); // [2, 3]
let res = arr.split(1,2,88,99,100);
console.log(arr); // [1, 88, 99, 100, 4]
console.log(res); // [2, 3]
不改变原数组的方法
1.concat()
- 合并数组：
arr.concat(数据) - 返回值：一个新数组
let arr = [1,2,3,4]
let res = arr.concat([10,12]);
// let res = arr.concat(10,12);
console.log(arr); // [1, 2, 3, 4]
console.log(res); // [1, 2, 3, 4, 10, 12]
2.join()
- 数组转字符串：
arr.join('连接符') - 返回值：最终的一个字符串
let arr = [1,2,3,4]
let res = arr.join('-');
console.log(arr); // [1, 2, 3, 4]
console.log(res); // 1-2-3-4
3.slice()
- 截取数组：
arr.slice(开始索引，结束索引)- 前（开始索引）包，后（结束索引）不包
- 返回值：截取的数组组成的一个新数组
let arr = [1,2,3,4]
let res = arr.slice(1,3);
console.log(arr); // [1, 2, 3, 4]
console.log(res); // [2, 3]
4.indexOf()
- 数组元素检查（从左往右）：
arr.indexOf(被查询的数据)arr.indexOf(被查询的数据，开始索引)
- 返回值
- 存在，返回数据第一次出现的索引值
- 不存在，返回 -1
let arr = [1,2,3,4]
let res = arr.indexOf(1);
console.log(arr); // [1, 2, 3, 4]
console.log(res); // 0
5.lastIndexOf()
- 从右向左检查数组元素
ES6新增的数组方法
1.forEach()
- 循环遍历，代替了for：
arr.forEach((item, index, arr) => {}) - 返回值：undefined
- item：数组每一项
- index：每一项对应的索引
- arr：原数组
let arr = [1,2,3,4]
let res = arr.forEach(item => {
console.log(item)
})
console.log(arr); // [1, 2, 3, 4]
console.log(res); // undefined
2.map()
- 数组映射：
arr.map((item,index,arr) => {}) - 返回值：一个与原数组长度一样的，被映射成功的新数组
let arr = [1,2,3,4]
let res = arr.map(item => {
return item + 1
})
console.log(arr); // [1, 2, 3, 4]
console.log(res); // [2, 3, 4, 5]
这里会存在一个高频面试题
问题：map与forEach的区别是什么？
回答：看到上面的实例代码，很容易可以看出两者的区别就是，map会返回一个新的、并长度与原数组相同的数组，而forEach不会
3.filter()
- 数组过滤：
arr.filter((item,index,arr) => {}) - 返回值：过滤后满足条件的数据数组，没有则是一个空数组
let arr = [1,2,3,4]
let res = arr.filter(item => {
return item > 1
})
console.log(arr); // [1, 2, 3, 4]
console.log(res); // [2, 3, 4]
4.every()
- 判断所有数组元素是否满足条件：
arr.every((item,index,arr) => {}) - 返回值：布尔值
- 所有数组元素满足条件 => true
- 其中一个不满足条件 => false
let arr = [1,2,3,4]
let res = arr.every(item => {
return item > 1
})
console.log(arr); // [1, 2, 3, 4]
console.log(res); // false
5.some()
- 判断数组中是否有满足条件的元素:
arr.some((item,index,arr) => {}) - 返回值：布尔值
- 存在满足条件的元素 => true
- 不存在满足条件的元素 => false
6.find()
- 获取数组中满足条件的第一个数据：
arr.find((item,index,arr) => {}) - 返回值：存在满足条件的数据，返回；否则返回undefined
let arr = [1,2,3,4]
let res = arr.find(item => {
return item > 2
})
console.log(arr); // [1, 2, 3, 4]
console.log(res); // 3
7.reduce()
- 数组元素累加：
arr.reduce((prev,item,index,arr)=>{},init) - 返回值：累加后的结果
let arr = [1,2,3,4]
let res = arr.reduce((prev, item) => {
return prev + item
})
console.log(arr); // [1, 2, 3, 4]
console.log(res); // 10
