ES6 map、filter、find、findIndex 讲解

新项目用的是react 用到了好多es6的语法，之前看过一遍阮一峰老师的 es6入门，最近发现好多地方理解的不是很深刻，所以又来了一遍，顺便对几个很实用的方法做一下总结
首先声明，这篇文章是转载的： 原文链接 => https://www.cnblogs.com/studyshufei/p/7910384.html
博主写的很好，就搞过来了，留着以后复习用！

map方法：可以简单的理解为映射

var arr=[1,2,3,4];
console.log( arr.map((n)=>n*n) );//[1, 4, 9, 16]
console.log( arr.map((n)=>n-1) );//[0, 1, 2, 3]

从数组[1，4，-5，10]当中给我找出小于0的数字。在你看到这里的时候相信你也是对箭头函数了解，(n)=>n*n 就不用赘述了。

filter方法：

var users = [
  {name: "张含韵", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];
//获取所有人的email
var emails=users.map(user=>user.email) 
console.log(emails.join(',')) //"zhang@email.com", "jiang@email.com", "li@email.com"
//获取指定人的email
var liEmail=emails.filter(email=>/^li/.test(email))
console.log(liEmail.join('')) //li@email.com

获取用户列表里的所有用户的email，map帮我们做到了，map方法通过传一个形参，这个形参就代表users里的每一项，map内部通过遍历所有的用户项，获取到每个用户项的email，再push到一个数组，再作为值给我们返回。第二步，我们需要获取指定人的email，filter方法登场了，通过过滤筛选email是数组，给我们返回结果，筛选方法得我们定，这里筛选方法是以正则匹配到li开头的那一个email，然后返回。

find方法：

[1, 4, -5, 10].find((n) => n < 0)    // -5

find方法比较好理解，这里的参数n代表数组里的每一项，然后find方法内部通过遍历数组里的每一项，找到＜0的这一项( - 5 )。

findIndex方法：find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。看一个例子：

[1, 4, -5, 10].findIndex((value,index,arr) => value < 0)  // 2

在这个例子当中，value代表这个数组的每一项，1，4，-5，10。index代表每一项的索引值，arr代表这个数组[1, 4, -5, 10]，然后我们需要返回的是＜0的这一项的索引值，即是2了。

这4个方法内部机制都有一个遍历过程，比起forEach确实简洁多了。

接着补充ES6-some( ) 和 every( )方法的讲解:

    //every()
    let numbers = [2, 4, 10, 4, 8];
    let a = numbers.every((item,index)=>{
        if(item%2===0){
            return true;
        }else{
            return false;
        }
    });
    console.log(a)

    //some()
    let b=numbers.some((item,index)=>{
         if(item%3===0){
            return true;
        }else{
            return false;
        }
    })
    console.log(b)

some 英语翻译为一些,every翻译为所有,每个，所以some方法 只要其中一个为true 就会返回true的，相反，every（）方法必须所有都返回true才会返回true，哪怕有一个false，就会返回false；every（）和 some（）目的：确定数组的所有成员是否满足指定的测试。具体请参考MDNhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

总结一下：

后续补充：最近看很多小伙伴都在学习ES6，比如ES6中的map，在ES5中是怎么实现的呢？

/*
 * MAP对象，实现MAP功能
 *
 * 接口：
 * size()                     获取MAP元素个数
 * isEmpty()                  判断MAP是否为空
 * clear()                    删除MAP所有元素
 * put(key, value)            向MAP中增加元素（key, value) 
 * remove(key)                删除指定KEY的元素，成功返回True，失败返回False
 * get(key)                   获取指定KEY的元素值VALUE，失败返回NULL
 * element(index)             获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL
 * containsKey(key)           判断MAP中是否含有指定KEY的元素
 * containsValue(value)       判断MAP中是否含有指定VALUE的元素
 * values()                   获取MAP中所有VALUE的数组（ARRAY）
 * keys()                     获取MAP中所有KEY的数组（ARRAY）
 *
 * 例子：
 * var map = new Map();
 *
 * map.put("key", "value");
 * var val = map.get("key")
 * ……
 *
 */
function Map() {
    this.elements = new Array();

    //获取MAP元素个数
    this.size = function() {
        return this.elements.length;
    };

    //判断MAP是否为空
    this.isEmpty = function() {
        return (this.elements.length < 1);
    };

    //删除MAP所有元素
    this.clear = function() {
        this.elements = new Array();
    };

    //向MAP中增加元素（key, value) 
    this.put = function(_key, _value) {
        this.elements.push( {
            key : _key,
            value : _value
        });
    };

    //删除指定KEY的元素，成功返回True，失败返回False
    this.removeByKey = function(_key) {
        var bln = false;
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].key == _key) {
                    this.elements.splice(i, 1);
                    return true;
                }
            }
        } catch (e) {
            bln = false;
        }
        return bln;
    };
    //删除指定KEY的所有元素
    this.removeAllByKey=function(_key){
        for (var i = this.elements.length - 1; i >= 0; i--) {
            if (this.elements[i].key == _key) {
                this.elements.splice(i, 1);
            }
        }
    }

    //删除指定VALUE的元素，成功返回True，失败返回False
    this.removeByValue = function(_value) {//removeByValueAndKey
        var bln = false;
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].value == _value) {
                    this.elements.splice(i, 1);
                    return true;
                }
            }
        } catch (e) {
            bln = false;
        }
        return bln;
    };

    //删除指定VALUE的元素，成功返回True，失败返回False
    this.removeByValueAndKey = function(_key,_value) {
        var bln = false;
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].value == _value && this.elements[i].key == _key) {
                    this.elements.splice(i, 1);
                    return true;
                }
            }
        } catch (e) {
            bln = false;
        }
        return bln;
    };

    //获取指定KEY的所有元素值VALUE，以数组形式返回,失败返回false
    this.get = function(_key) {
        var arr=[];
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].key == _key) {
                    arr.push(this.elements[i].value)
                }
            }
            return arr;
        } catch (e) {
            return false;
        }
        return false;
    };

    //获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL
    this.element = function(_index) {
        if (_index < 0 || _index >= this.elements.length) {
            return null;
        }
        return this.elements[_index];
    };

    //判断MAP中是否含有指定KEY的元素
    this.containsKey = function(_key) {
        var bln = false;
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].key == _key) {
                    bln = true;
                }
            }
        } catch (e) {
            bln = false;
        }
        return bln;
    };

    //判断MAP中是否含有指定VALUE的元素
    this.containsValue = function(_value) {
        var bln = false;
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].value == _value) {
                    bln = true;
                }
            }
        } catch (e) {
            bln = false;
        }
        return bln;
    };

    //判断MAP中是否含有指定key,VALUE的元素
    this.containsObj = function(_key,_value) {
        var bln = false;
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].value == _value && this.elements[i].key == _key) {
                    bln = true;
                }
            }
        } catch (e) {
            bln = false;
        }
        return bln;
    };

    //获取MAP中所有VALUE的数组（ARRAY）
    this.values = function() {
        var arr = new Array();
        for (i = 0; i < this.elements.length; i++) {
            arr.push(this.elements[i].value);
        }
        return arr;
    };
    //获取MAP中所有指定VALUE的元素数组（ARRAY）
    this.getAllByValue=function(_value){
        var arr=[];
        for (var i = this.elements.length - 1; i >= 0; i--) {
            if (this.elements[i].value == _value) {
                arr.push(this.elements[i]);
            }
        }
        return arr;   
    }

    //获取MAP中指定key的所有VALUE的数组（ARRAY）
    this.valuesByKey = function(_key) {
        var arr = new Array();
        for (i = 0; i < this.elements.length; i++) {
            if (this.elements[i].key == _key) {
                arr.push(this.elements[i].value);
            }
        }
        return arr;
    };

    //获取MAP中所有KEY的数组（ARRAY）
    this.keys = function() {
        var arr = new Array();
        for (i = 0; i < this.elements.length; i++) {
            arr.push(this.elements[i].key);
        }
        return arr;
    };

    //获取key通过value
    this.keysByValue = function(_value) {
        var arr = new Array();
        for (i = 0; i < this.elements.length; i++) {
            if(_value == this.elements[i].value){
                arr.push(this.elements[i].key);
            }
        }
        return arr;
    };

    //获取MAP中所有KEY的数组（ARRAY）key有相同的 取出的key为去重后的 数组里去重后的key的数组
    this.keysRemoveDuplicate = function() {
        var arr = new Array();
        for (i = 0; i < this.elements.length; i++) {
            var flag = true;
            for(var j=0;j<arr.length;j++){
                if(arr[j] == this.elements[i].key){
                    flag = false;
                    break;
                } 
            }
            if(flag){
                arr.push(this.elements[i].key);
            }
        }
        return arr;
    };
}

如果你需要兼容IE，用这个ES5写的map应该没有问题，明白了ES5怎么实现ES6中的map，自然也就懂了，后续货继续更新ES6其他知识点，虽然我也很菜，如发现有BUG的小伙伴，一定记得给我留言，万分感激。

后续补充:

传统写法和ES6写法对比:

var users = [
  {name: "张含韵", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];

function valuesByKey(_key) {
  //定义个空数组
  var arr = [];
  //循环遍历users数组
  for (i = 0; i < users.length; i++) {
    //只要是key值等于_key的,对应的值都push进arr
    arr.push(users[i][_key]);
  }
  //返回arr
  return arr;
}

var arr=users.map((user)=>user.name);
console.log(arr)//["张含韵", "江一燕", "李小璐"]
console.log(valuesByKey('name')) //["张含韵", "江一燕", "李小璐"]