我有一个JavaScript对象,如下所示:
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
我如何循环遍历p的所有元素(p1、p2、p3…)并获取它们的键和值?
我有一个JavaScript对象,如下所示:
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
我如何循环遍历p的所有元素(p1、p2、p3…)并获取它们的键和值?
当前回答
如果还想迭代非可枚举财产,可以使用Object.getOwnPropertyNames(obj)返回直接在给定对象上找到的所有财产(可枚举或不可枚举)的数组。
var obj=对象.创建({}{//不可枚举属性获取食物:{value:函数(){return this.foo;},可枚举:false}});obj.foo=1;//可枚举属性Object.getOwnPropertyNames(obj).forEach(函数(名称){document.write(name+':'+obj[name]+'<br/>');});
其他回答
我在使用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
前言:
对象财产可以是自己的(属性在对象本身上),也可以是继承的(不在对象本身或其原型上)。对象财产可以是可枚举的或非可枚举的。在许多属性枚举/数组中,不包含非数财产。属性名称可以是字符串或符号。许多属性枚举/数组都没有包含名称为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%!重要的}
Object.keys(obj):数组检索所有可枚举自身(非继承)财产的所有字符串值键。
因此,通过使用hasOwnProperty测试每个对象键,它提供了与您想要的相同的键列表。您不需要额外的测试操作,因为Object.keys(obj).forEach(function(key){})应该更快。让我们来证明一下:
var uniqid=函数(){var text=“”,i=0,可能=“ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvxyz”;对于(;i<32;i++){text+=可能的charAt(数学地板(数学随机()*可能的长度));}返回文本;}, 周期=100000,obj={},p1,p2,p3,钥匙//使用随机财产填充对象Array.apply(null,Array(CYCLES)).forEach(function(){obj[uniqid()]=新日期()});//方法#1p1=performance.now();Object.keys(obj).forEach(函数(键){var waste=obj[key];});p2=performance.now();console.log(“Object.keys方法耗时”+(p2-p1)+“毫秒”);//方法#2for(在obj中键入){if(obj.hasOwnProperty(键)){var waste=obj[key];}}p3=performance.now();console.log(“for…in/hasOwnProperty方法花费了”+(p3-p2)+“毫秒”);
在我的Firefox中,我有以下结果
Object.keys方法耗时40.21101451665163毫秒。对于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对映射){console.log(对);}//或let map=新地图([[错误,'否'],[真,'是'],]);map.forEach((value,key)=>{console.log(键,值);});
有趣的是,这些答案中的人都提到了Object.keys()和for。。。但从未组合:
var map = {well:'hello', there:'!'};
for (let key of Object.keys(map))
console.log(key + ':' + map[key]);
你不能只是为了。。。因为它不是迭代器,并且。。。index或.forEach()调用Object.keys()是丑陋/低效的。我很高兴大多数人都没有。。。in(有或没有检查.hasOwnProperty()),因为这也有点混乱,所以除了我上面的答案之外,我想说。。。
您可以使普通对象关联迭代!行为就像地图一样,直接使用了。。。属于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:'!'});
对于那些不喜欢填充,或者不喜欢处理原型的人,可以在窗口上创建函数,然后调用类似于getObjIterator()的函数;
//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:'!'}))
or
for (let pair of getObjIterator(ordinaryObject))
这没有理由不起作用。
欢迎来到未来。
因为提问者的[第二个目标是循环一些键值对],最后不要寻找循环。
var p ={"p1":"value1","p2":"value2","p3":"value3"};
if('p1' in p){
var val=p['p1'];
...
}