Es6 filter()、map()、find()方法详解

一、简介

a. filter(): 主要用于筛选过滤数组，返回符合筛选条件的数据，不会改变原数组。

b. map():主要用于循环遍历数组，也可以根据某些条件筛选数据，不会改变原数组。

c. find(): 主要用于查找数组的数据，只要查找到一条符合条件的数据，直接返回，不会再继续查找下去。没有找到符合条件的数据返回undefined。
 

二、使用详解

a. filter()方法

let arr1 = [
            {name: 'zhangsan', age: 18, sex: 'male'},
            {name: 'lisi', age: 30, sex: 'male'},
            {name: 'xiaohong', age: 20, sex: 'female'}
        ];

        //filter()方法：主要用于过滤筛选数组，数组filter后，返回的结果为新的数组,不会改变原数组的值
        //filter示例1:返回年龄大于20岁的数据
        let arr2 = arr1.filter(item => item.age > 20);
        console.log(arr2);   // [{name: "lisi", age: 30, sex: "male"}]
        console.log(arr1);   // [{name: 'zhangsan', age: 18, sex: 'male'},{name: 'lisi', age: 30, sex: 'male'},{name: 'xiaohong', age: 20, sex: 'female'}]

        //filter示例2：返回不是男生的数据
        let arr3 = arr1.filter((item) => {
            return item.sex !== 'male';
        });
        console.log(arr3);  // [{name: "xiaohong", age: 20, sex: "female"}]

b. map()方法

 //map()方法主要用于遍历数组,操作数据不会改变原数组
        let arr4 = [
            {name: 'zhangsan', age: 18, sex: 'male'},
            {name: 'lisi', age: 30, sex: 'male'},
            {name: 'xiaohong', age: 20, sex: 'female'}
        ];

        //map示例1：循环遍历数组，返回每个人的年龄+1之后的数据
        let arr5 = arr4.map(item => item.age + 1);
        console.log(arr5);  //[19, 31, 21]
        console.log(arr4);  //[{name: 'zhangsan', age: 18, sex: 'male'},{name: 'lisi', age: 30, sex: 'male'},{name: 'xiaohong', age: 20, sex: 'female'}]

        //map示例2：循环遍历数组,根据某个条件筛选过滤数组
        let arr6 = arr4.map((item) => {
            if (item.age > 20) {
                return item;
            }
        });
        console.log(arr6);  //[undefined,{name: 'lisi', age: 30, sex: 'male'},undefined]

c. find()方法

  //find示例1：查找name='zhangsan'的数据
        let arr8 = arr7.find(item => item.name === 'zhangsan');
        console.log(arr8);  //只返回了第一条数据 {name: "zhangsan", age: 18, sex: "male"}

        let arr9 = arr7.find(item => item.name === 'wangwu');
        console.log(arr9);  //没有找到符合条件的数据，返回undefined

        //注意： 与filter()方法区别 filter会一直查找下去，返回符合name='zhangsan'的全部数据
        let arr10 = arr7.filter(item => item.name === 'zhangsan');
        console.log(arr10); //返回两条数据 [{name: "zhangsan", age: 18, sex: "male"}1: {name: "zhangsan", age: 20, sex: "female"}]