面试题之for...i循环

用户10106350

发布于 2022-10-28 18:04:46

2690

发布于 2022-10-28 18:04:46

文章被收录于专栏：WflynnWebWflynnWeb

for…i 循环的作用

for...in 语句以任意顺序迭代一个对象的除 Symbol 以外的可枚举属性，包括继承的可枚举属性。

for...in 是为遍历对象属性而构建的，不建议与数组一起使用
在处理有 key-value 数据，用于获取对接的 key，也就是获取键值
只遍历可枚举属性。像 Array 和 Object 使用内置构造函数所创建的对象都会继承自 Object.prototype 和 String.prototype 的不可枚举属性，这种是无法遍历的

语法：for (variable in object)

variable：在每次迭代时，variable 会被赋值为不同的属性名。
object：非 Symbol 类型的可枚举属性被迭代的对象。

使用示例

遍历一个带有 `Symbol` 的对象

const obj = {  a: 'a',  b: 'b',  c: 'c',
  [Symbol('a')]: '我是 symbol',
}for (let key in obj) {  console.log('obj.' + key + ' = 我是' + obj[key])
}

结果如图：Symbol 并没有出现在遍历的结果当中

遍历带有不可枚举的属性

如下面的代码所示，我们在 obj 上加了两个属性，enumerableTrue 可枚举，notEnumerableTrue 不可枚举

const obj = {  a: 'a',  b: 'b',  c: 'c',
  [Symbol('a')]: '我是 symbol',
}Object.defineProperty(obj, 'enumerableTrue', {  value: 'enumerableTrue',  enumerable: true})Object.defineProperty(obj, 'notEnumerableTrue', {  value: 'not-enumerableTrue',  enumerable: false})for (let key in obj) {  console.log('obj.' + key + ' = 我是' + obj[key])
}

结果如图所示：notEnumerableTrue 不可枚举的属性，没有在遍历的结果中

继承的枚举示例

如下代码，我们创建了一个构造函数 TestProtoType，并在其中声明了一个 name 属性，并将 TestProtoType 构造函数的原型绑定到了 obj 对象

const obj = {  a: 'a',  b: 'b',  c: 'c',
  [Symbol('a')]: '我是 symbol',
}Object.defineProperty(obj, 'enumerableTrue', {  value: 'enumerableTrue',  enumerable: true})Object.defineProperty(obj, 'notEnumerableTrue', {  value: 'not-enumerableTrue',  enumerable: false})function TestProtoType () {  this.name = 'wfly'}

TestProtoType.prototype = objconst testProtoTypeObj = new TestProtoType();for (let key in testProtoTypeObj) {  console.log('testProtoTypeObj.' + key + ' = 我是' + testProtoTypeObj[key])
}console.log('=======');for (let key in testProtoTypeObj) {  if (testProtoTypeObj.hasOwnProperty(key)) {    console.log('testProtoTypeObj.' + key + ' = 我是' + testProtoTypeObj[key])
  }
}console.log(testProtoTypeObj);

结果如图所示：对构造函数的实例进行遍历时，会输出其原型上的可枚举属性。如果只想输出是对象本身的使用 hasOwnProperty 即可

遍历数组

使用 for in 去遍历数组，得到的 key 就是数组的索引 index。

const arr = [{ name: 'wfly' }, { name: 'fnn' }]for (let key in arr) {  console.log('obj.' + key + ' = 我是' + JSON.stringify(arr[key]))
}

for…in 如何中断循环

在 for in 中可以使用 break 或者 continue 去中断循环，不可以用 return 去中断循环

const obj = {  a: 'a',  b: 'b',  c: 'c',
  [Symbol('a')]: '我是 symbol',
}// 循环中断for (let key in obj) {  if (key === 'b') {    break
  }  console.log('obj.' + key + ' = 我是' + obj[key])
}console.log('=============');for (let key in obj) {  if (key === 'b') {    continue
  }  console.log('obj.' + key + ' = 我是' + obj[key])
}console.log('=============');

return 中断

return 不能直接中断循环，必须放在函数中

function test () {  const obj = {    a: 'a',    b: 'b',    c: 'c',
    [Symbol('a')]: '我是 symbol',
  }  for (let key in obj) {    if (key === 'b') {      return
    }    console.log('obj.' + key + ' = 我是' + obj[key])
  }
}

test()

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2022-08-30，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

javascript

面向对象编程

本文分享自 WflynnWeb 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

javascript

面向对象编程

登录后参与评论

0 条评论

热度