1 // 数组方法:find() 和 filter() 和some()和 findIndex() (都不会改变原数组, 但是 filter是纯函数; 纯函数: 1.不改变原数组(没有副作用) ; 2. 返回一个数组)
2 // find() :用于找出 第一个 符合条件的数组成员(不会继续往下执行)。如果没有符合条件的成员，则返回undefined 。
3 // filter() :用于找出 所有 符合条件的数组成员的 新数组。如果没有符合条件的成员，则返回 [] 即空数组。
4 // 使用建议: find的查询效率更高一些，所以在数组的中的数据唯一的话最好使用find; filter可以结合includes做模糊搜索(大小写要处理下)
5
6 // some() :检测数组中的元素是否满足指定条件,如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。
7 // 注意: some() 不会改变原始数组。some() 不会改变原始数组。
8 // 例子 console.log('find--',[].some()) // 报错
9 every() :every相当于逻辑关系中的且，只有所有参数都满足条件时，才返回true，一旦有一个不满足，则逻辑中断，返回false;
// every:一假即假, some:一真即真 ; every相当于逻辑关系中的且 some相当于逻辑关系中的或
10 // findIndex() 数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置(不会继续往下执行)，如果所有成员都不符合条件，则返回-1。
11 let textList = [
12 {id:1,name:'商品1111'},
13 {id:2,name:'商品22221111'},
14 {id:3,name:'商品3333'},
15 {id:3,name:'商品33334534343'}
16 ]
17 const id = 3
18 const prdFind = textList.find(item=>item.id===id)
19 const prdFilter = textList.filter(item=>item.id===id)
20 const prdSome = textList.some(item=>item.id===id)
21 const proFindIndex = textList.findIndex(item=>item.id===id)
22 console.log('find--',prdFind) // {id:3,name:'商品3333'}
23 console.log('filter--',prdFilter) // [{id:3,name:'商品3333'},{id:3,name:'商品33334534343'}]
24 console.log('some--',prdSome) // true
25 console.log('findIndex--',proFindIndex) // 2 (返回的下标2)
26
27 // 数组和字符串方法
28 // includes() : 表示某个数组/字符串 是否包含给定的值
29 // indexOf() : 找到参数值的第一个出现位置，所以要去比较是否不等于-1;
30 // indexOf() 缺点: 1. 不够语义化,还要比较是否不等于-1。
31 // 2. 它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。
32 // 例如: [1,'测试',NaN].indexOf(NaN) // -1
33 let stringIncludes = 'abcd111'
34 console.log(stringIncludes.includes('b')) // true
35 console.log(stringIncludes.includes('b1')) // false
36
37 console.log(stringIncludes.indexOf('b')) // 1
38 console.log(stringIncludes.indexOf('b1')) // -1
39
40 // indexOf的bug!! 检测不到 NaN
41 // findIndex 和 includes都能做到 发现NaN
42 let listIncludes = [1, 2, NaN]
43 console.log(listIncludes.includes('xxxx')) // false
44 console.log(listIncludes.includes(NaN)) // true // includes都能做到 发现NaN
45 console.log(listIncludes.indexOf(NaN)) // -1 ----indexOf的bug!!!!!
46
47 console.log( listIncludes.findIndex(y => Object.is(NaN, y)))// 2
48 // findIndex方法可以借助Object.is方法做到。
49 // Object.is()方法就是useEffect第二个参数的比较方法, useEffect第二个参数不能传 引用类型,否则会死循环
50 // 拓展 Object.is(value1, value2) 方法判断两个值是否为同一个值
1 // 重点介绍 reduce ; 经常用
2 // reduce() 数组方法: 用来计数, 某个变量在数组中出现的次数
3 //arr.reduce(callback,[initialValue]) //initialValuec初始值
4 //arr.reduce((previousValue,currentValue,index,array))
5 // 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
6 // 2、currentValue （数组中当前被处理的元素）
7 // 3、index （当前元素在数组中的索引）
8 // 4、array （调用 reduce 的数组）
9 const arr222 = [1, 2, 3, 4, 3, 2, 2];
10
11 // reduce案例1. 数组求和
12 let firstNum = 100;
13 const arrTotal = arr222.reduce((preV,curV)=>preV+curV,firstNum)
14 console.log(arrTotal) // 117
15
16
17 // reduce案例2.某个值出现的次数
18 const n = 2;
19 const res = arr222.reduce((a, val) => {
20 return val === n ? a + 1 : a;
21 }, 0); //0初始值, 可以设置很多初始值比如 ''
22 console.log("2出现的次数", res);//2出现的次数 3
23
24
25 //reduce案例3. 拼接字符串
26 const arraa = [{
27 name: "张三",
28 age: 1
29 },
30 {
31 name: "张四",
32 age: 2
33 }
34 ];
35 const str = arraa.reduce((s, cur) => {
36 return `${s}${cur.name}---${cur.age}`;
37 }, ""); //初始值设置''
38 console.log(str);//张三---1张四---2