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

news2024/11/16 21:04:55

数组遍历方法

文章目录

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

1. for 循环

for…if… 条件判断循环
for…in… 遍历对象的索引
for…of… 遍历对象的元素

// 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 – 原数组

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 – 原数组

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 – 原数组

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 – 原数组

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 – 原数组

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 – 原数组

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 – 原数组

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 )

在这里插入图片描述

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

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(累加)

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

回调函数有四个值：
prev：上一次累加的返回值，或给定的初始值
cur：数组中正在处理的当前元素
index：当前元素的索引值
arr ：原数组
如果没有提供初始值，则从数组的第一个元素开始
注意：
空数组未给初始值执行reduce操作，会报错，
空数组给定初始值执行reduce操作，不会报错

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 )

在这里插入图片描述

拓展

给定累加初始值

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 对象属性求和

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 求乘积

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 计算元素出现次数
注意：必须给定一个空数组作为初始值

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 数组去重
注意：必须给定一个空数组作为初始值

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 )