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

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

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


当前回答

表演

今天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);此代码段仅显示选定的解决方案

下面是铬上小物体的结果

其他回答

您可以使用for in循环,如其他人所示。然而,您还必须确保获得的密钥是对象的实际属性,而不是来自原型。

下面是片段:变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};for(p中的var键){if(p.hasOwnProperty(键)){console.log(键+“->”+p[key]);}}

对于具有Object.keys()选项的:

变量p={0:“值1”,“b”:“值2”,键:“value3”};for(Object.keys(p)的var键){console.log(key+“->”+p[key])}

请注意for-of而不是for-in的用法,如果不使用,它将在命名的财产上返回undefined,并且Object.keys()确保只使用对象自己的财产,而不使用整个prototype-chain财产

使用新的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}`);
}

如果只想迭代财产,请使用上面的答案之一,但是如果要迭代包括函数在内的所有内容,则可能需要使用Object.getOwnPropertyNames(obj)

for(let o of Object.getOwnPropertyNames(数学)){console.log(o);}

我有时会用它来快速测试具有简单输入和输出的对象上的所有函数。

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]);}}}

由于ES06,您可以使用

let arrValues = Object.values( yourObject) ;

它返回一个对象值数组,而不从Prototype中提取值!!

MDN DOCS对象.values()

还有钥匙(在我面前准备好了)

let arrKeys   = Object.keys(yourObject);

自ES2015以来,您可以使用for of循环直接访问元素:

// before ES2015
for(var key of elements){
  console.log(elements[key]);
}


// ES2015
for(let element of elements){
  console.log(element);
}

希望这对某人有所帮助。