JavaScript对象，如何遍历所有的元素（、、…）并获取它们的键和值？pp1p2p3

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

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

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

分割线

网友回答：

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

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

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

分割线

网友回答：

您可以按照其他人所示使用循环。但是，您还必须确保您获得的键是对象的实际属性，而不是来自原型。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])
}

请注意，如果不使用代替，它将在命名属性上返回 undefined，并确保仅使用对象自己的属性而不使用整个原型链属性for-offor-inObject.keys()

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

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

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

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

分割线

网友回答：

您必须使用 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
}

模板简介：该模板名称为【JavaScript对象，如何遍历所有的元素（、、…）并获取它们的键和值？pp1p2p3】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【JavaScript】栏目查找您需要的精美模板。

JavaScript对象，如何遍历所有的元素 （、、…） 并获取它们的键和值？pp1p2p3

JavaScript对象，如何遍历所有的元素（、、…）并获取它们的键和值？pp1p2p3