欢迎光临
我们一直在努力

ES6 | 常见遍历数组方式

遍历是在JavaScript常见到的操作,本篇文章简单介绍几种常见遍历数组的方法,以及注意事项。

在ES5中遍历数组有以下几种方法:

  • for循环遍历
  • forEach()遍历
  • Array.every()遍历
  • for of遍历

在ES6中新引入的遍历方式:

  • for in遍历

for循环遍历

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

forEach遍历

// forEach遍历
arr.forEach(function (item) {
  console.log(item)
})

every遍历

every遍历需要return true才会继续遍历下去,否则立即停止遍历。

// every
arr.every(function (item) {
  console.log(item)
  return true // every需要return true才会继续后面的执行
})

for in遍历

  • for in遍历主要用于遍历对象,但同样可以遍历数组
  • for in遍历数组时,会把我们给数组自定义添加的属性遍历出来
  • for in遍历数组,实际上是遍历索引,且索引数据类型为string
// for in
// for in是为object设计的遍历方式,但同样适用于数组遍历
for (let index in arr) {
  console.log(arr[index])
}
// 有趣的是数据也是object,我们可以为其添加属性
arr.a = 'a'
console.log(arr) // [1,2,3,4,5,a:"a"]
// 同样在用for in遍历数组时,可以遍历出来属性a
for (let index in arr) {
  console.log(index, arr[index])
}

// 注意:for in循环内可以使用continue与break,但要注意for in遍历到的index是字符串而非数字
for (let index in arr) {
  if (index === '2') {
    continue
  } else {
    console.log(index, arr[index])
  }
}

for of遍历

  • for of可以直接遍历数组各个值,且不会遍历到自定义添加的属性或属性值
  • for of循环不能遍历普通对象,但可以构造伪数组对象,然后转换成数组进行遍历
// ES6新增 for of 遍历 可用于遍历可迭代的数据结构
// for of 迭代数组只会获得数组各个值,不会获取前面添加属性值a
for (let value of arr) {
  console.log(value)
}
// for of 不能遍历普通对象
let obj = {
  length: 3,
  0: 1,
  1: 2,
  2: 3
}
/* for (let value of obj) {
  console.log(value)
} // 报错 obj is not iterable */
// 对象转换为数组后可以正常遍历
// 对象转为数组的条件是:必须具有length属性,且具有满足数组下标的属性值
const arrFromObj = Array.from(obj)
console.log(arrFromObj)
for (let value of Array.from(obj)) {
  console.log(value)
}
赞(0) 打赏
未经允许不得转载:散人研 » ES6 | 常见遍历数组方式
分享到: 更多 (0)

评论 抢沙发

4 + 6 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