我有一个JavaScript对象,如下所示:

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

我如何循环遍历p的所有元素(p1、p2、p3…)并获取它们的键和值?


当前回答

有两个选项:

您可以使用。。在那里

变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};for(p中的常量项){console.log(`key=${item},value=${p[item]}`);}

您还可以调用Object.entries()来创建一个包含所有可枚举财产的数组。之后,您可以使用map、foreach或for循环浏览它。。属于

变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};Object.entries(p).map(item=>{console.log(项)})

变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};Object.entries(p).forEach(item=>{console.log(项)})

变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};for(Object.entries(p)的常量项){console.log(项)}

有关Object.entries()的更多信息,请参见此处

其他回答

在ECMAScript 5下,可以组合Object.keys()和Array.protocol.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)
);

你可以组合。。。of、destructuring和Object.entries:

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

Object.keys()和Object.entries()以与for相同的顺序迭代财产。。。但忽略原型链。只迭代对象自己的可枚举财产。

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

注意:可以对数组执行此操作,但也要对长度和其他财产进行迭代。

变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};var myMap=新地图(Object.entries(p));for(let[k,v]of myMap.entries()){console.log(`${k}:${v}`)}<h3>ECMAScript 2017年</h3><p><b>Object.entries()</b>使将<b>对象转换为映射</b>变得简单:</p>

前言:

对象财产可以是自己的(属性在对象本身上),也可以是继承的(不在对象本身或其原型上)。对象财产可以是可枚举的或非可枚举的。在许多属性枚举/数组中,不包含非数财产。属性名称可以是字符串或符号。许多属性枚举/数组都没有包含名称为Symbol的财产。

2018年,您可以选择循环访问对象的财产(以下是一些示例):

for-in[MDN,spec]-一种循环结构,循环遍历对象的可枚举财产的名称,包括名称为字符串的继承属性keys[MDN,spec]-一个函数,提供对象自己的可枚举财产的名称数组,这些属性的名称是字符串。Object.values[MDN,spec]-提供对象自身可枚举财产值数组的函数。Object.entries[MDN,spec]-提供对象自身可枚举财产的名称和值数组的函数(数组中的每个条目都是[name,value]数组)。Object.getOwnPropertyNames[MDN,spec]-一个函数,提供对象自己的财产(即使是不可枚举的属性)的名称数组,这些属性的名称是字符串。Object.getOwnPropertySymbols[MDN,spec]-一个函数,提供对象自己的财产(即使是不可枚举的属性)的名称数组,其名称为Symbols。Reflect.ownKeys[MDN,spec]-一个函数,提供对象自己的财产(即使是非枚举属性)的名称数组,无论这些名称是字符串还是符号。如果需要对象的所有财产,包括非枚举继承的属性,则需要使用循环和object.getPrototypeOf[MDN,spec],并在原型链中的每个对象上使用object.getOwnPropertyNames、object.getOwnPropertySymbols或Reflect.ownKeys(此答案底部的示例)。

对于除in之外的所有元素,您将在数组上使用某种循环构造(for、for、forEach等)。

示例:

中的:

//要从中继承的原型对象,具有名为property的字符串常量p={answer:42};//我们将看到的对象继承自`p`const o=对象创建(p);//名为property的字符串o.question=“生命、宇宙和一切”;//名为属性的符号o[Symbol(“author”)]=“Douglas Adams”;for(o中的常量名称){常量值=o[名称];console.log(`${name}=${value}`);}

Object.keys(带有for of循环,但可以使用任何循环构造):

//要从中继承的原型对象,具有名为property的字符串常量p={answer:42};//我们将看到的对象继承自`p`const o=对象创建(p);//名为property的字符串o.question=“生命、宇宙和一切”;//名为属性的符号o[Symbol(“author”)]=“Douglas Adams”;for(Object.keys(o)的常量名称){常量值=o[名称];console.log(`${name}=${value}`);}

对象值:

//要从中继承的原型对象,具有名为property的字符串常量p={answer:42};//我们将看到的对象继承自`p`const o=对象创建(p);//名为property的字符串o.question=“生命、宇宙和一切”;//名为属性的符号o[Symbol(“author”)]=“Douglas Adams”;for(Object.values(o)的常量值){console.log(`${value}`);}

对象条目:

//要从中继承的原型对象,具有名为property的字符串常量p={answer:42};//我们将看到的对象继承自`p`const o=对象创建(p);//名为property的字符串o.question=“生命、宇宙和一切”;//名为属性的符号o[Symbol(“author”)]=“Douglas Adams”;for(Object.entries(o)的常量[名称,值]){console.log(`${name}=${value}`);}

Object.getOwnPropertyName:

//要从中继承的原型对象,具有名为property的字符串常量p={answer:42};//我们将看到的对象继承自`p`const o=对象创建(p);//名为property的字符串o.question=“生命、宇宙和一切”;//名为属性的符号o[Symbol(“author”)]=“Douglas Adams”;for(Object.getOwnPropertyNames(o)的常量名称){常量值=o[名称];console.log(`${name}=${value}`);}

Object.getOwnPropertySymbols:

//要从中继承的原型对象,具有名为property的字符串常量p={answer:42};//我们将看到的对象继承自`p`const o=对象创建(p);//名为property的字符串o.question=“生命、宇宙和一切”;//名为属性的符号o[Symbol(“author”)]=“Douglas Adams”;for(Object.getOwnPropertySymbol(o)的常量名称){常量值=o[名称];console.log(`${String(name)}=${value}`);}

反射所有键:

//要从中继承的原型对象,具有名为property的字符串常量p={answer:42};//我们将看到的对象继承自`p`const o=对象创建(p);//名为property的字符串o.question=“生命、宇宙和一切”;//名为属性的符号o[Symbol(“author”)]=“Douglas Adams”;for(Reflect.ownKeys(o)的常量名称){常量值=o[名称];console.log(`${String(name)}=${value}`);}

所有财产,包括继承的非枚举属性:

//要从中继承的原型对象,具有名为property的字符串常量p={answer:42};//我们将看到的对象继承自`p`const o=对象创建(p);//名为property的字符串o.question=“生命、宇宙和一切”;//名为属性的符号o[Symbol(“author”)]=“Douglas Adams”;for(让深度=0,当前=o;当前;++深度,当前=Object.getPrototypeOf(当前)){for(Reflect.ownKeys(当前)的常量名称){常量值=o[名称];console.log(`[${depth}]${String(name)}=${字符串(value)}`);}}.作为控制台包装{最大高度:100%!重要的}

我在使用Angular时遇到了类似的问题,这里是我找到的解决方案。

步骤1。获取所有对象关键点。使用Object.keys。此方法返回给定对象自己的可枚举财产的数组。

步骤2。创建一个空数组。这是所有财产都将存在的地方,因为您的新ngFor循环将指向此数组,所以我们必须捕获所有属性。步骤3。迭代抛出所有键,并将每个键推入您创建的数组中。这是代码中的样子。

    // Evil response in a variable. Here are all my vehicles.
let evilResponse = { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}
// Step 1. Get all the object keys.
let evilResponseProps = Object.keys(evilResponse);
// Step 2. Create an empty array.
let goodResponse = [];
// Step 3. Iterate throw all keys.
for (prop of evilResponseProps) { 
    goodResponse.push(evilResponseProps[prop]);
}

这里是原始帖子的链接。https://medium.com/@papponmx/循环对象属性-带ngfor-in-angular-869cd7b2ddcc