我有一个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…)并获取它们的键和值?
当前回答
方法返回给定对象自己的可枚举财产的数组。在此处阅读更多信息
变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};Object.keys(p).map((key)=>console.log(key+“->”+p[key]))
其他回答
在ECMAScript 5中,在literal-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上此问题中所有最常见情况的性能比较:
对象文字迭代
var p=[{“用户名”:“ordermanageadmin”,“user_id”:“2”,“resource_id”“Magento_Sales::actions”},{“用户名”:“ordermanageadmin_1”,“user_id”:“3”,“resource_id”“Magento_Sales::actions”}]for(p中的var值){for(值中的var键){if(p.hasOwnProperty(键)){console.log(键+“->”+p[key]);}}}
自ES2015以来,您可以使用for of循环直接访问元素:
// before ES2015
for(var key of elements){
console.log(elements[key]);
}
// ES2015
for(let element of elements){
console.log(element);
}
希望这对某人有所帮助。
表演
今天2020.03.06我在MacOs High Sierra v10.13.6上对Chrome v80.0、Safari v13.0.5和Firefox 73.0.1上选择的解决方案进行了测试
结论
基于(A,B)中for的解决方案对于大小对象的所有浏览器都是快速的(或最快的)令人惊讶的是,对于小型和大型物体,of(H)解决方案在铬上的速度很快基于显式索引i(J,K)的解决方案在所有浏览器上对于小对象都非常快(对于firefox,对于大对象也很快,但在其他浏览器上则很快)基于迭代器(D,E)的解决方案是最慢的,不推荐解决方案C对于大对象是慢的,对于小对象是中等慢的
细节
进行了性能测试
小对象-有3个字段-您可以在这里对机器进行测试“大”对象-有1000个字段-您可以在这里的机器上执行测试
以下片段介绍了使用过的解决方案
函数A(obj,s=“”){for(let key in obj)if(obj.hasOwnProperty(key))s+=key+'->'+obj[key]+'';返回s;}函数B(obj,s=“”){for(let key in obj)s+=key+“->”+obj[key]+“”;返回s;}函数C(obj,s=“”){const map=新映射(Object.entries(obj));for(let[key,value]of map)s+=key+'->'+value+'';返回s;}函数D(obj,s=“”){设o={…对象,*[符号迭代器](){for(Object.keys(this)的常量i)yield[i,this[i]];}}for(设o的[key,value])s+=key+'->'+value+'';返回s;}函数E(obj,s=“”){设o={…对象,*[Symbol.iiterator](){yield*Object.keys(this)}}for(let key of o)s+=key+'->'+o[key]+'';返回s;}函数F(obj,s=“”){for(let key of Object.keys(obj))s+=键+“->”+obj[key]+“”;返回s;}函数G(obj,s=“”){for(let[key,value]of Object.entries(obj))s+=键+“->”+值+“”;返回s;}函数H(obj,s=“”){for(let key of Object.getOwnPropertyNames(obj))s+=key+'->'+obj[key]+'';返回s;}函数I(obj,s=“”){for(Reflect.ownKeys(obj)的常量键)s+=key+'->'+obj[key]+'';返回s;}函数J(obj,s=“”){let keys=Object.keys(obj);for(设i=0;i<keys.length;i++){let key=键[i];s+=键+“->”+obj[key]+“”;}返回s;}函数K(obj,s=“”){var keys=对象密钥(obj),len=密钥长度,i=0;而(i<len){let key=键[i];s+=键+“->”+obj[key]+“”;i+=1;}返回s;}函数L(obj,s=“”){Object.keys(obj).forEach(key=>s+=key+'->'+obj[key]+'');返回s;}函数M(obj,s=“”){Object.entries(obj).forEach(([key,value])=>s+=key+'->'+value+'');返回s;}函数N(obj,s=“”){Object.getOwnPropertyNames(obj).forEach(key=>s+=key+'->'+obj[key]+'');返回s;}函数O(obj,s=“”){Reflect.ownKeys(obj).forEach(key=>s+=key+'->'+obj[key]+'');返回s;}//测试变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};let log=(name,f)=>console.log(`${name}${f(p)}`)日志('A',A);日志('B',B);日志('C',C);日志('D',D);对数('E',E);日志('F',F);日志('G',G);对数('H',H);日志('I',I);日志('J',J);log('K',K);对数('L',L);日志(M’,M);对数('N',N);日志('O',O);此代码段仅显示选定的解决方案
下面是铬上小物体的结果
我在使用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