ES6方法好用的方法

目录

一、forEach方法遍历数组

二、map方法映射一个新的数组

三、filter方法筛选数组

四、every方法检查数组元素

五、findIndex方法返回数组元素索引

一、forEach方法遍历数组
        forEach就是一个普通的遍历方法

        但其实感觉一些简单的遍历还是用

         for...in 或者 for...of 比较方便

        forEach适合那种比较复杂的遍历，毕竟forEach的功能强大一些

     const arr = ['哈哈','吼吼','嘿嘿']
        arr.forEach((value, index, arr) => {
            console.log(value);
            console.log(index);
            console.log(arr);
        }) 
    //就简单说一下好了
    //value是数组的值
    //index是索引号
    //arr是数组本身
二、map方法映射一个新的数组
        map方法得到的结果是一个新的数组

        他的作用的可以吧一个数组里面特定的元素进行加工 

        然后会把这些元素组成一个新数组，返回出来

        举个例子，取出特定数据

var person = [
            {
                name:'小明',
                age:20
            },
            {
                name:'小红',
                age:25
            },
            {
                name:'小张',
                age:18
            }
        ]
        var name = person.map(v => v.name)//箭头函数的写法
        console.log(name);

        在这里就是把数组里面对象内的name元素都提取出来，组成一个新数组，方便后续使用

        当然，map方法也是可以传三个参数，value, index和array，但是基本用到value就行

        在项目中取数据的时候

        用到上面例子的情况还挺多的

三、filter方法筛选数组
        这个方法和map其实很像

        但是也有很大的区别，就根据字面上的区别

        map是加工，map返回的是加工后的数组，也就是可以改变原数组元素的

        filter是筛选过滤，filter是不能改变原数组元素的，它返回的数组元素只能是从原数组中过滤筛选过的

看一个对比例子

var person = [
            {
                name:'小明',
                age:20,
                checked:true
            },
            {
                name:'小红',
                age:25,
                checked:false
            },
            {
                name:'小张',
                age:18,
                checked:true
            }
        ]
        var checked = person.filter(v => v.checked)
        var checked2 = person.map(v => v.checked)
        console.log(checked);
        console.log(checked2);
 
        就观察二者结果

        filter只是从原数组中筛选出满足checked为true的数组元素

        而map直接吧数组元素进行加工，从对象中再抽离了checked元素组成数组

        总的来说

        区分二者就是区分一个过滤和加工的概念

四、every方法检查数组元素
        every是检查数组元素

        它会对根据检查的条件对数组进行检查

        然后返回布尔值 true or false

        只要其中有一个元素不满足检查条件，就会返回false

        看下面这个例子

        var arr = ['小明','小红','小亮','小王']
        var arr2 = [1,2,3,4,5,6]
 
 
        const confrim = arr.every(v => v === '小明')
        const confrim2 = arr2.every(v => v >= 1)
 
        console.log(confrim); //false
        console.log(confrim2); //true
        confrim由于数组中只有一个小满足条件，其他数组元素都不满足，固然返回false

        而confrim2对的arr2中数组元素都满足>=1的判断条件，故返回true

        同样every方法可以传三个参数，和上面那些方法一样

        额外提示一点，就是如果是用一个空数组来使用every方法，会直接返回true

五、findIndex方法返回数组元素索引
        findIndex的使用和every方法有点相同之处

        都是根据一个判断条件来检查数组元素

        不同的是every方法只是判断数组元素是不是都满足这个条件

        而fndIndex方法会返回满足条件的第一个数组元素的索引号（注意是返回第一个）

例如

var arr = [1,2,3,4,5]
        
        const res = arr.findIndex(v => v >= 1)
        const res2 = arr.every(v => v >= 1)
 
        console.log(res); //返回索引0
        console.log(res2); //返回true
        由此例子结果可以很清晰的看到二者的区别

        以及findIndex的作用

        同样，findIndex方法可以传三个参数

        有的时候会怕数组中有几个相同的元素，会使用findIndex方法返回第一个的索引号