如何循环或枚举 JavaScript 对象？

Question

我有一个如下所示的 JavaScript 对象：

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

如何循环遍历所有 p 的元素（p1、p2、p3...) 并获取它们的键和值？

Answer 1

在Object.keys()上使用for-of，

例如：

let object = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
};

for (let key of Object.keys(object)) {
  console.log(key + " : " + object[key])
}

Answer 2

您还可以使用 Object.keys() 并迭代对象键，如下所示以获取值：

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Object.keys(p).forEach((key)=> {
 console.log(key +' -> '+ p[key]);
});

Answer 3

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

for (var key in p) {
    if (p.hasOwnProperty(key)) {
        console.log(key + " = " + p[key]);
    }
}

<p>
  Output:<br>
  p1 = values1<br>
  p2 = values2<br>
  p3 = values3
</p>

Answer 4

Object.keys(obj)：数组

检索所有可枚举自有（非继承）属性的所有字符串值键。

因此，通过使用 hasOwnProperty 测试每个对象键，它会给出与您想要的相同的键列表。 您不需要额外的测试操作，并且 Object.keys( obj ).forEach(function( key ){}) 应该更快。 我们来证明一下：

var uniqid = function(){
			var text = "",
					i = 0,
					possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
			for( ; i < 32; i++ ) {
					text += possible.charAt( Math.floor( Math.random() * possible.length ) );
			}
			return text;
		}, 
		CYCLES = 100000,
		obj = {}, 
		p1,
		p2,
		p3,
		key;

// Populate object with random properties
Array.apply( null, Array( CYCLES ) ).forEach(function(){
	obj[ uniqid() ] = new Date()
});

// Approach #1
p1 = performance.now();
Object.keys( obj ).forEach(function( key ){
	var waste = obj[ key ];
});

p2 = performance.now();
console.log( "Object.keys approach took " + (p2 - p1) + " milliseconds.");

// Approach #2
for( key in obj ) {
	if ( obj.hasOwnProperty( key ) ) {
		var waste = obj[ key ];
	}
}

p3 = performance.now();
console.log( "for...in/hasOwnProperty approach took " + (p3 - p2) + " milliseconds.");

在我的 Firefox 中，我得到以下结果

• Object.keys 方法花费了 40.21101451665163 毫秒。
• for...in/hasOwnProperty 方法花费了 98.26163508463651 毫秒。

附言。 在 Chrome 上，差异甚至更大 http://codepen.io/dsheiko/pen/JdrqXa

PS2：在 ES6 (EcmaScript 2015) 中，你可以更好地迭代可迭代对象：

let map = new Map().set('a', 1).set('b', 2);
for (let pair of map) {
    console.log(pair);
}

// OR 
let map = new Map([
    [false, 'no'],
    [true,  'yes'],
]);
map.forEach((value, key) => {
    console.log(key, value);
});

Answer 5

在最新的 ES 脚本中，你可以这样做：

let p = {foo: "bar"};
for (let [key, value] of Object.entries(p)) {
  console.log(key, value);
}

Answer 6

将您的对象传递给 Object.keys()。 这将返回一个包含对象中所有键的数组。 然后，您可以使用 map 循环遍历数组。 使用 obj[key] ，其中 obj 是您的对象，key 是映射迭代中的当前值，您可以获取该键的值/财产。

const obj = { name: "Jane", age: 50 };

Object.keys(obj).map( key => {
    console.log(key, obj[key]);
});

Answer 7

只有没有依赖关系的 JavaScript 代码：

var p = {"p1": "value1", "p2": "value2", "p3": "value3"};
keys = Object.keys(p);   // ["p1", "p2", "p3"]

for(i = 0; i < keys.length; i++){
  console.log(keys[i] + "=" + p[keys[i]]);   // p1=value1, p2=value2, p3=value3
}

Answer 8

Object.keys() 方法返回给定对象自己的可枚举属性的数组。 此处了解更多相关信息

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Object.keys(p).map((key)=> console.log(key + "->" + p[key]))

Answer 9

这是迭代对象的另一种方法。

   var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};


Object.keys(p).forEach(key => { console.log(key, p[key]) })

Answer 10

在 javascript 中迭代对象的多种方式

使用 for...in 循环

 var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};
for (let key in p){
   if(p.hasOwnProperty(key)){
     console.log(`${key} : ${p[key]}`)
   }
}

使用 for...of 循环

 var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};
