数组的所有常用存取方法

相信很多朋友在从一个嵌套多层的数组对象中取出自己想要的对象或者数组，对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比较合适；

场景：比如在做下拉列表时，你需要展示所有用户昵称供选择，后端给你的是一个包含当前用户的数组，你可以使用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}]

总结：当需要从一个数组中筛选出符合你条件的值，可以用filter

场景：做筛选功能时候，想要筛选出到了一定金额的订单，到了一定条件的用户，这时候用filter可以完美的取出你想要的数据

forEach：

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

但是要注意：

会改变原数组：直接在原数组上操作
没有返回值，他的动作直接加在了原数组是
不能被终止，在中间不能操作，是一个遍历操作

可以传入一个thisArg参数，如果没有传入，默认为window，箭头函数不生效

例子1：

   var arr1 = [1, 2, 3];
   var arr2 = [7, 8, 9];
   arr1.forEach((v, i, t) => {
     console.log(this);
     //这里是window,会被打印三次，因为arr里有三个项，
     //t是数组本身,I是索引,v是當前項
     t[i] = v * 2;
    }, arr2);
    console.log(arr1);//[2,4,6]

例子2：

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]

例子3：

var arr1 = [1, 2, 3]
arr1.forEach(function(v, i, arr) {
 if(arr[i]>=2){
      arr[i] = v * 2
    }
})
console.log(arr1)
//  [1, 4, 6]

小结：这里是操作数组中符合条件的那个项

总结：forEach其实就是遍历操作，遍历没一个项出来，然后又三个参数，分别是数组本身，当前索引，当前项，其中有几个项，里面就会循环几次，利用这个，可以对原数组做出相应的操作

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 排版

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