表演

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

下面是铬上小物体的结果

如果还想迭代非可枚举财产，可以使用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

变量p={“p1”：“值1”，“p2”：“值2”，“p3”：“值3”};for（p中的var键）{if（p.hasOwnProperty（键））{console.log（key+“=”+p[key]）；}}<p>输出：<br>p1=值1<br>p2=值2<br>p3=值3</p>

下面是另一种迭代对象的方法。

变量p={“p1”：“值1”，“p2”：“值2”，“p3”：“值3”};Object.keys（p）.forEach（key=>{console.log（key，p[key]）}）

考虑到ES6，我想添加自己的一勺糖，并提供另一种方法来迭代对象的财产。

由于纯JS对象不能立即迭代，因此我们无法使用。。用于迭代其内容的循环。但没有人能阻止我们使其可迭代。

让我们有书的对象。

let book = {
  title: "Amazing book",
  author: "Me",
  pages: 3
}

book[Symbol.iterator] = function(){

  let properties = Object.keys(this); // returns an array with property names
  let counter = 0;
  let isDone = false;

  let next = () => {
    if(counter >= properties.length){
      isDone = true;
    }
    return { done: isDone, value: this[properties[counter++]] }
  }

  return { next };
}

既然我们做到了，我们可以这样使用它：

for(let pValue of book){
  console.log(pValue);
}
------------------------
Amazing book
Me
3

或者如果你知道ES6发电机的功率，那么你当然可以让上面的代码更短。

book[Symbol.iterator] = function *(){

  let properties = Object.keys(this);
  for (let p of properties){
    yield this[p];
  }

}

当然，通过在原型级别上使Object可迭代，您可以对所有对象应用这样的行为。

Object.prototype[Symbol.iterator] = function() {...}

此外，符合可迭代协议的对象可以与新的ES2015特性扩展运算符一起使用，因此我们可以将对象属性值作为数组读取。

let pValues = [...book];
console.log(pValues);
-------------------------
["Amazing book", "Me", 3]

或者可以使用析构函数赋值：

let [title, , pages] = book; // notice that we can just skip unnecessary values
console.log(title);
console.log(pages);
------------------
Amazing book
3

您可以使用我上面提供的所有代码查看JSFiddle。