我知道什么是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循环遍历对象的可枚举属性名。
for of (ES6新增功能)使用特定于对象的迭代器并遍历由该迭代器生成的值。
在你的例子中，数组迭代器产生数组中的所有值(忽略非索引属性)。
其他回答
A看到了很多好的答案，但我决定把我的5美分只是为了有一个好的例子:
For in循环
遍历所有可枚举的道具
let nodes = document.documentElement.childNodes; 对于(var键在节点中){ Console.log (key); ｝
For循环
遍历所有可迭代值
let nodes = document.documentElement.childNodes; 对于(var节点中的节点){ console.log(node.toString()); ｝
有一些已经定义的数据类型，允许我们轻松地迭代它们，例如数组，映射，字符串对象
正常情况下，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的区别。希望能消除这种差异。
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返回的值取决于可迭代对象的类型。例如，数组将返回所有数组元素的值，而字符串则返回字符串中的每个字符。
这两个循环之间的另一个区别，之前没有人提到过:
解构……In已弃用。用于……相反。
源
因此，如果我们想在循环中使用解构，为了获取每个数组元素的索引和值，我们应该使用for…使用Array方法条目():
for (const [idx, el] of arr.entries()) {
console.log( idx + ': ' + el );
}
为…在循环
为…In循环通过消除计数逻辑和退出条件改进了for循环的弱点。
例子:
const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const index in digits) {
console.log(digits[index]);
}
但是，你仍然需要处理使用索引访问数组值的问题，这很糟糕;这几乎比以前更让人困惑了。
还有，for…当您需要向数组(或另一个对象)添加额外的方法时，In循环可能会给您带来大麻烦。因为……在循环中，循环遍历所有可枚举的属性，这意味着如果您向数组的原型添加任何额外的属性，那么这些属性也将出现在循环中。
Array.prototype.decimalfy = function() {
for (let i = 0; i < this.length; i++) {
this[i] = this[i].toFixed(2);
}
};
const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const index in digits) {
console.log(digits[index]);
}
打印:
0 1 2 3. 4 5 6 7 8 9 函数(){ for(设I = 0;I < this.length;我+ +){ this[i] = this[i].toFixed(2); } ｝
这就是为什么……当循环遍历数组时，不鼓励使用In循环。
注意:forEach循环是JavaScript中的另一种for循环。 然而，forEach()实际上是一个数组方法，因此只能使用它 仅用于数组。也没有办法停止或打破一个 forEach循环。如果你的循环中需要这种类型的行为，你会 必须使用一个基本的for循环。
为…的循环
为…Of循环用于遍历任何类型的可迭代数据。
例子:
const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const digit of digits) {
console.log(digit);
}
打印:
0 1 2 3 4 5 6 7 8 9
这使得……Of loop是所有for循环中最简洁的版本。
但是等等，还有更多!为…Of循环还有一些额外的优点，可以修复for和for…在循环。
你可以stop或break for…的循环。
const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const digit of digits) {
if (digit % 2 === 0) {
continue;
}
console.log(digit);
}
打印:
1 3 5 7 9
您不必担心向对象添加新属性。为…Of循环将只循环遍历对象中的值。
