前端常用并且需要掌握的方法之forEach(),map(),filter(),some(),every(),find()比较和详解

回顾forEach(),map(),filter(),some(),every()等方法的使用，在vue和之后的react以及小程序阶段这些方法都是死了都要记的!!很重要

将这五个方法分为3类来记忆

一、forEach() 遍历数组 返回数组的每一项和索引
(相当于for循环遍历数组的每一项) 可以返回数组中的每一项和索引
用法：数组.forEach(function（item,index）{})

let arr = [1, 2, 3]
arr.forEach(function (item, index) {
    console.log('索引是:' + index + ',项是:' + item)
})

简写方式（后面的都会使用箭头函数简写方式来进行演示）：

arr.forEach((item, index) => console.log('索引是:' + index + ',项是:' + item))

二、filter()过滤和map() 返回新数组
遍历+过滤和遍历+映射，都有返回值，返回值是新数组。都有forEach遍历的功能–>可以返回数组的每一项和索引
1、用法：数组.filter((item,index)=>{})

//过滤出值不为2
let newArr = arr.filter(item => item !== 2)
console.log('新数组:' + newArr + ',原数组:' + arr)

2、用法：数组.map() map映射是1对1的关系，映射出的新数组长度和原数组的一样

//让原数组的每一项都拼接上字符串
let newArr1 = arr.map(item => item + '映射出的新项')
console.log('新数组：' + newArr1 + ';旧数组：' + arr)

三、some()和every() 返回布尔值
1、some()判断数组中是否有存在（大于等于1个成立）符合条件的，至少有一个时就会返回true
用法：数组.some()

let arr = [1,2,3]
//判断该数组中是否有一项的值为2
 console.log(arr.some(item => item === 2))

2、every()判断数组中的所有是否都符合条件，有一个不符合就返回false
用法：数组.every()

//判断该数组中的每一项是否都为2
console.log(arr.every(item => item === 2));

四、find() 返回数组中符合条件的那一项
find就是找到某一项，找到某一项符合要求的

 let data = [
    { id: 1, name: 'haha' },
    { id: 2, name: 'hehe' },
]
let res = data.find(v => v.id == 1)
 console.log(res)

在这个示例中我的每一项是对象，所以返回的结果是对象：

所以只要记得是find方法是返回数组中的某一项即可！！

写在结尾的话：这五个方法真的超级重要的，特别是小白们一定要掌握呀，加油！