如何循环访问或枚举 JavaScript 对象？

javascript loops for-loop each

2022-08-29 21:47:27

我有一个像这样的JavaScript对象：

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

如何遍历的所有元素（，， ...）并获取它们的键和值？pp1p2p3

答案 1

您可以使用其他人显示的 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 with Object.keys（）替代方案：

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

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

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

使用新的 Object.entries（） 方法：

注意：Internet Explorer 本身不支持此方法。您可以考虑将Polyfill用于较旧的浏览器。

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

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

答案 2

在 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 (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...ofObject.entries

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

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