我知道什么是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…对值的循环。
for (let x in ['a', 'b', 'c', 'd'] {
console.log(x);
}
// Output
0
1
2
3
for (let x of ['a', 'b', 'c', 'd'] {
console.log(x);
}
// Output
a
b
c
d
其他回答
这两个循环之间的另一个区别，之前没有人提到过:
解构……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的区别。希望能消除这种差异。
这里有一个有用的助记符来记住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在…的循环。
每个人都解释了为什么会出现这个问题，但是仍然很容易忘记它，然后挠头为什么会得到错误的结果。尤其是当你处理大量数据时，乍一看结果似乎还不错。
使用对象。你确保去所有属性的条目:
var arr = [3, 5, 7];
arr.foo = "hello";
for ( var [key, val] of Object.entries( arr ) ) {
console.log( val );
}
/* Result:
3
5
7
hello
*/
