Skip to main content

for...of(循环数组)

概述​

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

const array1 = ["a", "b", "c"];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

区别​

  • 推荐在循环对象属性的时候，使用 for...in,在遍历数组的时候的时候使用 for...of
  • for...in 循环出的是 key，for...of 循环出的是 value

以下示例显示了与 Array 一起使用时，for...of 循环和 for...in 循环之间的区别

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for..in​

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

//下面的函数说明了hasOwnProperty()的用法：继承的属性不显示。
for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

for..of​

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

for of 循环获取 index 值​

entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

for (let [index, value] of radioList.entries()) {
  console.log(value);
  console.log(index);
}

参考​