จะวนซ้ำ (คีย์, ค่า) ในจาวาสคริปต์ได้อย่างไร?


335

ฉันมีพจนานุกรมที่มีรูปแบบของ

dictionary = {0: {object}, 1:{object}, 2:{object}}

ฉันจะทำซ้ำผ่านพจนานุกรมนี้โดยทำสิ่งที่ชอบได้อย่างไร

for((key,value) in dictionary){
  //Do stuff where key would be 0 and value would be the object
}

3
for (let [key, value] of Object.entries(obj))ต้องการ Babel
elclanrs


1
@elclanrs มันอยู่ใน ES2016 และยังไม่ได้มาตรฐาน :-)
thefourtheye

2
เป็นไปได้ที่ซ้ำกันของFor-each over array ใน JavaScript หรือไม่
sdc

@dooagain ไม่ใช่อาร์เรย์ในคำถามนี้
zangw

คำตอบ:


479

TL; DR

  1. ใน ECMAScript 5 เป็นไปไม่ได้
  2. ใน ECMAScript 2015 เป็นไปได้ด้วยMaps
  3. ใน ECMAScript 2017 จะพร้อมให้ใช้งาน

ECMAScript 5:

ไม่มันเป็นไปไม่ได้กับวัตถุ

คุณควรทำซ้ำfor..inหรือObject.keysเช่นนี้

for (var key in dictionary) {
    // check if the property/key is defined in the object itself, not in parent
    if (dictionary.hasOwnProperty(key)) {           
        console.log(key, dictionary[key]);
    }
}

หมายเหตุ:ifเงื่อนไขดังกล่าวข้างต้นเป็นสิ่งที่จำเป็นเท่านั้นถ้าคุณต้องการที่จะย้ำคุณสมบัติที่เป็นdictionaryวัตถุของตัวเองมาก เพราะfor..inจะวนซ้ำทุกคุณสมบัติที่นับได้ที่สืบทอดมา

หรือ

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

ECMAScript 2015

ใน ECMAScript 2015 คุณสามารถใช้Mapวัตถุและทำซ้ำวัตถุเหล่านั้นMap.prototype.entriesได้ ยกตัวอย่างจากหน้านั้น

var myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

var mapIter = myMap.entries();

console.log(mapIter.next().value); // ["0", "foo"]
console.log(mapIter.next().value); // [1, "bar"]
console.log(mapIter.next().value); // [Object, "baz"]

หรือทำซ้ำfor..ofเช่นนี้

'use strict';

var myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

for (const entry of myMap.entries()) {
  console.log(entry);
}

เอาท์พุต

[ '0', 'foo' ]
[ 1, 'bar' ]
[ {}, 'baz' ]

หรือ

for (const [key, value] of myMap.entries()) {
  console.log(key, value);
}

เอาท์พุต

0 foo
1 bar
{} baz

ECMAScript 2017

ECMAScript 2017 Object.entriesจะแนะนำฟังก์ชั่นใหม่ คุณสามารถใช้สิ่งนี้เพื่อย้ำวัตถุตามที่คุณต้องการ

'use strict';

const object = {'a': 1, 'b': 2, 'c' : 3};
for (const [key, value] of Object.entries(object)) {
  console.log(key, value);
}

เอาท์พุต

a 1
b 2
c 3

1
ข้อสงสัยพื้นฐานที่นี่ ฉันลงจอดที่นี่เพื่อค้นหาวิธีการทำใน node.js ซึ่งเป็นจาวาสคริปต์ที่ฝั่งเซิร์ฟเวอร์ ฉันจะรู้ได้อย่างไรว่าเวอร์ชัน ES ใดที่ใช้ในกรณีของฉัน นอกจากนี้ในกรณีของผู้ใช้จาวาสคริปต์ปกติวิธีที่เหมาะสมในการสนับสนุนเมื่อฉันเข้าใจว่าเวอร์ชัน ES ขึ้นอยู่กับเบราว์เซอร์ของลูกค้าคืออะไร
Sandeepan Nath

2
@SandeepanNath คุณสามารถใช้เว็บไซต์เช่นnode.greenเพื่อทราบว่าคุณสมบัติ ES เฉพาะได้รับการสนับสนุนใน Node.js ของคุณ ในกรณีที่เกี่ยวข้องกับเบราว์เซอร์ผู้คนมักกำหนดเป้าหมายเวอร์ชันที่ได้รับการสนับสนุนอย่างกว้างขวางในกรณีนี้ ES5 นอกจากนี้ transpilers (เช่นBabel ) ช่วยแปลงรหัส ES2015 + เป็น ES5
thefourtheye

