7个常用的原生JS数组方法

---

一、Array.map()

作用： 循环遍历数组并修改，在原数组基础上返回一个新的修改版本，原数组不变。

代码：

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}];

let resArr = arr.map(item => {
	return `大家好，我是${item.name}，我今年${item.age}岁了`
})

console.log(resArr);

场景： 想要修改现有数组的内容并将结果存储为新变量时。

二、Array.filter()

作用： 根据特定条件循环遍历数组，检查数组的每个项目是否符合条件，如果符合，则将其返回到新数组中，原数组不变。

代码：

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}];

let resArr = arr.filter(item => {
	return item.age <= 18;
})

console.log(resArr);

场景： 想要从数组中删除不符合特定条件的项目时。

三、Array.reduce()

作用： 接收一个函数作为 累加器 ，数组中的每个值（从左到右）开始缩减，最终返回一个值，原数组不变。

语法： arr.reduce(callback, initialValue)

参数：

• callback ：回调函数，包含如下四个参数；
• previousValue： 上一次调用回调返回的值，或者是提供的初始值 initialValue；
• currentValue ：数组中当前被处理的元素；
• index ：当前元素在数组中的索引；
• array ：调用 reduce 的数组；
• initialValue ：第一次调用 callback 的第一个参数。

示例1：数组求和

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sum = arr.reduce((prev, cur) => {
	// 第一次： prev = 0
	// 后面：prev 上一次callback的返回值，如 0+1 ，1+2等...
	return prev + cur;
}, 0);
console.log(sum);

示例2：展平数组，将二维数组转化为一维

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

示例3：展平数组，将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]];

// 递归思想去判断cur是否为数组
const flat = function (arr) {
	return arr.reduce((prev, cur) => prev.concat(Array.isArray(cur) ? flat(cur) : cur), [])
}

console.log(flat(arr));

场景： 想要改变数组的值将数组转换为单个值时，或将多维数组转化为一维数组。

四、Array.forEach()

作用： 遍历一个数组并在每个项目上执行一个函数，非常类似于常规 for 循环，是一个经典的方法。

代码：

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}];

arr.forEach(item => {
	console.log(`我是${item.name}`);
})

场景： 只想遍历任何数组的每个项目而无需构造新数组时。

五、Array.find()

作用： 与 .filter() 很类似，可以传入数组符合条件的判断，但是 仅返回与提供条件匹配的第一个元素。

代码：

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}]; 

let resItem = arr.find(item => {
	return item.age <= 18
})

console.log(resItem);

场景： 当需要获取通过显式定义的测试的数组的第一项时。

六、Array.every()

作用： 检查数组中的每个元素是否通过提供的条件，如果数组中的所有元素都符合条件，则该方法将返回 true；如果有一项不符合，则返回 false。

代码：

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}]; 

let flag1 = arr.every(item => {
	return item.age < 19;
})

let flag2 = arr.every(item => {
	return item.age < 20;
})

console.log(flag1);  // false:有一项不符合
console.log(flag2);  // true: 全部符合

场景： 想要确认数组的每个项目是否都通过显式定义的条件时。

七、Array.some()

作用： 与方法.every()类似，但是不需要数组中的所有元素都通过测试，找到成功的数组元素，即停止并返回 true，否则返回 false。

代码：

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}]; 

let flag = arr.some(item => {
	return item.age < 19;
})

console.log(flag);  // true

场景： 想要确认数组中是否有存在某个项目可以通过显式定义的条件时。

---

总结

JavaScript 给我们提供了很多处理数组的不同方法。使用这些方法，可以代替 for 循环，将JS开发技能升级，并使代码库更具可维护性。