for (let key of Object.keys(p)){
     console.log(`key: ${key} & value: ${p[key]}`)
}

将 forEach() 与 Object.keys、Object.values、Object.entries

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};
Object.keys(p).forEach(key=>{
   console.log(`${key} : ${p[key]}`);
});
Object.values(p).forEach(value=>{
   console.log(value);
});
Object.entries(p).forEach(([key,value])=>{
    console.log(`${key}:${value}`)
})

Answer 11

使用纯 JavaScript 时，循环可能非常有趣。 似乎只有 ECMA6（新的 2015 JavaScript 规范）才能控制循环。 不幸的是，在我撰写本文时，浏览器和流行的集成开发环境 (IDE) 仍在努力支持完全新的功能。

乍一看，ECMA6 之前的 JavaScript 对象循环是什么样子的：

for (var key in object) {
  if (p.hasOwnProperty(key)) {
    var value = object[key];
    console.log(key); // This is the key;
    console.log(value); // This is the value;
  }
}

另外，我知道这超出了这个问题的范围，但在 2011 年，ECMAScript 5.1 仅为数组添加了 forEach 方法，该方法基本上创建了一种新的改进方法，可以循环遍历数组，同时仍然保留不可迭代对象与旧的冗长且令人困惑的 for 循环。 但奇怪的是，这个新的 forEach 方法不支持 break，这导致了各种其他问题。

基本上在 2011 年，除了许多流行的库（jQuery、Underscore 等）决定重新实现之外，没有真正可靠的 JavaScript 循环方法。

截至 2015 年，我们现在拥有更好的开箱即用方式来循环（和中断）任何对象类型（包括数组和字符串）。 当建议成为主流时，JavaScript 中的循环最终将如下所示：

for (let [key, value] of Object.entries(object)) {
    console.log(key); // This is the key;
    console.log(value); // This is the value;
}

请注意，截至 2016 年 6 月 18 日，大多数浏览器将不支持上述代码。即使在 Chrome 中，您也需要启用此特殊标志才能使其工作：< code>chrome://flags/#enable-javascript-harmony

在这成为新标准之前，旧方法仍然可以使用，但流行库中也有替代方法，甚至 轻量级替代方案，适合那些不使用任何这些库的人。

Answer 12

Object.entries(myObject).map(([key, value]) => console.log(key, value))

你可以这样尝试。 myObject 将是 {name: "", Phone: ""} 如此这般，这将生成键和值。 所以这里的键是name，phone，值就像dog，123123。

示例 {name: "dog"}

这里的键是 name，值是 dog。

Answer 13

您可以向所有对象添加一个简单的forEach函数，这样您就可以自动循环遍历任何对象：

Object.defineProperty(Object.prototype, 'forEach', {
    value: function (func) {
        for (var key in this) {
            if (!this.hasOwnProperty(key)) {
                // skip loop if the property is from prototype
                continue;
            }
            var value = this[key];
            func(key, value);
        }
    },
    enumerable: false
});

对于那些不喜欢“for ... in”的人-method：

Object.defineProperty(Object.prototype, 'forEach', {
    value: function (func) {
        var arr = Object.keys(this);
        for (var i = 0; i < arr.length; i++) {
            var key = arr[i];
            func(key, this[key]);
        }
    },
    enumerable: false
});

现在，您可以简单地调用：

p.forEach (function(key, value){
    console.log ("Key: " + key);
    console.log ("Value: " + value);
});

如果您不想与其他 forEach-Methods 发生冲突，您可以使用您唯一的名称来命名它。

Answer 14

循环可枚举 JavaScript 对象的一个​​好方法是使用 Object.keys 或 Object.entries 并使用 map 功能。 如下所示：

// assume items:

const items = {
  first: { name: 'phone', price: 400 },
  second: { name: 'tv', price: 300 },
  third: { name: 'sofa', price: 250 },
};

用于循环并在 ReactJS 上显示一些 UI，如下所示：

~~~
<div>
  {Object.entries(items).map(([key, ({ name, price })]) => (
    <div key={key}>
     <span>name: {name}</span>
     <span>price: {price}</span>
    </div>
  ))}
</div>

实际上，我使用解构赋值两次，一次用于获取 key 一次用于获取 name< /code> 和价格。

Answer 15

在 ES6 中，我们有众所周知的符号来公开一些以前的内部方法，您可以使用它来定义迭代器如何为此对象工作：

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3",
    *[Symbol.iterator]() {
        yield *Object.keys(this);
    }
};