1
ฉันชอบObject.keys(dictionary).forEach(function(key) {…อ่านและเข้ากันได้มาก
ctrl-alt-delor

6
Object.entries(object).forEach(([key, val]) => {...});
Krimson

โซลูชัน ECMAScript 2015 ด้านบนโยน"TypeScript และ Iterator: ประเภท 'IterableIterator <T>' ไม่ใช่ประเภทของอาร์เรย์"แต่ ol olMap ()ธรรมดาทำงานได้ดี
ttugates

60

ลองสิ่งนี้:

dict = {0:{1:'a'}, 1:{2:'b'}, 2:{3:'c'}}
for (var key in dict){
  console.log( key, dict[key] );
}

0 Object { 1="a"}
1 Object { 2="b"}
2 Object { 3="c"}

42

Object.entries()วิธีการได้รับการระบุไว้ใน ES2017 (และการสนับสนุนในเบราว์เซอร์ที่ทันสมัย ):

for (const [ key, value ] of Object.entries(dictionary)) {
    // do something with `key` and `value`
}

คำอธิบาย:

  • Object.entries()ใช้เวลาเหมือนวัตถุและเปลี่ยนมันเป็นอาร์เรย์ของคู่ค่าคีย์ต่อไปนี้:{ a: 1, b: 2, c: 3 }[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

  • ด้วยfor ... ofเราสามารถวนซ้ำรายการต่างๆของอาร์เรย์ที่สร้างขึ้นได้

  • เนื่องจากเรารับประกันว่ารายการอาร์เรย์ที่มีการวนซ้ำแต่ละตัวนั้นเป็นอาร์เรย์สองรายการเราจึงสามารถใช้การทำลายเพื่อกำหนดตัวแปรโดยตรงkeyและvalueให้กับรายการที่หนึ่งและที่สอง


สิ่งที่น่าเศร้าก็คือคนยังคงใช้ Internet Explorer
Edward

ฉันรู้อย่างเจ็บปวด บาเบลและ polyfill.io แก้ปัญหานี้ แต่มันก็ยังห่างไกลจากความสนุกสนาน
Loilo

19

คุณสามารถทำสิ่งนี้:

dictionary = {'ab': {object}, 'cd':{object}, 'ef':{object}}
var keys = Object.keys(dictionary);

for(var i = 0; i < keys.length;i++){
   //keys[i] for key
   //dictionary[keys[i]] for the value
}

3
สวย! ฉันชอบที่คำตอบของคุณทำงานใน ECMAscript 5 แม้จะมีคำตอบที่ยอมรับและมีผู้โหวตมากที่สุดโดยบอกว่ามันเป็นไปไม่ได้ คุณสมควรได้รับการโหวตมากขึ้นทั้งหมด
liljoshu


9

ยินดีต้อนรับสู่ 2020 * ลดลงใน ES6 *

มีคำตอบที่ค่อนข้างเก่าในที่นี่ - ใช้ประโยชน์จากการทำลายล้าง ในความคิดของฉันนี้ไม่ต้องสงสัยเลยวิธีที่ดีที่สุด (อ่านง่ายมาก) เพื่อย้ำวัตถุ

Object.entries(myObject).forEach(([k,v]) => {
    console.log("The key: ",k)
    console.log("The value: ",v)
})

เพียงบันทึก: ถ้าคุณแทนที่forEachด้วยmapข้างต้นก็เป็นไปได้ที่จะรวมค่า mapจะส่งคืนรายการค่าที่กล่าวถึงซึ่งอาจทำให้รหัสง่ายขึ้นในวิธีอื่น
Lazerbeak12345

4

ฉันคิดว่าวิธีที่ง่ายและรวดเร็วคือ

Object.entries(event).forEach(k => {
    console.log("properties ... ", k[0], k[1]); });

เพียงตรวจสอบเอกสาร https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries


2
ดียิ่งขึ้น: Object.entries (obj) .forEach (([key, value]) => {console.log ( ${key} ${value});});
Hani

1

ใช้ swagger-ui.js

คุณสามารถทำสิ่งนี้ -

_.forEach({ 'a': 1, 'b': 2 }, function(n, key) {
    console.log(n, key);
 });

0

คุณสามารถใช้สคริปต์ด้านล่าง

var obj={1:"a",2:"b",c:"3"};
for (var x=Object.keys(obj),i=0;i<x.length,key=x[i],value=obj[key];i++){
    console.log(key,value);
}

เอาท์พุต
1 a
2 b
c 3


# จะส่งออก #c 3 # 1 a # 2 b
Michael Piper

4
ลองเพิ่มคำอธิบายให้กับคำตอบของคุณการใช้รหัสอย่างเดียวก็มีประโยชน์น้อยกว่า นอกจากนี้คุณสามารถแก้ไขคำตอบของคุณความคิดเห็นไม่ได้มีไว้เพื่อเป็นส่วนขยายของคำตอบในแบบที่คุณใช้
Viktor

0

เพื่อเป็นการปรับปรุงคำตอบที่ได้รับการยอมรับเพื่อลดการซ้อนคุณสามารถทำสิ่งนี้แทนได้หากไม่ได้รับกุญแจ:

for (var key in dictionary) {
    if (!dictionary.hasOwnProperty(key)) {
        continue;
    }
    console.log(key, dictionary[key]);
}

แก้ไข: ข้อมูลเกี่ยวกับObject.hasOwnProperty ที่นี่

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.