javascript，如何理解数组遍历相关的find/filter/map函数？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文接着描述js数组的遍历相关函数，在前面的文章里面，已经描述过了.find()。本篇文章里面引入了另外两个类似的函数，.filter()和.map()。那么，这三个函数都有哪些区别呢？这就是本文要讨论的主要内容。

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文描述JavaScript数组遍历相关的三个函数，分别是.find()、.filter()和.map()。测试环境：node@16.14.2。

测试用例

这里先定义个数组，后续的内容就是对这个数组进行遍历。

var data = [
    { id: 0, name: "苏南" },
    { id: 1, name: "sunan大叔" },
    { id: 2, name: "苏南大叔" },
];

.find()检测是否存在某数据

.find()可以筛选出符合特征的第一条数据，没有找到的话，返回undefined。

var result0 = data.find(item => item.id >= 1);
var result1 = data.find(item => {
    return item.id >= 1
});
console.log(result0, result1);                 // { id: 1, name: 'sunan大叔' } 
var result2 = data.find(item => item.id >= 10);
console.log(result2);                          // undefined

参考文章：

• https://newsn.net/say/js-arr-find.html

.filter()查找出所有数据

.filter()可以筛选出符合特征的所有数据，没有找到的话，返回空数组[]。

var result3 = data.filter(item => item.id !== 1);
var result4 = data.filter(item => {
    return item.id !== 1;
});
console.log(result3, result4);         // [ { id: 0, name: '苏南' }, { id: 2, name: '苏南大叔' } ]
var result5 = data.filter(item => item.id >= 10);
console.log(result5);                  // []

.map()遍历所有的数据

.map()遍历所有的数据，没有“没找到”的情况。除非遍历主体是个空数组，那么，返回值还是个空数组。

var data = [
    { id: 0, name: "苏南" },
    { id: 1, name: "sunan大叔" },
    { id: 2, name: "苏南大叔" },
];
var result6 = data.map(item => item.id === 1 ? "等于1" : "不等于1");
var result7 = data.map(item => {
    return item.id === 1 ? "等于1" : "不等于1";
});
console.log(result6, result7);
// [ '不等于1', '等于1', '不等于1' ] [ '不等于1', '等于1', '不等于1' ]
var result8 = [].map(item => {
    return item.id === 1 ? "等于1" : "不等于1";
});
console.log(result8);    // []

reduce遍历数据

let arr = [0, 1, 2, 3]
arr.reduce(function (previousValue, currentValue) {
    console.log(currentValue);
},arr[0]);

虽然.reduce的正确使用方式并不是这样的，但是客观确实可以达到遍历变量的目的。reduce的具体用法，待后续文章讨论。

相关文章

• https://newsn.net/say/js-arr-find.html
• https://newsn.net/say/js-localecompare.html
• https://newsn.net/say/js-inarray.html
• https://newsn.net/say/js-arr-shift.html

总结

没啥可总结的，发个链接吧。

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。