> 文章列表 > find、filter、findIndex、indexOf、map、forEach、reduce区分

find、filter、findIndex、indexOf、map、forEach、reduce区分

find、filter、findIndex、indexOf、map、forEach、reduce区分

1、find()

find返回的是 对象
只能使用数组,不能用于字符串

find()方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

let result=[1, 2, 5, -1, 9].find((n) => n < 0)
//找出数组中第一个小于 0 的成员
//result= -1
let result=[{name:"111"},{name:"222"},{name:"333"},{name:"444"}].find((n) => n.name ==='111')
result={name: '111'}

2、filter返回的是数组

只能使用数组,不能用于字符串

let result=[1, 2, 5, -1, 9].filter((n) => n < 0)
//找出数组中第一个小于 0 的成员
//result= [-1]
let result=[{name:"111"},{name:"222"},{name:"333"},{name:"444"}].filter((n) => n.name ==='111')
result=[{name: '111'}]

3、findIndex

只能使用数组,不能用于字符串
findIndex()方法的用法与find()方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

 let result= [1, 2, 5, -1, 9].findIndex((n) => n < 0)
//返回符合条件的值的位置(索引)
//result= 3

4、indexOf

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置;
如果没有找到匹配的字符串则返回 -1。
它有两个参数:
searchElement 要查找的元素
fromIndex 非必填
开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.

var str="Hello world, welcome to the universe.";
var result=str.indexOf("welcome");
// result=13
var str="Hello world, welcome to the universe.";
var result1=str.indexOf("welcome",14);
// result=-1
let arr1 = ['a', 'b', 'c']
const r1 = arr1.indexOf('a')
console.log(r1) // 0
const r2 = arr1.indexOf('a', 1)
console.log(r2) // -1
const r3 = arr1.indexOf('a', -1)
console.log(r3) // -1

5、map

map 就是你手里拿了一个空盒子(一个新的数组),叫他们按顺序一个个把自己的钱包放到你手中的空盒子里,结束的时候,你的盒子里面都是大家的钱包,钱包的顺序和人的顺序一一对应

let emptyBox = [{name:"111"},{name:"222"},{name:"333"},{name:"444"}].map(dude =>{return dude.name
})
//emptyBox = ['111', '222', '333', '444']

map本身不会改变原数组任何属性
数组元素为基本类型,原数组绝对不会改变。
但若是原数组元素为引用类型, 且在map中手动操作, 此时会改变原数组,但这与map方法本身无关,map方法不会改变原数组,这属于强行访问到对象内部进行重新赋值

数组元素为基本类型

// 例数组 item 为 基本类型
const arr = [11, 22, 'ss'];
const result = arr.map(item=>{item = '变'return item;
});
console.log(result ) // ['变', '变', '变']
console.log(arr)  // [1, 2, 's']

数组元素为引用类型

const arr = [ {name:'张三'},{name:'李四'},{name:'wangwu'}];
const resultArr = arr.map(item=>{item.age = 15;return item;
})
console.log(resultArr) 
// [ {name:'张三', age:15},{name:'lisi', age:15},{name:'wangwu', age:15}]
console.log(arr);
// [ {name:'张三', age:15},{name:'lisi', age:15}, {name:'wangwu',age:15}]

6、forEach

forEach()方法用于遍历数组的每个元素,将元素传给回调函数。
注意:forEach()对于空数组是不会调用回调函数的。
array.forEach(function(currentValue, index, arr), thisValue)
//参数:当前元素、当前元素的索引、当前元素所属的数组

people.forEach(function (dude) {
dude.do();
});

7、reduce

reduce 就是你拿着钱包,一个个去数看看里面有多少钱,每检查一个,就和前面的总和加起来,这样结束的时候,你就知道知道大家总共有多少钱了

let totalMoney = emptyBox.reduce ((countedMoney, wallet)=>{return countedMoney + wallet
},0)

reduce的简单用法

当然最简单的就是我们常用的数组求和,求乘积了。

var arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和,10
console.log( mul ); //求乘积,24

reduce的高级用法

1、 计算数组中每个元素出现的次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{if(cur in pre){pre[cur]++}else{pre[cur] = 1 }return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

2、 数组去重

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{if(!pre.includes(cur)){return pre.concat(cur)}else{return pre}
},[])
console.log(newArr);// [1, 2, 3, 4]

3、将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

4、将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

5、对象里的属性求和

var result = [{subject: '数学',score: 10},{subject: '语文',score: 40},{subject: '英语',score: 60}
];var sum = result.reduce(function(prev, cur) {return cur.score + prev;
}, 0);
console.log(sum) //110

总结

相同点:

会循环遍历数组中的每一项;
map()、forEach()和filter()方法里每次执行匿名函数都支持3个参数,参数分别是:当前元素、当前元素的索引、当前元素所属的数组;
匿名函数中的this都是指向window。

不同点:

map()速度比forEach()快;
map()和filter()会返回一个新数组,不对原数组产生影响;forEach()不会产生新数组,返回undefined;reduce()函数是把数组缩减为一个值(比如求和、求积);
map()里可以用return,而forEach()里用return不起作用,forEach()不能用break,会直接报错;
reduce()有4个参数,第一个参数为初始值。