ES6数组操作方法

1. forEach

(1)没有返回值

(2)不能return,会返回undefinde

var arr = [1, 2, 3, 4, 5, 4, 2]
arr.forEach((item) => {
  console.log(item)
})

1, 2, 3, 4, 5, 4, 2

2. map

(1)有返回值,返回一个新数组

(2)可以return,可以自定义返回值

var arr2 = [
  { id: 1, name: 'jack', age: 18 },
  { id: 2, name: 'rose', age: 28 },
  { id: 3, name: 'tom', age: 38 },
]

var newArr2 = arr2.map((item, index) => {
  return {
    ...item,
    gender: 1,
  }
})
console.log(newArr2)

[
  { id: 1, name: 'jack', age: 18, gender: 1 },
  { id: 2, name: 'rose', age: 28, gender: 1 },
  { id: 3, name: 'tom', age: 38, gender: 1 }
]

3. filter

(1)有返回值,返回一个新数组

(2)可以return,返回满足条件的每一项数据

var arr3 = [
  { id: 1, name: 'jack', age: 18 },
  { id: 2, name: 'rose', age: 28 },
  { id: 3, name: 'tom', age: 38 },
]

var newArr3 = arr3.filter((item) => {
  if (item.id == 1) {
    return item
  }
})

console.log(newArr3)

[ { id: 1, name: 'jack', age: 18 } ]

4. some

(1)有返回值,返回一个bool

(2)可以return,只要有一项满足条件就是true

var arr4 = [
  { id: 1, name: 'jack', age: 18 },
  { id: 2, name: 'rose', age: 28 },
  { id: 3, name: 'tom', age: 38 },
]

var newArr4 = arr4.some((item) => {
  return item.id == 2
})

console.log(newArr4)

true

5. every

(1)有返回值,返回一个bool

(2)有return,只要有一个不满足就是false

var arr5 = [
  { id: 1, name: 'jack', age: 18, flag: true },
  { id: 2, name: 'rose', age: 28, flag: false },
  { id: 3, name: 'tom', age: 38, flag: true },
]

var newArr5 = arr5.every((item) => {
  return item.flag
})

console.log(newArr5)

false

6. reduce

(1)reduce接收一个函数作为累加器,有返回值,可以返回叠加的数据

var arr6 = [
  { id: 1, name: 'lining', price: 100, num: 1 },
  { id: 2, name: 'anta', price: 200, num: 2 },
  { id: 3, name: 'nike', price: 300, num: 3 },
  { id: 4, name: 'tebu', price: 400, num: 1 },
]

var newArr6 = arr6.reduce((sum, item) => {
  return sum += item.price * item.num
}, 0)

console.log(newArr6)

1800

(2)还可以用于数组去重

var arr = [1, 2, 3, 4, 5, 4, 2]
//arr2===得到处理之后的新数组 []是arr2的初始值
//item===arr数组的每一项
var newArr7 = arr.reduce((arr2, item) => {
  if (!arr2.includes(item)) {
    arr2.push(item)
  }
  return arr2
}, [])

console.log(newArr7)

[ 1, 2, 3, 4, 5 ]

(2)数组去重另外两种方法

var newArr8 = [...new Set(arr)]
var newArr9 = Array.from(new Set(arr))
console.log(newArr8)
console.log(newArr9)

7. findIndex

(1)返回一个索引【下标】

(2)可以return,只要有条件满足就会返回索引

var arr7 = [
  { id: 1, name: 'lining', price: 100, num: 1 },
  { id: 2, name: 'anta', price: 200, num: 2 },
  { id: 3, name: 'nike', price: 300, num: 3 },
  { id: 4, name: 'tebu', price: 400, num: 1 },
]
var index = arr7.findIndex((item) => {
  return item.id === 1
})

console.log(index)

0

8.  find

(1)有返回值,返回一个对象

(2)可以return,只要有条件满足就会返回当前满足项

var arr8 = [
  { id: 1, name: 'lining', price: 100, num: 1 },
  { id: 2, name: 'anta', price: 200, num: 2 },
  { id: 3, name: 'nike', price: 300, num: 3 },
  { id: 4, name: 'tebu', price: 400, num: 1 },
]

var obj = arr8.find((item) => {
  return item.id === 2
})

console.log(obj)

{ id: 2, name: 'anta', price: 200, num: 2 }

9. slice

(1)1个参数:截取数组中的数据返回一个新的数组,不会影响原数组

         从当前参数的索引开始往后截取

         打印原数组返回的是原数组

(2)2个参数:从参数1开始,到参数2的前一位结束 ,包头不包尾

 ps:  slice(1,3)   从索引1开始到索引2结束

var arr9 = ['a', 'b', 'c', 'd', 'e', 'f']
console.log(arr9.slice(2, 5)) //[ 'c', 'd', 'e' ]
console.log(arr9) //['a', 'b', 'c', 'd', 'e', 'f']

10. splice

(1)1个参数:截取数组中的数据返回一个新的数组,影响原数组

         从当前参数的索引开始往后截取

         打印原数组返回的是没有被截取的部分数组

(2)2个参数:从参数1开始,到参数2的前一位结束 ,包头不包尾

var arr9 = ['a', 'b', 'c', 'd', 'e', 'f']
console.log(arr9.splice(0, 3)) //[ 'a', 'b', 'c' ]
console.log(arr9) //[ 'd', 'e', 'f' ]

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值