javascript数组 forEach,filter,some,every,map,find,reduce的用法与区别

forEach等同于for循环

循环遍历数组中的每个元素,并将元素传递给回调方法。

javascript 复制代码
let arr = [1,2,3,4,5]

let a = arr.forEach((val,index)=>{
    arr[index] +=1
    return index
})
console.log(a)   //undefined
console.log(arr)  // [2, 3, 4, 5, 6]

map

主要功能是可以将一个数组中的元素转换为另外一种数据格式,并返回一个新的数组,也就是投影操作。

javascript 复制代码
let arr = [1,2,3,4,5]

let arr1 = arr.map((val,index)=>{
    return arr[index] + 1
})
console.log(arr)   //[1,2,3,4,5]
console.log(arr1)  //[2, 3, 4, 5, 6]
  • map与forEach的区别就是,forEach没有返回值,即使return,它的返回值也只会是undefined;
  • map的所有返回值会组成一个新的数组

find、findIndex、indexOf

find():主要功能用于查找符合指定条件的第一个数组元素,并返回该元素。如果没有找到匹配的元素,则返回undefined。注意这里返回的是一个元素对象,filter()返回的是数组。

javascript 复制代码
let arr = [1,2,3,4,5]

let find1 = arr.find((val,index)=>{
    return val>1
})
console.log(find1)  // 2

//find()
const numbers = [1, 3, 5, 7, 9];
const result = numbers.find(num => num > 6);
console.log(result); // 返回符合条件的值:7
 
//findIndex()
const numbers = [1, 3, 5, 7, 9];
const result = numbers.findIndex(num => num > 6);
console.log(result); // 返回符合条件值的索引:3
 
//indexOf()
const numbers = [1, 3, 5, 7, 9];
const result = numbers.indexOf(7);
console.log(result); // 返回某一特定值所在数组里面的索引:3
  • 相同:find与some 的用法类似,都是在数组中查找符合条件的值,且当找到符合的值便会停止往后遍历。
  • 区别:some返回的值是布尔型,而find返回的是具体的值。

filter

主要的功能是根据一定条件过滤数组数据。具体实现,将数组中的每个元素传递给一个回调函数,经过设定的逻辑处理返回一个布尔值,过滤相关的元素。最终返回一个新的数组。注意的是该方法不会对空数组进行检测、不会改变原始数组

javascript 复制代码
let arr = [1,2,3,4,5]

let filter1 = arr.filter((val,index)=>{
    return val>1
})
console.log(filter1)   //[2,3,4,5]

every

判断数组中所有元素是否满足条件,满足则返回true。

javascript 复制代码
let arr = [1,2,3,4,5]

let every1 = arr.every((val,index)=>{
    return val>0
})
console.log(every1)   //true

let every2 = arr.every((val,index)=>{
    return val>1
})
console.log(every2)    //false

some

判断数组中是否有元素满足条件,只要有一条满足则返回true。

javascript 复制代码
let arr = [1,2,3,4,5]

let some1 = arr.some((val,index)=>{
    return val==1
})
console.log(some1)  //true

let some2 = arr.some((val,index)=>{
    return val==6
})
console.log(some2)  //false

reduce

若数组元素为数字,则会求数组中所有元素的总和;若数组元素为字符,则会将所有字符拼合在一起

javascript 复制代码
let arr = [1,2,3,4,5]
let arrString = ["one","two","three","four","five"]
let sum1 = arr.reduce((item,val)=>{
    return item+val
})
let sum2 = arrString.reduce((item,val)=>{
    return item+val
})
console.log(sum1)  //15
console.log(sum2)  //onetwothreefourfive

for in 、for of

for in(ES1)

for in和for循环方式历史悠久,从ECMAScript 1就被支持。

for in 用来循环数组不是一个合适的选择。迭代的是属性key,不是值。
由于属性 key 是字符串,迭代出的元素索引是 string,不是 number,不能直接进行运算,如下

javascript 复制代码
var arr = [1,2,3]
    
for (let index in arr) {
  let res = index + 1
  console.log(res)
}
//01 11 21
for of(ES6)

再来说说ES6 中的 for of

for of遍历的是数组元素值,而且for of遍历的只是数组内的元素,不包括原型属性和索引

javascript 复制代码
var arr = [1,2,3]
arr.a = 123
Array.prototype.a = 123
    
for (let value of arr) {
  console.log(value)
}
//1 2 3

for of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象(iterator)的集合 ,但是不能遍历对象,因为没有迭代器对象。

但如果想遍历对象的属性,你可以用for in循环(这也是它的本职工作)或用内建的Object.keys()方法

javascript 复制代码
var myObject={
  a:1,
  b:2,
  c:3
}
for (var key of Object.keys(myObject)) {
  console.log(key + ": " + myObject[key]);
}
//a:1 b:2 c:3
相关推荐
_upupup10 分钟前
智能指针的原理及简单模拟实现(C++)
开发语言·c++
想吃火锅100513 分钟前
【leetcode】238.除了自身以外数组的乘积js
javascript·算法·leetcode
en.en..18 分钟前
C语言---宏
c语言·开发语言
郝学胜-神的一滴26 分钟前
C++ Templates 01:拨开迷雾,读懂C++模板经典著作
开发语言·c++·程序人生·游戏·游戏引擎·软件构建
言乐61 小时前
Python实现关税自动计算模型
开发语言·python·django·virtualenv·pygame
朝朝辞暮i1 小时前
C++ 第 14 课:引用 &
开发语言·c++·算法
web打印社区1 小时前
政务办事大厅:叫号小票、办理回执网页怎么静默出纸
前端·javascript·vue.js·pdf·html·政务
梅雅达编程笔记1 小时前
04-Python CSV数据保存与翻页抓取
开发语言·爬虫·python·pandas·数据采集·csv
C++ 老炮儿的技术栈1 小时前
有符号变量与无符号变量的区别
服务器·开发语言·前端·数据结构·c++·算法·c
估值探索者1 小时前
【Python量化策略实战 #04】Donchian 通道假突破太多?用 ATR 阈值过滤跑通真实突破信号
开发语言·python·接口·api接口·数据api接口·股票数据api接口