js 数组的遍历方式

数组的遍历方式

ES6 之前数数组的遍历方式

for 最原始的数组循环方式
forEach 对当前的数组进行简单的循环
map 对当前的数组进行循环 根据回调操作得到一个新数组
filter 对当前的数组元素进行过滤 得到过滤之后的数组
some 遍历数组有没有符合条件的元素
every 遍历数组中每个值是否符合条件值 返回布尔值
reduce 数组的累加器
for in 数组的循环方式

ES6 新增数组遍历方式

find 返回第一个通过测试的元素
findIndex 返回第一个通过测试的元素的索引值
for of 数组的遍历方式

ES5 详解

for 最原始的数组遍历的方式 只要想到数组遍历方式 第一个就应该想到for循环

let arr = [1, 2, 3]
for(let i = 1, i < arr.length; i++) {
  console.log(arr[i])
}

// 1, 2, 3

forEach 对当前的数组每项循环 传入的值是一个方法 只是简单的循环

let arr = [1, 2, 3]

// forEach 回调方法支持传入三个参数
// item 当前正在遍历的对象
// index 当前正在遍历的数组的索引 从 0 开始
// arr 当前遍历的数组本身

// 当前数组遍历方式不支持 break, continue 代表着在中途不能结束和跳出循环

arr.forEach(function(item, index, arr) {
  console.log(item,  index, arr)
})

// 1 0?[1, 2, 3]
// 2 1?[1, 2, 3]
// 3 2?[1, 2, 3]

map: 也是对当前数组每项进行循环 会遍历数组中的每一个元素 根据回调操作 会返回一个新的数组 不会改变原有数组的值

let arr = [1, 2, 3]
// map 回调方法支持传入三个参数
// item 当前正在遍历的对象
// index 当前正在遍历的数组的索引 从 0 开始
// arr 当前遍历的数组本身

// 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环

let result = arr.map(function(item, index, arr) {
  console.log(item, index, arr)
  item += 1
  return item
})
console.log(arr, result) // [1, 2, 3]?[2, 3, 4]

**filter: 过滤 会返回一个新的数组 返回的数组是原来的数组中通过筛选之后的数组 如果没有匹配值返回一个 空数组 [] **

let arr = [1, 2, 3]

// filter 回调方法支持传入三个参数
// item 当前正在遍历的对象
// index 当前正在遍历的数组的索引 从 0 开始
// arr 当前遍历的数组本身

// 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环

let result = arr.filter(function(item, index, arr) {
  console.log(item, index, arr)
  return item === 2 // 相当于判断语句
})
console.log(result) // [2]

some: 遍历数组中有没有符合条件的元素 返回的是一个 布尔值 如果如何就返回 true 否则 返回 false 不会改变原有数组的值

let arr = [1, 2, 3]

// some 回调方法支持传入三个参数
// item 当前正在遍历的对象
// index 当前正在遍历的数组的索引 从 0 开始
// arr 当前遍历的数组本身

// 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环

let result = arr.some(function(item, index, arr) {
  console.log(item, index, arr)
  return item === 4
})

console.log(result) // false

every: 检测数组中的每一个值是否符合条件值 返回的是一个 布尔值 如果如何就返回 true 否则 返回 false 不会改变原数组

let arr = [1, 2, 3]

// every 回调方法支持传入三个参数
// item 当前正在遍历的对象
// index 当前正在遍历的数组的索引 从 0 开始
// arr 当前遍历的数组本身

// 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环

let result = arr.some(function(item, index, arr) {
  console.log(item, index, arr)
  return item === 4
})

console.log(result) // false

reduce: 接受一个函数为累加器

let arr = [1, 2, 3]

// reduce 函数接受两参数 一个是回调函数 一个是初始值
// 什么是初始值 如果需求是要得到数组中的每项和 初始值即 0 以此类推

// reduce 回调方法支持传入四个参数
// prev 对应上一次执行的返回值 如果是第一次 就对应初始值
// current 当前正在遍历的数组中的元素
// index 当前正在遍历的数组的索引 从 0 开始
// arr 当前遍历的数组本身

// 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环

let result = arr.reduce(function(prev, current, index, arr) {
  console.log(prev, current, index, arr)
  return prev + current
}, 0)

console.log(result) // 6

实际应用场景: 求出数组的每项和 最值 去重
求出最值:

let arr = [1, 2, 3]
let result = arr.reduce(function(prev, current, index, arr) {
  return Math.max(prev, current)
}, 0)

console.log(result) // 3

去重:

let arr = [1, 2, 3, 3, 2, 1]
let result = arr.reduce(function(prev, current, index, arr) 
  prev.indexOf(current) === -1 && prev.push(current)
  return prev
}, [])

console.log(result) // [1, 2, 3]

for in 也是用来循环遍历数组的 在参数中 定义一个变量 index 代表数组的索引值 in 上需要比遍历的数组

let arr = [1, 2, 3]
for(let index in arr) {
  console.log(index, arr) 
}

// 0?[1, 2, 3]
// 1?[1, 2, 3]
// 2?[1, 2, 3]

for in 可以正常的遍历数组 但是在遍历数组的时候有一些问题 如:

// 我们数组的原型上增加一个方法 foo
Array.prototype.foo = function () {
  console.log('haha')
}

let arr = [1, 2, 3]
for(let index in arr) {
  console.log(index, arr[index]) 
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JbTedbma-1593003462662)(https://img.tnblog.net/arcimg/17585965017/e8b63b20f17e4834b3b570bc57542b67.png “for in 遍历数组存在的问题”)]

通过截图可知 不仅仅是输出了 数组中的内容 而且输出了数组原型上定义的方法 所以 在实际的业务中使用 for in 是有问题的

ES6 新增的遍历方式详解

find: 返回第一个通过测试的元素 如果没有找到 返回值为 undefined 不改变原数组

let arr = [1, 2, 3, 2, 4]

// find 回调方法支持传入三个参数

// item 当前正在遍历的数组中的元素
// index 当前正在遍历的数组的索引 从 0 开始
// arr 当前遍历的数组本身

// 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环

let result = arr.find(function(item, index, arr) {
  console.log(item, index, arr)
  return item === 2
})
console.log(result) // 2 

findIndex: 返回第一次出现的元素的索引值 如果找不到返回值为 -1 不改变原数组

let arr = [1, 2, 3, 2, 4]

// find 回调方法支持传入三个参数

// item 当前正在遍历的数组中的元素
// index 当前正在遍历的数组的索引 从 0 开始
// arr 当前遍历的数组本身

// 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环

let result = arr.findIndex(function(item, index, arr) {
  console.log(item, index, arr)
  return item === 2
})
console.log(result)

for of: 推荐的数组的循环方式:

let arr = [1, 2, 3, 2, 4]

for(let item of arr) {
  console.log(item) // 1, 2, 3, 2, 4
}

// 这里的 arr.values() 方法的得到的和上面得到的是一样的
for(let item of arr.values()) {
  console.log(item) // 1, 2, 3, 2, 4
}
// 通过以上代码输出可以看出得到数组的每项值 如何得到数组的索引？？
for(let item of arr.keys()) {
  console.log(item) // 0, 1, 2, 3, 4
}

// 如何得到值和索引值:
for(let [index, item] of arr.entries()) {
  console.log(index, item)
}