ES6常用的数组方法 reduce/find/filter/some/findIndex/includes

// 数组方法:find() 和 filter() 和some()和 findIndex()  (都不会改变原数组, 但是 filter是纯函数; 纯函数: 1.不改变原数组(没有副作用) ; 2. 返回一个数组)
    // find()   :用于找出 第一个 符合条件的数组成员(不会继续往下执行)。如果没有符合条件的成员，则返回undefined 。
    // filter() :用于找出  所有  符合条件的数组成员的 新数组。如果没有符合条件的成员，则返回 []  即空数组。
    // 使用建议: find的查询效率更高一些，所以在数组的中的数据唯一的话最好使用find;   filter可以结合includes做模糊搜索(大小写要处理下)

    // some()   :检测数组中的元素是否满足指定条件,如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。
    //           注意: some() 不会改变原始数组。some() 不会改变原始数组。
    //             例子 console.log('find--',[].some()) // 报错   

　　    every()  :every相当于逻辑关系中的且，只有所有参数都满足条件时，才返回true，一旦有一个不满足，则逻辑中断，返回false; 

         // every:一假即假, some:一真即真 ; every相当于逻辑关系中的且 some相当于逻辑关系中的或

    // findIndex() 数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置(不会继续往下执行)，如果所有成员都不符合条件，则返回-1。
    let  textList = [
        {id:1,name:'商品1111'},
        {id:2,name:'商品22221111'},
        {id:3,name:'商品3333'},
        {id:3,name:'商品33334534343'}
    ]
    const id = 3
    const prdFind = textList.find(item=>item.id===id)  
    const prdFilter = textList.filter(item=>item.id===id)  
    const prdSome = textList.some(item=>item.id===id)   
    const proFindIndex =  textList.findIndex(item=>item.id===id)
    console.log('find--',prdFind) //  {id:3,name:'商品3333'}
    console.log('filter--',prdFilter) // [{id:3,name:'商品3333'},{id:3,name:'商品33334534343'}]
    console.log('some--',prdSome) // true
    console.log('findIndex--',proFindIndex) // 2  (返回的下标2)

    // 数组和字符串方法
    // includes() : 表示某个数组/字符串 是否包含给定的值
    // indexOf()  : 找到参数值的第一个出现位置，所以要去比较是否不等于-1;  
    //              indexOf() 缺点: 1. 不够语义化,还要比较是否不等于-1。
    //                              2. 它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。
    //                               例如:  [1,'测试',NaN].indexOf(NaN) // -1
    let stringIncludes = 'abcd111'
    console.log(stringIncludes.includes('b'))  // true
    console.log(stringIncludes.includes('b1')) // false

    console.log(stringIncludes.indexOf('b'))  // 1
    console.log(stringIncludes.indexOf('b1')) // -1

    // indexOf的bug!! 检测不到 NaN
    // findIndex 和 includes都能做到 发现NaN
    let listIncludes = [1, 2, NaN]
    console.log(listIncludes.includes('xxxx')) // false
    console.log(listIncludes.includes(NaN)) // true   // includes都能做到 发现NaN
    console.log(listIncludes.indexOf(NaN)) // -1     ----indexOf的bug!!!!!

    console.log( listIncludes.findIndex(y => Object.is(NaN, y)))// 2
    // findIndex方法可以借助Object.is方法做到。
    // Object.is()方法就是useEffect第二个参数的比较方法, useEffect第二个参数不能传 引用类型,否则会死循环 

// 拓展 Object.is(value1, value2) 方法判断两个值是否为同一个值 

// 重点介绍 reduce ;  经常用
    // reduce() 数组方法: 用来计数, 某个变量在数组中出现的次数
    //arr.reduce(callback,[initialValue])  //initialValuec初始值
    //arr.reduce((previousValue,currentValue,index,array))
    // 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    // 2、currentValue （数组中当前被处理的元素）
    // 3、index （当前元素在数组中的索引）
    // 4、array （调用 reduce 的数组）
    const arr222 = [1, 2, 3, 4, 3, 2, 2];

    // reduce案例1. 数组求和
    let firstNum = 100;
    const arrTotal = arr222.reduce((preV,curV)=>preV+curV,firstNum)
    console.log(arrTotal) // 117


    // reduce案例2.某个值出现的次数
    const n = 2;
    const res = arr222.reduce((a, val) => {
        return val === n ? a + 1 : a;
    }, 0); //0初始值, 可以设置很多初始值比如 ''
    console.log("2出现的次数", res);//2出现的次数 3


    //reduce案例3.  拼接字符串
    const arraa = [{
            name: "张三",
            age: 1
        },
        {
            name: "张四",
            age: 2
        }
    ];
    const str = arraa.reduce((s, cur) => {
        return `${s}${cur.name}---${cur.age}`;
    }, ""); //初始值设置''
    console.log(str);//张三---1张四---2