我知道什么是a。在循环中(它在键上迭代),但我听说for…的第一次(它遍历值)。

我对……感到困惑。的循环。

var arr = [3, 5, 7];
arr.foo = "hello";
    
for (var i in arr) {
  console.log(i); // logs "0", "1", "2", "foo"
}
    
for (var i of arr) {
  console.log(i); // logs "3", "5", "7"
  // it doesn't log "3", "5", "7", "hello"
}

我理解为……Of迭代属性值。那为什么它记录的不是"3" "5" "7" "hello"而是"3" "5" "7"

不像……循环中,遍历每个键("0","1","2","foo"),也遍历foo键,for…Of不会遍历foo属性的值,即“hello”。为什么会这样?

在此我为……的循环。它应该日志“3”,“5”,“7”,“你好”,但日志“3”,“5”,“7”。为什么?

例子链接


当前回答

这里有一个有用的助记符来记住for…in Loop和for…的循环。

索引的对象

为…in Loop =>迭代数组中的索引。

为…of Loop =>遍历对象的对象。

其他回答

为…In语句以任意顺序遍历对象的可枚举属性。 可枚举属性是那些内部[[Enumerable]]标志被设置为true的属性,因此如果原型链中有任何可枚举属性,for…In循环也会迭代这些。

为…语句对iterable对象定义的要迭代的数据进行迭代。

例子:

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

let iterable = [3, 5, 7];

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

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs: 0, 1, 2,
  }
}

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

像前面一样,你可以跳过添加hasOwnProperty在…的循环。

for-in语句以任意顺序遍历对象的可枚举属性。

该循环将遍历对象本身的所有可枚举属性以及对象从其构造函数原型继承的属性

你可以把它理解为for in迭代并列出所有键。

var str = 'abc';
var arrForOf = [];
var arrForIn = [];

for(value of str){
  arrForOf.push(value);
}

for(value in str){
  arrForIn.push(value);
}

console.log(arrForOf); 
// ["a", "b", "c"]
console.log(arrForIn); 
// ["0", "1", "2", "formatUnicorn", "truncate", "splitOnLast", "contains"]

简单来说,forIN遍历数组(索引)/对象(键)中的key, 而forOF则遍历数组(value)的值。

这两个循环之间的另一个区别,之前没有人提到过:

解构……In已弃用。用于……相反。

因此,如果我们想在循环中使用解构,为了获取每个数组元素的索引和值,我们应该使用for…使用Array方法条目():

for (const [idx, el] of arr.entries()) {
    console.log( idx + ': ' + el );
}

有一些已经定义的数据类型,允许我们轻松地迭代它们,例如数组,映射,字符串对象

正常情况下,for in在迭代器上迭代,in response为我们提供了按插入顺序排列的键,如下例所示。

  const numbers = [1,2,3,4,5];
   for(let number in number) {
     console.log(number);
   }

   // result: 0, 1, 2, 3, 4

现在如果我们对for of进行同样的操作,那么作为响应,它提供给我们的是值而不是键。如

  const numbers = [1,2,3,4,5];
   for(let numbers of numbers) {
    console.log(number);
  }

  // result: 1, 2, 3, 4, 5

因此,观察这两个迭代器,我们可以很容易地区分它们之间的区别。

注意:- For of只适用于Symbol.iterator

因此,如果我们尝试在普通对象上迭代,那么它会给我们一个错误,例如-

const Room = {
   area: 1000,
   height: 7,
   floor: 2
 }

for(let prop in Room) {
 console.log(prop);
 } 

// Result area, height, floor

for(let prop of Room) {
  console.log(prop);
 } 

Room是不可迭代的

现在为了遍历,我们需要定义一个ES6 Symbol。迭代器如

  const Room= {
    area: 1000, height: 7, floor: 2,
   [Symbol.iterator]: function* (){
    yield this.area;
    yield this.height;
    yield this.floors;
  }
}


for(let prop of Room) {
  console.log(prop);
 } 

//Result 1000, 7, 2

这就是For in和For of的区别。希望能消除这种差异。