数组函数forEach()、map()、filter()、find()、reduce()等

  • forEach()
  • map()— —更新重组数组
  • filter()、includes()、find()、findIndex()— —筛选(删除)数组
  • some()、every()— —判断数组
  • reduce()— —叠加数组

forEach

遍历数组全部元素,利用回调函数对数组进行操作,自动遍历数组.length次数,且无法break中途跳出循环

不支持return操作输出,return只用于控制循环是否跳出当前循环
示例

var arr = [{id:1,a:1},{id:2,b:2},{id:3,c:3}]
arr.forEach(item => {
  if (item.id === 1) return
  console.log(item)
})

在这里插入图片描述

map()— —更新数组

1、创建新数组

2、不改变原数组

3、输出的是return什么就输出什么新数组

4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出,会循环数组每一项,并在回调函数中操作
示例:

var arr = [1,2,3,4,5]
let newArr = arr.map(item => {
  return `我是${item}`
})
console.log(newArr)

在这里插入图片描述

filter()

1、创建新数组

2、不改变原数组

3、输出的是判断为true的数组元素形成的新数组

4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出,会循环数组每一项,并在回调函数中操作

var arr = [{id:1,a:1},{id:2,a:2},{id:3,a:3}]
let newArr = arr.filter(item => item.id === 1)
console.log(newArr)

在这里插入图片描述

includes()

只是判断数组是否含有某值,不用return,不用回调函数,输出一个true或false

var arr = [1,2,3,4]
let newArr = arr.includes(3) //不用回调函数,且是完全匹配才行,如果原数组是33则flase(实用性不如正则)
console.log(newArr) // true

find()

1、不创建新数组

2、不改变原数组

3、输出的是一旦判断为true则跳出循环输出符合条件的数组元素

4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出,会循环数组每一项,并在回调函数中操作

var arr = [1,2,3,4]
let newArr = arr.find(item => {
  return item > 2 && item < 6 // 当遍历循环到判断到一个为true则跳出循环,输出当前数组元素,不再循环
})
console.log(newArr) // 3

var arr = [1,2,3,4]
let newArr = arr.find(item => {
  return item.toString().indexOf(5) > -1 // 当遍历循环到判断到一个为true则跳出循环,输出当前数组元素,不再循环
})
console.log(newArr) // undefined

reduce()— —叠加数组

1、创建新数组

2、不改变原数组

3、输出的是return叠加什么就输出什么 新数组

4、回调函数参数

  • pre(第一次为数组第一项,之后为上一操作的结果)
  • next(数组的下一项)
  • index(next项的序列)
  • arr(数组本身)
  • 回调函数后的改变第一项参数。(不影响原数组)

5、使用return操作输出,会循环数组每一项,并在回调函数中操作

// 求和计算
var arr = [1,2,3,4]
let sum = arr.reduce((prev, next, index) => {
  console.log(prev, next, index)  // index 从1开始
  /*
    *第一次:pre-->1  next-->2  index--> 1
    *遍历计算return得结果为pre+next=1+2=3
    *第二次:pre-->3  next-->3  index-->2
    *遍历计算return得结果为pre+next=3+3=6
    *第三次:pre-->6  next-->4  index-->3
    *遍历计算return得结果为pre+next=6+4=10
	*/
  return prev + next  
})
console.log(sum) // 10

//扁平化数组
var arr = [[1,2],[3,4,5],[6,7]]
let sumArr = arr.reduce((prev, next, index) => {
  console.log(prev, next, index)  // index 从1开始
  return prev.concat(next)  
})
console.log(sumArr) // [1, 2, 3, 4, 5, 6, 7]

//对象数组叠加计算
var arr = [{price:10,count:1},{price:15,count:2},{price:20,count:3}]
let sum = arr.reduce((prev, next, index) => {
  console.log(prev, next, index)  // index 从0开始
  // 0 {price: 10, count: 1} 0
  // 1 {price: 15, count: 2} 1
  // 2.5 {price: 20, count: 3} 2
	//当需要操作第一项的时候,利用reduce(callbreak(){},往数组第一项前添加一项,如:0),index也从0开始
  return prev + next.price*0.1  
}, 0)
console.log(sum) // 4.5
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值