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

回顾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));

运行结果
写在结尾的话:这五个方法真的超级重要的,特别是小白们一定要掌握呀,加油!

猜你喜欢

转载自blog.csdn.net/qq_39177417/article/details/106567145
今日推荐