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

迪丽瓦拉

2024-05-28 16:52:59

0次

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

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

一、Array.map()
二、Array.filter
三、Array.reduce
四、Array.forEach
五、Array.find
六、Array.every
七、Array.some
总结

一、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

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