我知道什么是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”。为什么?

例子链接


当前回答

为…Of循环只对可迭代对象有效。在JavaScript中,可迭代对象是可以循环的对象。

String、Array、TypedArray、Map和Set都是内置的可迭代对象,因为它们的每个原型对象都实现了@@iterator方法。因此,对于…Of循环作用于上述的对象类型。

Object在JavaScript中默认是不可迭代的。因此,对于…Of循环对对象无效。

简单地说,对于……Of适用于字符串和数组,但不适用于对象。

为…In适用于那些可枚举标志设置为true的属性。

通过简单赋值或属性初始化器创建的属性的可枚举标志默认为true。 通过Object.defineProperty创建的属性的可枚举标志默认为false。

这里有一个更详细的例子:https://dev.to/swastikyadav/difference-between-forof-and-forin-loop-in-javascript-j2o

其他回答

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"]

每个人都解释了为什么会出现这个问题,但是仍然很容易忘记它,然后挠头为什么会得到错误的结果。尤其是当你处理大量数据时,乍一看结果似乎还不错。

使用对象。你确保去所有属性的条目:

var arr = [3, 5, 7];
arr.foo = "hello";

for ( var [key, val] of Object.entries( arr ) ) {
   console.log( val );
}

/* Result:

3
5
7
hello

*/

为…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. of的区别:

for..in和for..of都是循环结构,用于遍历数据结构。它们之间唯一的区别是实体 它们迭代:

For ..in迭代对象的所有可枚举属性键 For ..of迭代可迭代对象的值。可迭代对象的例子有数组、字符串和nodelist。

例子:

Let arr = ['el1', 'el2', 'el3']; 加勒比海盗。adddedprop = 'arrProp'; // elKey是属性键 for(让elKey在arr中){ console.log (elKey); } // elValue是属性值 for (let elValue of arr) { console.log (elValue) }

在这个例子中,我们可以观察到for.. In循环遍历对象的键,在这个例子中,对象是数组对象。键是0,1,2(对应数组元素)和adddedprop。这是arr数组对象在chrome devtools中的外观:

你可以看到,我们的for..in循环只是简单地遍历这些键。


示例中的for..of循环遍历数据结构的值。这个例子中的值是'el1', 'el2', 'el3'。可迭代数据结构使用for..of返回的值取决于可迭代对象的类型。例如,数组将返回所有数组元素的值,而字符串则返回字符串中的每个字符。

A看到了很多好的答案,但我决定把我的5美分只是为了有一个好的例子:

For in循环

遍历所有可枚举的道具

let nodes = document.documentElement.childNodes; 对于(var键在节点中){ Console.log (key); }

For循环

遍历所有可迭代值

let nodes = document.documentElement.childNodes; 对于(var节点中的节点){ console.log(node.toString()); }