在 For Of 循环中使用对象

Question

为什么不能在 for of 循环中使用对象？或者这是一个浏览器错误？此代码在Chrome 42中不起作用，说未定义不是函数：

test = { first: "one"}

for(var item of test) {
  console.log(item)
}

Answer 1

for..of loop只支持数组等可迭代对象，不支持对象。

要遍历对象的值，请使用：

for (var key in test) {
    var item = test[key];
}

Answer 2

如果您将数据存储在键值存储中，please use Map 明确为此目的而设计。

如果你必须使用对象，ES2017 (ES8) 允许你使用 Object.values:

const foo = { a: 'foo', z: 'bar', m: 'baz' };
for (let value of Object.values(foo)) {
    console.log(value);
}

如果尚不支持，请使用 polyfill：

最后，如果您支持不支持此语法的旧环境，您将不得不求助于使用 forEach 和 Object.keys:

var obj = { a: 'foo', z: 'bar', m: 'baz' };
Object.keys(obj).forEach(function (prop) {
    var value = obj[prop];
    console.log(value);
});

Answer 3

因为对象字面量没有 Symbol.iterator property. To be specific, you can only iterate over String, Array, Map, Set, arguments, NodeList(not widely support) and Generator with for...of 循环。

要处理对象字面量迭代，您有两种选择。

对于...在

for(let key in obj){
    console.log(obj[key]); 
}

Object.keys + forEach

Object.keys(obj).forEach(function(key){
    console.log(obj[key]);
});

Answer 4

答案是否定的。不能将 For..Of 与对象文字一起使用。

我同意 Overv 的观点，即 For..Of 仅适用于可迭代对象。我有完全相同的问题，因为我使用对象通过 for..in 迭代键和值。但我刚刚意识到这就是 ES6 MAPS and SETS 的用途。

let test = new Map();
test.set('first', "one");
test.set('second', "two");

for(var item of test) {
  console.log(item); // "one" "two"
}

因此它实现了不必使用 for..In（使用 hasOwnProperty 验证）并且不必使用 Object.keys() 的目标。

此外，您的键不限于字符串。您可以使用数字、对象或其他文字。

Answer 5

我用这段代码使对象可迭代：

Object.prototype[Symbol.iterator] = function*() {
 for(let key of Object.keys(this)) {
  yield([ key, this[key] ])
} }

用法：

for(let [ key, value ] of {}) { }

或者：

for(let [ key, value ] of Object.entries({})) { }

Answer 6

您可以使用以下语法：

const myObject = {
  first: "one",
  second: "two",
};

for (const [key, value] of Object.entries(myObject)) {
  console.log(key, value);  // first one, second two
}

但是，Object.entries ~~has poor support right now~~ does not work in IE ~~or iOS Safari~~. You'll ~~probably~~ might need a polyfill. See https://caniuse.com/mdn-javascript_builtins_object_entries 为最新独家新闻。

另请参阅 Object.keys 以仅迭代键，或 Object.values 以仅迭代值。

Answer 7

使用怎么样

function* entries(obj) {
    for (let key of Object.keys(obj)) {
        yield [key, obj[key]];
    }
}

for ([key, value] of entries({a: "1", b: "2"})) {
    console.log(key + " " + value);
}

Answer 8

对象字面量没有内置的迭代器，而迭代器是使用 for...of 循环所必需的。但是，如果您不想经历将自己的 [Symbol.iterator] 添加到对象的麻烦，您可以简单地使用 Object.keys() 方法。这个方法 returns 一个 Array 对象，它已经有一个内置的迭代器，所以你可以像这样在 for...of 循环中使用它：

const myObject = {
    country: "Canada",
    province: "Quebec",
    city: "Montreal"
}

for (let i of Object.keys(myObject)) {
    console.log("Key:", i, "| Value:", myObject[i]);
}

//Key: country | Value: Canada
//Key: province | Value: Quebec
//Key: city | Value: Montreal

Answer 9

可以在任何给定对象上定义一个迭代器，这样您就可以为每个对象放置不同的逻辑

