最简单的 map,filter,forEach,every,some 的使用教学

coolFish(呔呆)

关注

发布于: 2021 年 02 月 01 日

数组的所有常用存取方法

相信很多朋友在从一个嵌套多层的数组对象中取出自己想要的对象或者数组，对 Js 里提供的众多迭代方法感到困惑，「every,filter,forEach,map,some」这五种方法，一眼看过去，都是迭代的方法，好像都差不多，那究竟用哪一个的，分别在什么场景最适宜呢，这就是今天我们要讲的东西，希望这篇文章可以帮助大家了解这些方法的应用场景

首先我们想看下他们的文字描述：

map:

这是官方的介绍: 就是讲原数组映射成新数组，其次 map 有返回值，
很多朋友就要骂了，看的懂还需要你这废话，其实很好理解，通俗的讲: 就是 map 可以将一个数组用类示拷贝的方法，拷贝出一个新的数组，但是在 map 里有返回值，这个返回值可以添加你想要的操作，你可以让他返回出你想要的原数组中某一个特定的属性
比如一个数组中有多个对象，每个对象都有自己的各种属性，现在我想把他们所有的 name 属性提取出来，这时候，就可以用到 map，

let arr1 = [{                id: 1,                name: "a1",            },            {                id: 2,                name: "a2",            },            {                id: 3,                name: "a3",            },        ];        let newArr = arr1.map((item) => {         //这里的item,就是数组中的每一个对象            return item.id;            //这里是返回所有对象中的id属性，并且放到一个新的数组中        });        console.log(newArr);// [1,2,3]

复制代码

场景：比如在做下拉列表时，你需要展示所有用户昵称供选择，后端给你的是一个包含当前用户的数组，你可以使用 map 将这个数组中所有想要的属性拿出来做渲染；

filter:

官方解释：对数组中的每个元素都执行一次指定的函数（callback），并且创建一个新的数组，该数组元素是所有回调函数执行时返回值为 true 的原数组元素。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略，同时，新创建的数组也不会包含这些元素。
通俗的说：就是会对数组中的每一个元素都执行一次你定义的函数，符合你定义函数条件的元素，会被放进一个新创建的数组里，总结就是：获取符合你条件的所有元素，
例子 2：从扁平数组中筛选出符合条件的值

var filtered = [12, 5, 8, 130, 44];        let max = filtered.filter((r) => {            //这里的r都是数组中的每一项            return r >= 40;        });        console.log(max);  // [130,44],这里返回的符合条件的值，看排序可知是顺序检索

复制代码

例子 3 ：数组里有多个对象，筛选出某个指定条件符合的整个对象，

let longFiltered = [{            name: 1,            id: 1,        }, {            name: 2,            id: 1,        }, {            name: 3,            id: 1,        }, ];        let longResult = longFiltered.filter((r) => {            //这里r是数组中的每一项，也就是对象            return r.name > 1;            //这里是返回这个对象里name属性符合条件的对象        });        console.log(longResult);//最后结果是[{name:2,id:1},{name:3,id:1}]

复制代码

forEach：

遍历循环数组的每一项，把每一项都拿出来
通俗的讲：就是摆列出数组中的每一项数据，

但是要注意：

会改变原数组：直接在原数组上操作
没有返回值，他的动作直接加在了原数组是
不能被终止，在中间不能操作，是一个遍历操作
可以传入一个 thisArg 参数，如果没有传入，默认为 window，箭头函数不生效

var arr1 = [1, 2, 3]var arr2 = [7, 8, 9]
arr1.forEach(function(v, i, arr) {  console.log(this)    //这里没有失效，所以this绑定的是arr2的  arr[i] = v * 2}, arr2)
console.log(arr1)// (3) [7, 8, 9]// (3) [7, 8, 9]// (3) [7, 8, 9]// (3) [2, 4, 6]

复制代码

every：

对数组中的每个元素都执行一次指定的函数（callback），直到此函数返回 false，every 将返回 false，如果回调函数对每个元素执行后都返回 true ，every 将返回 true。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略

var arr1 = [1, 2, 3];var arr2 = [7, 8, 9];例子1：let arr3 = arr1.every((r) => {    console.log(r); //1    return r > 2;    });    console.log(arr3); //false例子2：let arr4 = arr2.every((r) => {    console.log(r); //7,8,9    return r > 6;});    console.log(arr4); //true

复制代码

总结：every 就是将数组中所有的数都拿出来进入函数，有一个不满足，就退出，并且返回 false，如果全部满足，返回 true

some:

通俗来说就是 every 的补齐选项，只要有一个满足，就立刻返回，返回 true

总结：

首先看两个直接性判断的，some 和 every，当需要判断一个数组中，是否所有数据都符合条件，用 every，是否有符合的数据用 some，

接着来看 forEach,在你需要对一个数组中，操作特定条件的项时，使用 forEach 遍历，然后用条件操作符合你条件的值，最后达成最终数组的改变

最后看两个难点，map 和 filter,可以这么想，map 是取出符合条件的值，filter 是返回具有符合条件的值的那一个项，map 更倾向于提取值，filter 更多的是返回条件的那一个项

本文使用 mdnice 排版

发布于: 2021 年 02 月 01 日阅读数: 15

原文链接:【http://xie.infoq.cn/article/59cdec6f1f1bba0a05ff24771】。文章转载请联系作者。

coolFish(呔呆)

关注

还未添加个人签名 2020.12.07 加入

还未添加个人简介

发布

暂无评论

创作场景

最简单的 map,filter,forEach,every,some 的使用教学

数组的所有常用存取方法

首先我们想看下他们的文字描述：

map:

filter:

forEach：

every：

some:

总结：

coolFish(呔呆)

评论