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 )
相关推荐
Senar21 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
时光追逐者30 分钟前
MongoDB从入门到实战之MongoDB快速入门(附带学习路线图)
数据库·学习·mongodb
一弓虽35 分钟前
SpringBoot 学习
java·spring boot·后端·学习
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
genggeng不会代码2 小时前
用于协同显著目标检测的小组协作学习 2021 GCoNet(总结)
学习
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
前端snow3 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
搞机小能手3 小时前
六个能够白嫖学习资料的网站
笔记·学习·分类