如何在javascript中迭代(键,值)?


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)),需要通天塔。
Elclanrs '16


1
@elclanrs它在ES2016中,尚未标准化:-)
thefourtheye


@dooagain,它不是此问题中的数组。
zangw

Answers:


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(服务器端的javascript)中执行此操作。我如何知道哪种ES版本适用于我的情况。另外,对于普通的javascript用户,据我了解ES版本取决于客户端的浏览器,什么是正确的支持方式?
Sandeepan Nath

2
@SandeepanNath您可以使用诸如node.green之类的网站来了解Node.js中是否支持特定的ES功能。就浏览器而言,人们通常以广泛支持的版本(在这种情况下为ES5)为目标。除此之外,编译器(如Babel)还帮助将ES2015 +代码转换为ES5。
thefourtheye

1
我喜欢Object.keys(dictionary).forEach(function(key) {…可读性强并且兼容的软件。
ctrl-alt-delor

5
Object.entries(object).forEach(([key, val]) => {...});
克里姆森


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

我很痛苦地意识到。Babel和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

18

尝试这个:

var value;
for (var key in dictionary) {
    value = dictionary[key];
    // your code here...
}

9

欢迎来到2020年* ES6中的流口水*

这里有一些相当老的答案-利用解构的优势。在我看来,这无疑是迭代对象的最佳方法(可读性最高)。

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

请注意:如果您替换forEachmap上述内容,则可以汇总值。map然后将返回所述值的列表,从而可能以其他方式简化代码。
Lazerbeak12345


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
迈克尔·派珀

4
考虑在回答中添加解释,仅靠代码是没有帮助的。此外,您可以编辑答案,注释并不意味着您在使用它们时会扩展答案
Viktor

0

作为对已接受答案的一种改进,为了减少嵌套,您可以改为执行此操作,前提是不继承键:

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

编辑:关于这里的信息Object.hasOwnProperty

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.