[...p] //["p1", "p2", "p3"]

这将给出与在 es6 循环中使用 for... 相同的结果。

for(var key in p) {
    console.log(key);
}

但了解您现在使用 es6 拥有的功能很重要！

Answer 16

我会这样做，而不是在每个 for ... in 循环中检查 obj.hasOwnerProperty 。

var obj = {a : 1};
for(var key in obj){
    //obj.hasOwnProperty(key) is not needed.
    console.log(key);
}
//then check if anybody has messed the native object. Put this code at the end of the page.
for(var key in Object){
    throw new Error("Please don't extend the native object");
}

Answer 17

您可以使用 for- in 循环，如其他人所示。 但是，您还必须确保您获得的密钥是对象的实际属性，而不是来自原型。

这是片段：

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

for (var key in p) {
    if (p.hasOwnProperty(key)) {
        console.log(key + " -> " + p[key]);
    }
}

For-of 与 Object.keys() 替代方案：

var p = {
    0: "value1",
    "b": "value2",
    key: "value3"
};

for (var key of Object.keys(p)) {
    console.log(key + " -> " + p[key])
}

请注意 for- 的使用 而不是 for-in，如果不使用，它将在命名属性上返回未定义，并且 Object.keys() 确保仅使用对象自己的属性，而不使用整个原型链属性

使用新的对象。 Entry() 方法：

注意： Internet Explorer 本身不支持此方法。 您可以考虑为旧版浏览器使用 Polyfill。

const p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

for (const [key, value] of Object.entries(p)) {
  console.log(`${key}: ${value}`);
}

Answer 18

在 ECMAScript 5 下，您可以组合 Object .keys() 和 Array.prototype.forEach()：

var obj = { first: "John", last: "Doe" };

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

ECMAScript 6 添加了 for...of：

for (const key of Object.keys(obj)) {
    console.log(key, obj[key]);
}

ECMAScript 8 添加了 Object.entries() 这避免了查找中的每个值原始对象：

Object.entries(obj).forEach(
    ([key, value]) => console.log(key, value)
);

您可以组合 for...of、解构和 Object.entries：

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

Object.keys() 和 Object.entries() 以与 for...in 循环相同的顺序迭代属性，但忽略原型链。 仅迭代对象自身的可枚举属性。

Answer 19

你必须使用for-in循环，

但是使用这种循环时要非常小心，因为这会循环原型链上的所有属性。

因此，在使用 for-in 循环时，请始终使用 hasOwnProperty 方法来确定迭代中的当前属性是否确实是您正在检查的对象的属性：

for (var prop in p) {
    if (!p.hasOwnProperty(prop)) {
        //The current property is not a direct property of p
        continue;
    }
    //Do your logic with the property here
}

Answer 20

如果我们不提及循环对象的替代方法，这个问题就不会完整。

如今，许多著名的 JavaScript 库都提供了自己的方法来迭代集合，即数组、对象和类数组对象。 这些方法使用起来很方便，并且完全兼容任何浏览器。

1. 如果您使用jQuery，则可以使用jQuery。 each() 方法。 它可用于无缝迭代对象和数组：

   $.each(obj, 函数(键, 值) { 
         控制台.log（键，值）； 
     }); 
     

2. 在 Underscore.js 中，您可以找到方法 _.each()，它迭代元素列表，依次将每个元素生成提供的函数（注意 iteratee< 中参数的顺序/em> 函数！）：

   _.each(obj, 函数(值, 键) { 
         控制台.log（键，值）； 
     }); 
     

3. < p>Lo-Dash 提供了多种迭代对象属性的方法。 基本 _.forEach() （或其别名 _.each ()) 对于循环对象和数组很有用，但是 (!) 具有 length 属性的对象被视为数组，为了避免这种行为，建议使用 _.forIn() 和 _.forOwn() 方法（这些方法也有 value 参数在前）：

   _.forIn(obj, 函数(值, 键) { 
         控制台.log（键，值）； 
     }); 
     

   _.forIn() 迭代对象的自己的和继承的可枚举属性，而 _.forOwn() 仅迭代< em>自己的对象的属性（基本上检查hasOwnProperty函数）。 对于简单对象和对象文字，这些方法中的任何一个都可以正常工作。

一般来说，所有描述的方法与任何提供的对象都具有相同的行为。 除了使用本机 for..in 循环通常比任何抽象（例如 jQuery.each()）更快之外，这些方法也更加简单使用时，需要更少的编码并提供更好的错误处理。

