数组常用方法

foreach

和之前for循环作用基本一样，只不过比for更灵活方便一些

参数：回调函数，该回调函数有三个参数

• 遍历项
• 索引
• 该数组

indexof

用于查找在数组中的位置，返回值为索引，如果没有找到返回-1

参数：

• 第一个参数为要查找的数据
• 第二个参数为从哪个位置开始

const arr = [1,2,3,4,5]

const index = arr.indexOf(2)

console.log(index)
1
2
3
4
5

some

some方法可以用作条件查找，循环的过程中，只要有一个能满足条件，即停止循环，并返回值

返回值：

• true：有一项满足条件
• false：一项满足条件的也没有

const arr = [1,2,3,4,5]

arr.some(item => {
  return item === 4
})
1
2
3
4
5

和includes的区别：

• includes只能用于简单数组的查找，包含
• some任何数组都可以，而且some还可以根据逻辑进行查找

every

every方法是返回的条件全部成立即返回true，否则返回false

只要有一项不成立，循环立即停止，并返回false

const arr = [1,2,3,4,5]

const flag = arr.every(item => {
  return item === 3
})

console.log(flag) // false
1
2
3
4
5
6
7

全选功能

map

进行数组映射，及数组格式化，会返回一个新数组，新数组的值来自于map回调函数内的返回值

特点：

• 新数组的长度一定和原数组长度是一致的
• 如果没有返回值，新数组中的值则为undefined

const arr = [1,2,3,4,5]

const newArr = arr.map(item => {
  return item + 1
})
console.log(newArr) // [2,3,4,5,6]
1
2
3
4
5
6

实际应用：

后端返回数据格式为：

const arr = [
  { id: 1, title: '好房', tags: '南北朝向,地铁近,有公交' },
  { id: 2, title: '好房', tags: '地铁近,有公交' }
]  
1
2
3
4

前端数据处理：

const newArr = arr.map(item => {
  return {
    ...item,
    tags: item.tags.split(',')
  }
})
console.log(newArr)
1
2
3
4
5
6
7

react中将数据处理为jsx数组或更新数据均使用map

filter

实现数组过滤，返回值为新数组，新数组中的数据来自于，回调函数中返回条件为true的数据

const arr = [1,2,3,4,5]

const newArr = arr.filter(item => {
  return item%2 === 0
})

console.log(newArr) // [2,4]
1
2
3
4
5
6
7

reduce

方法对数组中的每个元素按序执行一个由您提供的 reduce 函数，每一次运行 reduce 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

参数：

• 回调函数
  • 参数1: 上一次计算出结果的值
  • 参数2: 当前循环项
• 初始值: 如果不传，默认值为数组第一项(并且第一项不在参与运算)
• currentIndex: 正在处理的索引
• 处理的数组

const arr = [1,2,3,4,5]

const total = arr.reduce((pre, cur) => {
  console.log(pre, cur)
  return pre + cur
}, 0)

console.log(total) // 15

const arr = [
  { num: 2, price: 178 },
  { num: 3, price: 188 },
  { num: 1, price: 168 }
]

const totalPrice = arr.reduce((pre, cur) => {
  return pre += cur.num * cur.price
}, 0)

console.log(totalPrice)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20