Skip to content
目录

for ... in

for...in 语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性,包括继承的可枚举属性.
如果你只要考虑对象本身的属性,而不是它的原型,那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性

TIP

for ... in是为遍历对象属性而构建的,不建议与数组一起使用,数组可以用Array.prototype.forEach()和for ... of,那么for ... in的到底有什么用呢?

它最常用的地方应该是用于调试,可以更方便的去检查对象属性(通过输出到控制台或其他方式)。尽管对于处理存储数据,数组更实用些,但是你在处理有key-value数据(比如属性用作“键”),需要检查其中的任何键是否为某值的情况时,还是推荐用for ... in。

示例

javascript
var triangle = { a: 1, b: 2, c: 3 };
  function ColoredTriangle() {
    this.color = 'red';
  }
  ColoredTriangle.prototype = triangle;
  var obj = new ColoredTriangle();
  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      console.log(`obj.${prop} = ${obj[prop]}`);
    }
  }
  
  // 输出: obj.color = red
javascript
var object = {
    name: 'a',
    [Symbol('name')]: 'b' 
  };
  for(key in object) {
    console.log(object[key]);
  }

  // 输出: a

for ... of

for...of语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等) 上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句

迭代Array

javascript
let iterable = [10, 20, 30];
for (const value of iterable) {
    console.log(value);
}
// 输出
// 10
// 20
// 30

迭代String

javascript
let iterable = "boo";
for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

迭代TypedArray

javascript
let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

迭代Map

javascript
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

迭代Set

javascript
let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

迭代argument

javascript
(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3

备案号: 浙ICP备2023000081号