表演

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

下面是铬上小物体的结果

使用纯JavaScript时，循环可能非常有趣。似乎只有ECMA6（新的2015 JavaScript规范）控制了循环。不幸的是，在我写这篇文章的时候，浏览器和流行的集成开发环境（IDE）仍然在努力完全支持这些新功能。

在ECMA6之前，JavaScript对象循环是什么样子的

for (var key in object) {
  if (p.hasOwnProperty(key)) {
    var value = object[key];
    console.log(key); // This is the key;
    console.log(value); // This is the value;
  }
}

此外，我知道这超出了这个问题的范围，但在2011年，ECMAScript 5.1仅为数组添加了forEach方法，这基本上创建了一种新的改进方法来循环遍历数组，同时仍保留不可迭代的对象与旧的冗长和混乱的for循环。但奇怪的是，这种新的forEach方法不支持导致其他各种问题的break。

基本上在2011年，除了许多流行的库（jQuery、Undercore等）决定重新实现之外，没有一种真正可靠的JavaScript循环方法。

截至2015年，我们现在有了一种更好的开箱即用的方式来循环（和中断）任何对象类型（包括数组和字符串）。以下是当推荐成为主流时，JavaScript中的循环最终会是什么样子：

for (let [key, value] of Object.entries(object)) {
    console.log(key); // This is the key;
    console.log(value); // This is the value;
}

注意，截至2016年6月18日，大多数浏览器都不支持上述代码。即使在Chrome中，您也需要启用此特殊标志才能工作：chrome://flags/#enable-javascript和谐

在这成为新标准之前，旧方法仍然可以使用，但在流行的库中也有替代方法，甚至对于那些不使用这些库的人来说，也有轻量级的替代方法。

您可以使用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}`);
}

在可枚举JavaScript对象上进行循环的一个好方法是使用object.keys或object.entries并使用map函数，这对于ReactJS来说可能是非常棒和常见的。如下所示：

// assume items:

const items = {
  first: { name: 'phone', price: 400 },
  second: { name: 'tv', price: 300 },
  third: { name: 'sofa', price: 250 },
};

对于循环和显示ReactJS上的一些UI，如下所示：

~~~
<div>
  {Object.entries(items).map(([key, ({ name, price })]) => (
    <div key={key}>
     <span>name: {name}</span>
     <span>price: {price}</span>
    </div>
  ))}
</div>

实际上，我使用了两次析构函数赋值，一次用于获取key，一次是获取name和price。

变量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>

在Object.keys（）上使用for

喜欢：

let对象={“key1”：“value1”，“key2”：“value2”，“key3”：“value3”};for（let key of Object.keys（对象））{console.log（key+“：”+对象[key]）}