web-dev-qa-db-ja.com

For Ofループでのオブジェクトの使用

Forループでオブジェクトを使用できないのはなぜですか？または、これはブラウザのバグですか？このコードはChrome 42では機能しません。未定義は関数ではないということです：

test = { first: "one"}

for(var item of test) {
  console.log(item)
}
javascriptfor-loopecmascript-6iterable
73
Daniel Herr

このコードでオブジェクトを反復可能にしました：

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({})) { }
17
Daniel Herr

for..of loop は、配列のような反復可能なオブジェクトのみをサポートし、オブジェクトはサポートしません。

オブジェクトの値を反復処理するには、次を使用します。

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

次の構文を使用できます。

let myObject = {first: "one"};

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

ただし、 Object.entries 現在、サポートが不十分です IEまたはiOS Safariでは機能しません。おそらく、ポリフィルが必要になります。

33
mpen

キーと値のストアにデータを保存している場合、 Map を使用してください。これはこの目的のために明示的に設計されています。

ただし、オブジェクトを使用する必要がある場合、ES2017（ES8）では Object.values を使用できます。

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

それがまだサポートされていない場合は、ポリフィルを使用します。 Object.values()の代替バージョン

そして最後に、この構文をサポートしない古い環境をサポートしている場合は、forEachおよびObject.keysを使用する必要があります。

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

ECMAScript 2015/ES6の反復子、反復可能、およびfor..ofループ

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、つまり、@@ iteratorに準拠するオブジェクトでのみ動作するため、エラーが発生します- イテレータプロトコル、つまりnextメソッドを持つオブジェクトが必要です。次のメソッドは引数を取らず、これら2つのプロパティを持つオブジェクトを返す必要があります。

完了：trueの場合にシーケンスが終了したことを通知し、falseはさらに値がある可能性があることを意味しますvalue：これはシーケンス内の現在のアイテムです

したがって、オブジェクトを作成するにはIterableつまりfor..ofで動作させることです：

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. 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. Object.keysを使用します。以下にその方法を示します。

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

// a
// b
// c

お役に立てれば！！！！！！

18
Manishz90

オブジェクトリテラルには Symbol.iterator プロパティがないためです。具体的には、 String 、 Array 、 Map 、 Set 、 引数 、 NodeList （広くサポートされていない）、および Generator with for ... of ループ。

オブジェクトリテラルの反復を処理するには、2つのオプションがあります。

〜で…

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

Object.keys + forEach

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

答えは「いいえ」です。オブジェクトリテラルでFor..Ofを使用することはできません。

私は、For..OfがイテラブルのためだけであることにOvervに同意します。 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"
}

したがって、for..In（hasOwnPropertyで検証する）を使用する必要がなく、Object.keys（）を使用する必要がないという目標を達成します。

さらに、キーは文字列に限定されません。数字、オブジェクト、またはその他のリテラルを使用できます。

2
cuadraman

オブジェクトリテラルには、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
2
TheDarkIn1978

与えられたオブジェクトのイテレータを定義することができます。この方法で、オブジェクトごとに異なるロジックを配置できます

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])
}
1
Yaki Klein

私は自分のものを簡単に慰めるために次のことをしました。

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

配列破壊を使用すると、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"
});
0
Nur Rony

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}

これはjsfiddleです。 出力では、"value"および"done"キーを持つオブジェクトを取得します。 "Value"には、必要なものがすべて含まれています。"done"は、boolでの反復の現在の状態です。

0
Serge Nikolaev

Object.keys を使用してキーの配列を取得するのはどうですか？そして forEach on the Array ？

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

使用についてはどうですか

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);
}
0
user1703761