var x = { a: 1, b: 2, c: 3 }
x[Symbol.iterator] = function* (){
    yield 1;
    yield 'foo';
    yield 'last'
}

然后直接迭代x

for (let i in x){
    console.log(i);
}
//1
//foo
//last

可以在 Object.prototype 对象上做同样的事情并且对所有对象有一个通用的迭代器

Object.prototype[Symbol.iterator] = function*() {
    for(let key of Object.keys(this)) {
         yield key 
    } 
 }

然后像这样迭代你的对象

var t = {a :'foo', b : 'bar'}
for(let i of t){
    console.log(t[i]);
}

或者这样

var it = t[Symbol.iterator](), p;
while(p = it.next().value){
    console.log(t[p])
}

Answer 10

在 ES6 中你可以使用生成器：

var obj = {1: 'a', 2: 'b'};

function* entries(obj) {
  for (let key of Object.keys(obj)) {
    yield [key, obj[key]];
  }
}

let generator = entries(obj);

let step1 = generator.next();
let step2 = generator.next();
let step3 = generator.next();

console.log(JSON.stringify(step1)); // {"value":["1","a"],"done":false}
console.log(JSON.stringify(step2)); // {"value":["2","b"],"done":false}
console.log(JSON.stringify(step3)); // {"done":true}

Here is the jsfiddle. 在输出中，您将获得一个带有 "value" 和 "done" 键的对象。 "Value" 包含您想要它拥有的所有内容，"done" 是 bool 中迭代的当前状态。

Answer 11

Iterator, Iterable and for..of loop in ECMAScript 2015/ ES6

let tempArray = [1,2,3,4,5];

for(element of tempArray) {
  console.log(element);
}

// 1
// 2
// 3
// 4
// 5

但如果我们这样做

let tempObj = {a:1, b:2, c:3};

for(element of tempObj) {
   console.log(element);
}
// error

我们得到错误是因为 for..of 循环仅适用于 Iterables，即具有 [=32] 的对象=]@@iterator 遵守 Iterator 协议，意味着它必须有一个带有 next 方法的对象。下一个方法不接受任何参数，它应该 return 一个具有这两个属性的对象。

done：为true表示序列已经结束，false表示可能还有更多值 value: 这是序列中的当前项

因此，要使对象 Iterable 使其与 for..of 一起工作，我们可以：

1 .通过 @@iterator 属性通过 神秘的 @@iterator 属性使对象成为 Iterable =]Symbol.iterator property.Here是这样的：

let tempObj = {a:1, b:2, c:3};

tempObj[Symbol.iterator]= () => ({
next: function next () {
return {
    done: Object.keys(this).length === 0,
    value: Object.keys(this).shift()
     }
    }
  })

for(key in tempObj){
 console.log(key)
}
// a
// b
// c

2.Use Object.entries，其中 return 是一个 Iterable:

let tempObj = {a:1, b:2, c:3};

for(let [key, value] of Object.entries(tempObj)) {
    console.log(key, value);
}
// a 1
// b 2
// c 3

3.UseObject.keys，方法如下：

let tempObj = {a:1, b:2, c:3};
for (let key of Object.keys(tempObj)) {
    console.log(key);
}

// a
// b
// c

希望对您有所帮助！！！！！！

Answer 12

我只是做了以下事情来轻松地安慰我的东西。

for (let key in obj) {
  if(obj.hasOwnProperty(key){
    console.log(`${key}: ${obj[key]}`);
  }
}

Answer 13

使用Object.keys to get an array of keys? And then forEach on the Array怎么样？

obj = { a: 1, b:2}
Object.keys(obj).forEach( key => console.log(`${key} => ${obj[key]}`))

Answer 14

使用 Array Destruction 您可以使用 forEach

如下迭代它

const obj = { a: 5, b: 7, c: 9 };

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

在 For Of 循环中使用对象

Using Objects in For Of Loops

javascript

for-loop

ecmascript-6

iterable

对于...在

Object.keys + forEach