Javascript 在 For Of 循环中使用对象

Using Objects in For Of Loops

提问by Daniel Herr

Why isn't is possible to use objects in for of loops? Or is this a browser bug? This code doesn't work in Chrome 42, saying undefined is not a function:

为什么不能在 for of 循环中使用对象？或者这是浏览器的错误？此代码在 Chrome 42 中不起作用，表示 undefined 不是函数：

test = { first: "one"}

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

采纳答案by Daniel Herr

I made objects iterable with this code:

我使用以下代码使对象可迭代：

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

Usage:

用法：

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

Alternativly:

或者：

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

回答by Overv

The for..of looponly supports iterable objects like arrays, not objects.

该for..of环路仅支持像数组可迭代的对象，而不是对象。

To iterate over the values of an object, use:

要迭代对象的值，请使用：

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

回答by mpen

You can use this syntax:

您可以使用以下语法：

let myObject = {first: "one"};

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

However, Object.entrieshas poor support right nowdoes not work in IE or iOS Safari. You'll probablymight need a polyfill.

然而， Object.entries现在支持很差在 IE 中不起作用 或 iOS Safari. 你会大概可能需要一个 polyfill。

回答by Qantas 94 Heavy

If you are storing data in a key-value store, please use Mapwhich is explicitly designed for this purpose.

如果您将数据存储在键值存储中，请使用Map专为此目的而设计的。

If you have to use an object though, ES2017 (ES8) allows you to use Object.values:

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

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

If that isn't supported yet, use a polyfill: Alternative version for Object.values()

如果尚不支持，请使用 polyfill: Alternative version forObject.values()

And finally if you're supporting an older environment that don't support this syntax, you'll have to resort to using forEachand Object.keys:

最后，如果您支持不支持此语法的旧环境，则必须求助于使用forEachand Object.keys：

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

回答by Manishz90

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

ECMAScript 2015/ES6 中的迭代器、可迭代和 for..of 循环

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

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

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

But if we do

但是如果我们这样做

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

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

We get error because for..ofloop works only on Iterables, that is, the object which has an @@iteratorthat adheres to Iterator protocol, meaning it must have an object with a nextmethod. The next method takes no arguments and it should return an object with these two properties.

我们得到错误是因为for..of循环仅适用于Iterables，即具有遵循Iterator 协议的@@iterator的对象，这意味着它必须具有一个带有next方法的对象。next 方法没有参数，它应该返回一个具有这两个属性的对象。

done: signals that the sequence has ended when true, and false means there may be more values value: this is the current item in the sequence

done: 当为真时表示序列已经结束，假意味着可能有更多的值 value：这是序列中的当前项目

So, to make an object Iterablethat is to make it work with for..ofwe can:

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

1 .Make an object an Iterableby assigning to it's mystical @@iteratorproperty through the Symbol.iteratorproperty.Here is how:

1 . 通过Symbol.iterator属性分配给它神秘的@@iterator属性，使一个对象成为一个Iterable。这里是如何：

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, which returns an Iterable:

2.使用Object.entries，它返回一个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.Use Object.keys, here is how:

3.使用Object.keys，方法如下：

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

// a
// b
// c

Hope this helps!!!!!!

希望这可以帮助！！！！！！

回答by Lewis

Because object literal does not have the Symbol.iteratorproperty. To be specific, you can only iterate over String, Array, Map, Set, arguments, NodeList(not widely support) and Generatorwith for...ofloop.

因为对象字面量没有Symbol.iterator属性。具体来说，您只能使用for...of循环迭代String、Array、Map、Set、arguments、NodeList（不广泛支持）和 Generator。

To deal with Object Literal iteration, you have two options.

要处理 Object Literal 迭代，您有两种选择。

for...in

因为...在

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

Object.keys + forEach

Object.keys + forEach

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

回答by cuadraman

The answer is No. It's not possible to use For..Of with Object literals.

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

I agree with Overv that For..Of is only for iterables. I had exactly the same question because I use Objects to iterate over keys and values with for..in. But I just realized that that's what ES6 MAPSand SETSare for.

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

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

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

Hence it achieves the goal of not having to use for..In (validating with hasOwnProperty) and not having to use Object.keys().

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

Additionally, your keys aren't limited to strings. You can use numbers, objects, or other literals.

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

回答by TheDarkIn1978

Object literals don't have built-in iterators, which are required to work with for...ofloops. However, if you don't want to go thru the trouble of adding your own [Symbol.iterator]to your object, you can simply use the Object.keys()method. This method returns an Arrayobject, which already has a built-in iterator, so you can use it with a for...ofloop like this:

对象字面量没有内置迭代器，这是使用for...of循环所必需的。但是，如果您不想麻烦地将自己[Symbol.iterator]的对象添加到对象中，则可以简单地使用该Object.keys()方法。这个方法返回一个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

回答by Yaki Klein

It is possible to define an iterator over any giving object, this way you can put different logic for each object

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

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

Then just directly iterate x

然后直接迭代 x

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

It is possible to do the same thing on the Object.prototypeobject And have a general iterator for all objects

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

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

then iterate your object like this

然后像这样迭代你的对象

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

Or this way

或者这样

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

回答by DaFrenzy

I just did the following to easily console out my stuff.

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

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