Answer 21

前言：

• 对象属性可以是自己的（该属性位于对象本身）或继承（不在对象本身上，而是在其原型之一上）。
• 对象属性可以是可枚举或不可枚举。 不可枚举的属性被排除在许多属性枚举/数组之外。
• 属性名称可以是字符串或符号。 名称为 Symbols 的属性被排除在许多属性枚举/数组之外。

在 2018 年，循环访问对象属性的选项是（列表后面有一些示例）：

1. for-in [MDN, spec] — 循环结构，循环遍历对象的可枚举属性的名称，包括继承的属性，其名称为字符串
2. Object.keys [MDN，规范 ] — 一个函数，提供对象的自己、可枚举属性（其名称为字符串）的名称数组。
3. Object.values [MDN, spec] — 提供对象自己的值数组，可枚举属性。
4. Object.entries [MDN, spec] — 提供对象的自身、可枚举属性的名称​​和值数组（数组中的每个条目都是[name, value] 数组）。
5. Object.getOwnPropertyNames [MDN, spec] — 提供对象的自己属性（甚至是不可枚举的属性）的名称数组，其名称是字符串。
6. Object.getOwnPropertySymbols [MDN, spec] — 提供对象的自己属性（甚至是不可枚举的属性）的名称数组，其名称为 Symbols。
7. Reflect.ownKeys [MDN, spec] — 提供对象自己的属性（甚至是不可枚举的属性）的名称数组，无论这些名称是字符串还是符号。
8. 如果您想要对象的所有属性，包括不可枚举的继承属性，则需要使用循环和Object.getPrototypeOf [MDN，spec] 并使用 Object.getOwnPropertyNames、Object.getOwnPropertySymbols 或 Reflect.ownKeys< /code> 原型链中的每个对象（示例位于本答案的底部）。

除了 for-in 之外的所有这些，您都可以在数组上使用某种循环构造（for、for-of、<代码>forEach等）。

示例：

for-in：

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name in o) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.keys （使用 for-of 循环，但您可以使用任何循环结构）：

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.keys(o)) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.values：

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const value of Object.values(o)) {
    console.log(`${value}`);
}

Object.entries：

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const [name, value] of Object.entries(o)) {
    console.log(`${name} = ${value}`);
}

Object.getOwnPropertyNames：

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertyNames(o)) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.getOwnPropertySymbols：

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertySymbols(o)) {
    const value = o[name];
    console.log(`${String(name)} = ${value}`);
}

Reflect.ownKeys：

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Reflect.ownKeys(o)) {
    const value = o[name];
    console.log(`${String(name)} = ${value}`);
}

所有属性，包括继承的不可枚举属性：

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (let depth = 0, current = o; current; ++depth, current = Object.getPrototypeOf(current)) {
    for (const name of Reflect.ownKeys(current)) {
        const value = o[name];
        console.log(`[${depth}] ${String(name)} = ${String(value)}`);
    }
}

.as-console-wrapper {
  max-height: 100% !important;
}

Answer 22

您可以像这样迭代它：

for (var key in p) {
  alert(p[key]);
}

请注意，key 不会采用属性的值，它只是一个索引值。

Answer 23

在 ECMAScript 5 中，您在文字迭代字段中采用了新方法 - Object.keys

您可以在 MDN

我的选择如下，作为当前版本浏览器（Chrome30、IE10、FF25）中更快的解决方案，

var keys = Object.keys(p),
    len = keys.length,
    i = 0,
    prop,
    value;
while (i < len) {
    prop = keys[i];
    value = p[prop];
    i += 1;
}

您可以比较此方法的性能jsperf.com 上有不同的实现：

• 扩展实现
• 对象键迭代
• 对象文字迭代

您可以在 Kangax 的兼容表

对于旧浏览器，您有 简单 和 完整 polyfill

UPD：

在 perfjs.info 上这个问题中所有最常见案例的性能比较：

对象文字迭代

Answer 24

今天的性能

2020.03.06 我在 MacOs High Sierra v10.13.6 上的 Chrome v80.0、Safari v13.0.5 和 Firefox 73.0.1 上对所选解决方案进行了测试

结论

