Vue 学习随笔系列十五 -- 数组遍历方法

数组遍历方法

文章目录

数组遍历方法
- - [1. for 循环](#1. for 循环)
  - [2. forEach (不会修改数组本身)](#2. forEach (不会修改数组本身))
  - [3. map (不修改数组本身)](#3. map (不修改数组本身))
  - [4. some(不修改数组本身）](#4. some(不修改数组本身）)
  - [5. every(不修改数组本身）](#5. every(不修改数组本身）)
  - [6. filter(不修改数组本身)](#6. filter(不修改数组本身))
  - [7. find(不修改数组本身)](#7. find(不修改数组本身))
  - [8. findIndex](#8. findIndex)
  - - 拓展
  - [9. reduce(累加)](#9. reduce(累加))
  - - 拓展

1. for 循环

for...if... 条件判断循环

for...in... 遍历对象的索引

for...of... 遍历对象的元素

bash 复制代码

// for...if...
const arr = [11, 12, 13, 14]
for(let i = 0; i < arr.length; i++) {
  console.log(111, arr[i])
}

// for...in...
for( let i in arr) {
  console.log(222, arr[i])
}

// for...of...
for(let i of arr) {
  console.log(333, i)
}

2. forEach (不会修改数组本身)

无返回值

回调函数有三个参数

callBack(item, inde, arr) ,item -- 当前元素， index -- 当前元素索引， arr -- 原数组

bash 复制代码

const arr = [11, 12, 13, 14]
arr.forEach(( item, index, array ) => {
  console.log( item, index, array)
})

3. map (不修改数组本身)

返回一个新的数组

回调函数有三个参数

callBack(item, inde, arr) ,item -- 当前元素， index -- 当前元素索引， arr -- 原数组

bash 复制代码

const arr = [11, 12, 13, 14]
let data = arr.map( (item, index, array) => {
  console.log( item, index, array)
  return item * 2
})
console.log("data==", data)

4. some(不修改数组本身）

遍历每一个元素，有任何一个元素满足条件，则返回true，没有元素满足条件，则返回 false

回调函数有三个参数

callBack(item, inde, arr) ,item -- 当前元素， index -- 当前元素索引， arr -- 原数组

bash 复制代码

const arr = [11, 12, 13, 14]
 let flag = arr.some( (item, index, array) => {
   console.log( item, index, array)
   return item == 13
 })
console.log("flag==", flag)

5. every(不修改数组本身）

遍历每一个元素，每一个元素都满足条件，则返回true，有任一元素不满足条件，则返回 false

回调函数有三个参数

callBack(item, inde, arr) ,item -- 当前元素， index -- 当前元素索引， arr -- 原数组

bash 复制代码

const arr = [11, 12, 13, 14]
let flag = arr.every( (item, index, array) => {
  console.log( item, index, array)
  return item == 13
})
console.log("flag==", flag)

6. filter(不修改数组本身)

返回数组中满足条件的元素，遍历整个数组，返回一个新数组

回调函数有三个参数

callBack(item, inde, arr) ,item -- 当前元素， index -- 当前元素索引， arr -- 原数组

bash 复制代码

const arr = [
  {
    name: "xiaoming",
    age: 18
  },
  {
    name: "xiaoli",
    age: 20
  },
  {
    name: "xiaoming",
    age: 25
  }
]
let temp = arr.filter( (item, index, array) => {
  console.log( item, index, array)
  return item.name === 'xiaoming'
})
console.log("temp== ", temp, temp[0].age)

7. find(不修改数组本身)

返回数组中满足条件的第一个元素，不会遍历整个数组

回调函数有三个参数

callBack(item, inde, arr) ,item -- 当前元素， index -- 当前元素索引， arr -- 原数组

bash 复制代码

const arr = [11, 12, 13, 13, 14, 13, 14]
let temp = arr.find( (item, index, array) => {
  console.log( item, index, array)
  return item == 13
})
console.log("temp== ", temp )

8. findIndex

返回符合条件的第一个元素的索引值，如果有满足条件的值，返回满足条件的第一个值的索引，如果没有满足条件的值，返回 -1

回调函数有三个参数

callBack(item, inde, arr) ,item -- 当前元素， index -- 当前元素索引， arr -- 原数组

bash 复制代码

const arr = [11, 12, 13, 13, 14, 13, 14]
let temp = arr.findIndex( (item, index, array) => {
	console.log( item, index, array)
	return item == 13
})
console.log("temp== ", temp )

bash 复制代码

const arr = [11, 12, 13, 13, 14, 13, 14]
let temp = arr.findIndex( (item, index, array) => {
  console.log( item, index, array)
  return item == 15
})
console.log("temp== ", temp )

拓展

findLastIndex 从右往左遍历数组，找到第一个满足条件的值，返回其索引，如果没有满足条件的值，返回-1

bash 复制代码

const arr = [11, 12, 13, 13, 14, 13, 14]
let temp = arr.findLastIndex( (item, index, array) => {
  console.log( item, index, array)
  return item == 13
})
console.log("temp== ", temp )

9. reduce(累加)

bash 复制代码

array.reduce(callback, initValue)
array.reduce((prev, cur, index, arr) => {
	retutn ****
}, initValue)

回调函数有四个值：

prev：上一次累加的返回值，或给定的初始值

cur：数组中正在处理的当前元素

index：当前元素的索引值

arr ：原数组

如果没有提供初始值，则从数组的第一个元素开始

注意：

空数组未给初始值执行reduce操作，会报错，

空数组给定初始值执行reduce操作，不会报错

bash 复制代码

const arr = [1, 2, 3, 4, 5, 6]
let sum = arr.reduce( (prev , cur, index, arr) => {
  console.log( prev , cur, index, arr )
  return prev + cur;
})
console.log("sum== ", sum )

拓展

给定累加初始值

bash 复制代码

const arr = [1, 2, 3, 4, 5, 6]
let sum = arr.reduce( (prev , cur, index, arr) => {
	console.log( prev , cur, index, arr )
	return prev + cur;
}, 10)
console.log("sum== ", sum )

reduce 对象属性求和

bash 复制代码

const arr = [
  {
    aub: "语文",
    score: 90
  },
  {
    sub: "数学",
    score: 95
  },
  {
    sub: "英语",
    score: 89
  }
]
let sum = arr.reduce( (prev , cur) => {
  return cur.score + prev
}, 0)
console.log("sum== ", sum )

reduce 求乘积

bash 复制代码

const arr = [1, 2, 3, 4, 5, 6]
let sum = arr.reduce( (prev , cur, index, arr) => {
   console.log( prev , cur, index, arr )
   return prev * cur;
 })
 console.log("sum== ", sum )

reduce 计算元素出现次数

注意：必须给定一个空数组作为初始值

bash 复制代码

const arr = ['xiaoming', 'xiaoli', 'alice', 'xiaoming', 'xiaoli', 'xiaoming', 'jonh']
let sum = arr.reduce( (prev , cur) => {
  if(cur in prev ) {
    prev[cur] ++
  } else {
    prev[cur] = 1
  }
  return prev
}, {})
console.log("sum== ", sum )

reduce 数组去重

注意：必须给定一个空数组作为初始值

bash 复制代码

const arr = ['xiaoming', 'xiaoli', 'alice', 'xiaoming', 'xiaoli', 'xiaoming', 'jonh']
let sum = arr.reduce( (prev , cur) => {
  if(!prev.includes(cur)) {
    return prev.concat(cur)
  } else {
    return prev
  }
}, [])
console.log("sum== ", sum )