• 基于 for-in 的 解决方案 (A, B) 对于所有浏览器来说，对于大小对象都很快（或最快），
• 大小对象
• 令人惊讶的是 for-of (H) 解决方案在 chrome 上速度很快，对于基于显式索引的 解决方案 i< /code> (J,K) 在所有浏览器上对于小对象都相当快（对于 firefox 对于大对象也很快，但在其他浏览器上中等快）
• 基于迭代器 (D,E) 的解决方案是最慢的，不推荐
• 解决方案 C 很慢对于大对象，中慢速对于小对象

详细信息

针对小对象执行了性能测试

• - 有 3 个字段 - 您可以在您的机器上执行测试 此处
• “大”对象 - 具有 1000 个字段 - 您可以在您的计算机上执行测试 此处

下面的代码片段展示了使用过的解决方案

function A(obj,s='') {
	for (let key in obj) if (obj.hasOwnProperty(key)) s+=key+'->'+obj[key] + ' ';
  return s;
}

function B(obj,s='') {
	for (let key in obj) s+=key+'->'+obj[key] + ' ';
  return s;
}

function C(obj,s='') {
  const map = new Map(Object.entries(obj));
	for (let [key,value] of map) s+=key+'->'+value + ' ';
  return s;
}

function D(obj,s='') {
  let o = { 
    ...obj,
    *[Symbol.iterator]() {
      for (const i of Object.keys(this)) yield [i, this[i]];    
    }
  }
  for (let [key,value] of o) s+=key+'->'+value + ' ';
  return s;
}

function E(obj,s='') {
  let o = { 
    ...obj,
    *[Symbol.iterator]() {yield *Object.keys(this)}
  }
  for (let key of o) s+=key+'->'+o[key] + ' ';
  return s;
}

function F(obj,s='') {
	for (let key of Object.keys(obj)) s+=key+'->'+obj[key]+' ';
  return s;
}

function G(obj,s='') {
	for (let [key, value] of Object.entries(obj)) s+=key+'->'+value+' ';
  return s;
}

function H(obj,s='') {
	for (let key of Object.getOwnPropertyNames(obj)) s+=key+'->'+obj[key]+' ';
  return s;
}

function I(obj,s='') {
	for (const key of Reflect.ownKeys(obj)) s+=key+'->'+obj[key]+' ';
  return s;
}

function J(obj,s='') {
  let keys = Object.keys(obj);
	for(let i = 0; i < keys.length; i++){
    let key = keys[i];
    s+=key+'->'+obj[key]+' ';
  }
  return s;
}

function K(obj,s='') {
  var keys = Object.keys(obj), len = keys.length, i = 0;
  while (i < len) {
    let key = keys[i];
    s+=key+'->'+obj[key]+' ';
    i += 1;
  }
  return s;
}

function L(obj,s='') {
  Object.keys(obj).forEach(key=> s+=key+'->'+obj[key]+' ' );
  return s;
}

function M(obj,s='') {
  Object.entries(obj).forEach(([key, value]) => s+=key+'->'+value+' ');
  return s;
}

function N(obj,s='') {
  Object.getOwnPropertyNames(obj).forEach(key => s+=key+'->'+obj[key]+' ');
  return s;
}

function O(obj,s='') {
  Reflect.ownKeys(obj).forEach(key=> s+=key+'->'+obj[key]+' ' );
  return s;
}



// TEST

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};
let log = (name,f) => console.log(`${name} ${f(p)}`)

log('A',A);
log('B',B);
log('C',C);
log('D',D);
log('E',E);
log('F',F);
log('G',G);
log('H',H);
log('I',I);
log('J',J);
log('K',K);
log('L',L);
log('M',M);
log('N',N);
log('O',O);

This snippet only presents choosen solutions

以下是 chrome 上小对象的结果

Answer 25

for(key in p) {
  alert( p[key] );
}

注意：您可以对数组执行此操作，但您也将迭代 length 和其他属性。

Answer 26

由于 es2015 变得越来越流行，我发布了这个答案，其中包括使用生成器和迭代器来平滑地迭代 [key, value] 对。 这在其他语言中也是可能的，例如 Ruby。

好的，这是一个代码：

const MyObject = {
  'a': 'Hello',
  'b': 'it\'s',
  'c': 'me',
  'd': 'you',
  'e': 'looking',
  'f': 'for',
  [Symbol.iterator]: function*() {
    for (const i of Object.keys(this)) {
      yield [i, this[i]];
    }
  }
};

for (const [k, v] of MyObject) {
  console.log(`Here is key ${k} and here is value ${v}`);
}

有关如何创建迭代器和生成器的所有信息都可以在 Mozilla 开发者页面找到。

希望它对某人有帮助。

编辑：

ES2017 将包含 Object.entries，这将使迭代对象中的 [key, value] 对变得更加容易。 现在已知它将成为 ts39 标准的一部分阶段信息。

我认为是时候更新我的答案，让它变得比现在更加新鲜。

const MyObject = {
  'a': 'Hello',
  'b': 'it\'s',
  'c': 'me',
  'd': 'you',
  'e': 'looking',
  'f': 'for',
};

for (const [k, v] of Object.entries(MyObject)) {
  console.log(`Here is key ${k} and here is value ${v}`);
}

您可以在以下位置找到有关使用的更多信息
MDN 页面

Answer 27

单行和更具可读性的代码可以是..

Object.entries(myObject).map(([key, value]) => console.log(key, value))

Answer 28

浏览完这里的所有答案后，我自己的使用不需要 hasOwnProperty ，因为我的 json 对象是干净的； 添加任何额外的 javascript 处理确实没有任何意义。 这就是我正在使用的全部：

for (var key in p) {
    console.log(key + ' => ' + p[key]);
    // key is key
    // value is p[key]
}

Answer 29

通过 prototype 和 forEach() ，它应该跳过 prototype chain 属性：

Object.prototype.each = function(f) {
    var obj = this
    Object.keys(obj).forEach( function(key) { 
        f( key , obj[key] ) 
    });
}


//print all keys and values
var obj = {a:1,b:2,c:3}
obj.each(function(key,value) { console.log(key + " " + value) });
// a 1
// b 2
// c 3

Answer 30

有趣的是，这些答案中的人们都触及了 Object.keys() 和 for...of 但从未将它们组合起来：

var map = {well:'hello', there:'!'};
for (let key of Object.keys(map))
    console.log(key + ':' + map[key]);

_{你不能只是 for...of 一个 Object 因为它不是迭代器，而 for...index 或 .forEach() Object.keys() 很丑陋/效率低下。
我很高兴大多数人都避免使用 for...in （无论是否检查 .hasOwnProperty()），因为这也有点混乱，所以除了我的答案上面，我在这里想说的是...}

---

你可以让普通的对象关联迭代！ 行为就像 Map 一样，直接使用花哨的 for...of
DEMO 在 Chrome 和 FF 中工作（我假设仅限 ES6）

var ordinaryObject = {well:'hello', there:'!'};
for (let pair of ordinaryObject)
    //key:value
    console.log(pair[0] + ':' + pair[1]);

//or
for (let [key, value] of ordinaryObject)
    console.log(key + ':' + value);

只要你在下面包含我的垫片：

//makes all objects iterable just like Maps!!! YAY
//iterates over Object.keys() (which already ignores prototype chain for us)
Object.prototype[Symbol.iterator] = function() {
    var keys = Object.keys(this)[Symbol.iterator]();
    var obj = this;
    var output;
    return {next:function() {
        if (!(output = keys.next()).done)
            output.value = [output.value, obj[output.value]];
        return output;
    }};
};

无需创建一个没有良好语法糖的真实 Map 对象。

var trueMap = new Map([['well', 'hello'], ['there', '!']]);
for (let pair of trueMap)
    console.log(pair[0] + ':' + pair[1]);

事实上，有了这个垫片，如果您仍然想利用 Map 的其他功能（无需将它们全部填充），但仍想使用简洁的对象表示法，因为对象现在是可迭代的，您现在可以从中创建一个 Map！

//shown in demo
var realMap = new Map({well:'hello', there:'!'});

---

对于那些不喜欢填充或乱搞 prototype 的人，请随意在窗口上创建该函数，将其称为 getObjIterator() > then;

//no prototype manipulation
function getObjIterator(obj) {
    //create a dummy object instead of adding functionality to all objects
    var iterator = new Object();

    //give it what the shim does but as its own local property
    iterator[Symbol.iterator] = function() {
        var keys = Object.keys(obj)[Symbol.iterator]();
        var output;

        return {next:function() {
            if (!(output = keys.next()).done)
                output.value = [output.value, obj[output.value]];
            return output;
        }};
    };

    return iterator;
}

现在你可以将它作为普通函数调用，其他任何事情都不会受到影响

var realMap = new Map(getObjIterator({well:'hello', there:'!'}))

或者

for (let pair of getObjIterator(ordinaryObject))

没有理由为什么那行不通。

欢迎来到未来。