JS でオブジェクトのプロパティをトラバースするメソッドの紹介

ECMAScript 2016 が 2016 年 6 月にリリースされたのと同じ時期に、JavaScript 開発者は、別の素晴らしい提案がまとまったことを知ってうれしいでしょうフェーズ 4 (完了)。

翻訳者注: この記事の翻訳時には、これらの機能がサポートされています。

これらの関数をリストしてみましょう:

• Object.values() と Object.entries()

• 非同期関数

• str .padStart() および str.padEnd()

• ##Object.getOwnPropertyDescriptors()

• #関数パラメータ リストと呼び出しの末尾のカンマ

新しい提案は、 ESMAScript2017 標準は 2017 年 (おそらく 2017 年の夏) にリリースされる予定です。この機能リストは増え続ける可能性があることに注意してください。とても良い！

もちろん、ES2017 がリリースされるまで、またはベンダー (ブラウザー) が新機能を実装するまで待つ必要はありません。

Babel

には、これらの完成した提案のほとんどの機能がすでに含まれています。 この記事では、主にオブジェクト プロパティの反復を改善する方法について説明します。

使用
• Object.values()

  オブジェクト プロパティの取得

Use
• Object.entries()

  Get Attributeskey/value

一見すると、これらの静的関数は重要な価値をもたらすとは思えません。ただし、これらを

for...of

ループと組み合わせて使用​​すると、オブジェクトのプロパティを走査するシンプルで美しい方法が得られます。 ＃＃＃＃＃＃確認してみましょう。 独自のプロパティと列挙可能なプロパティ

すでにご存知かもしれませんが、

Object.keys()

はオブジェクト自体と列挙可能なプロパティにのみアクセスします。ほとんどの場合、これらのプロパティのみを評価する必要があるため、これは合理的です。

プロパティを所有および継承するオブジェクトの例を見てみましょう。 Object.keys()独自のプロパティ キー (

key

) のみを返します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>let simpleColors = { colorA: &amp;#39;white&amp;#39;, colorB: &amp;#39;black&amp;#39; }; let natureColors = { colorC: &amp;#39;green&amp;#39;, colorD: &amp;#39;yellow&amp;#39; }; Object.setPrototypeOf(natureColors, simpleColors); Object.keys(natureColors); // =&gt; [&amp;#39;colorC&amp;#39;, &amp;#39;colorD&amp;#39;] natureColors[&amp;#39;colorA&amp;#39;]; // =&gt; &amp;#39;white&amp;#39; natureColors[&amp;#39;colorB&amp;#39;]; // =&gt; &amp;#39;black&amp;#39;</pre><div class="contentsignin">ログイン後にコピー</div></div>

Object.keys( NatureColors)

natureColors

オブジェクト自体と列挙可能なプロパティ キー ['colorC', 'colorD'] を返します。 natureColors simpleColors プロトタイプ オブジェクトから継承されたプロパティが含まれます。ただし、Object.keys() 関数はそれらをスキップします。 Object.values() および

Object.entries()

同じ条件 (所有プロパティと列挙可能なプロパティ) を使用してオブジェクトのプロパティにアクセスします。見てみましょう: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>let simpleColors = { colorA: &amp;#39;white&amp;#39;, colorB: &amp;#39;black&amp;#39; }; let natureColors = { colorC: &amp;#39;green&amp;#39;, colorD: &amp;#39;yellow&amp;#39; }; Object.values(natureColors); // =&gt; [&amp;#39;green&amp;#39;, &amp;#39;yellow&amp;#39;] Object.entries(natureColors); // =&gt; [ [&amp;#39;colorC&amp;#39;, &amp;#39;green&amp;#39;], [&amp;#39;colorD&amp;#39;, &amp;#39;yellow&amp;#39;] ]</pre><div class="contentsignin">ログイン後にコピー</div></div>

for...in との違いに注目してください。列挙型自身のプロパティと継承されたプロパティをループします。次の例はこれを示しています:

let simpleColors = {  
    colorA: 'white',
    colorB: 'black'
};
let natureColors = {  
    colorC: 'green',
    colorD: 'yellow'
};

let enumerableKeys = [];  
for (let key in natureColors) {  
    enumerableKeys.push(key);
}
enumerableKeys; // => ["colorC", "colorD", "colorA", "colorB"]

enumerableKeys 配列には、natureColors オブジェクト自身のプロパティのキーが含まれています:

'colorC'

および 'colorD'。 さらに、for...in は、

simpleColors

プロトタイプから継承されたプロパティ キー ('colorA' および ' colorB) を走査します。 「。 Object.values() はプロパティ値を返します

Object.values()

の利点を区別するために、最初にプロパティ値を取得する方法を見てみましょう。 2017 年以前の目標はどのように達成されるのでしょうか?

最初に Object.keys() を使用してプロパティ キーを収集し、次にプロパティ アクセサーを使用して値を追加の変数に保存します。例を見てみましょう:

let meals = {  
    mealA: 'Breakfast',
    mealB: 'Lunch',
    mealC: 'Dinner'
};
for (let key of Object.keys(meals)) {  
    let mealName = meals[key];
    // ... do something with mealName
    console.log(mealName); // => 'Breakfast' 'Lunch' 'Dinner'
}

meals是一个普通的JavaScript对象。使用Object.keys(meals)和for...of的循环枚举出对象键值。代码看起来很简单，但是可以通过去掉let mealName = meals[key]来优化它。

通过使用Object.values()可以直接访问对象属性值，可以实现优化。优化代码后如下：

let meals = {  
    mealA: 'Breakfast',
    mealB: 'Lunch',
    mealC: 'Dinner'
};
for (let mealName of Object.values(meals)) {  
    console.log(mealName); // => 'Breakfast' 'Lunch' 'Dinner'
}

由于Object.values(meals)返回数组中的对象属性值，因此通过for...of循环把对象的属性值直接分配给mealName，因此不需要添加额外的代码，就像前面的例子那样。

Object.values()只做一件事，但做得很好。这也是我们写代码的正确姿势。

Object.entries()返回属性值和键

Object.entries()很强大，它返回对象的键和属性值，而且它们是成对的，比如： [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]。

可能直接使用有些不爽。幸运的是，数组在for...of循环中传入let [x, y] = array，很容易得到对应的访问键和值。

下面是Object.entries()的示例：

let meals = {  
    mealA: 'Breakfast',
    mealB: 'Lunch',
    mealC: 'Dinner'
};
for (let [key, value] of Object.entries(meals)) {  
    console.log(key + ':' + value); // => 'mealA:Breakfast' 'mealB:Lunch' 'mealC:Dinner'
}

Object.entries(meals)返回meal对象的属性键和值到一个数组中。然后通过for...of循环解构性参数let [key, value]把数组中的值分配给key和value变量。

正如所见，访问的键和值现在已经是一种舒适而且易于理解的形式。由于Object.entries()返回一个与数组解构性赋值相兼容的集合，因此没有必要添加额外的赋值或声明行。

Object.entries()将普通对象导入到Map时是有用的。由于Object.entries()返回Map构造函数所接受的格式：key和value成对。因此问题变得无关紧要。

让我们创建一个JavaScript对象并将其导出到Map中：

let greetings = {  
    morning: 'Good morning',
    midday: 'Good day',
    evening: 'Good evening'
};
let greetingsMap = new Map(Object.entries(greetings));  
greetingsMap.get('morning'); // => 'Good morning'  
greetingsMap.get('midday');  // => 'Good day'  
greetingsMap.get('evening'); // => 'Good evening'

new Map(Object.entries(greetings))构造函数使用一个参数来调用，这个参数是greeting对象中导出的数组的一个键值对。

如预期的那样，map实例greetingsMap包含greetings对象导入的属性。可以使用.get(key)方法访问这些数据。

有趣的是，Map提供了与Object.values()和Object.entries()方法相同的方法（只有它们返回迭代器），以便提取Map实例的属性值或键值对：

• Map.prototype.values()等价于Object.values()

• Map.prototype.entries()等价于Object.entries()

Map提供了普通对象的改良版。你可以获得Map的大小（对于一个简单的对象，你必须手动操作），并使它作为键或对象类型（简单对象把键当作一个字符串原始类型）。

我们来看看map的.values()和.entries()方法返回什么：

let greetings = {  
    morning: 'Good morning',
    midday: 'Good day',
    evening: 'Good evening'
};
let greetingsMap = new Map(Object.entries(greetings));  
[...greetingsMap.values()]; // =>['Good morning', 'Good day', 'Good evening']
[...greetingsMap.entries()]; // =>[['morning','Good morning'],
                       ['midday','Good day'],['evening','Good evening']]

注意：greetingsMap.values()和greetingsMap.entries()返回迭代器对象（Iterator Objects）。将结果放入一个数组，扩展运算符...是必要的。在for...of循环语句中可以直接使用迭代器。

关于顺序上的笔记

JavaScript对象是简单的键值映射。所以对象的属性的顺序是无关紧要的。在大多数情况下，你不应该依赖它。

然而，ES2015已经对迭代的方式提供了标准化的要求：首先是有序的数字字符，然后是插入顺序的字符串，然后是插入顺序的符号（symbols）。在ES5和较早的标准中，属性的顺序没有指定。

如果你需要一个有序的集合，推荐的方法是将数据存储到数组或集合中。

总结

Object.values()和Object.entries()是为JavaScript开发人员提供函数的另一个改进步骤的新标准化 。

Object.entries() データ グループの構造化パラメータを使用して実行すると、キーと値をさまざまな変数に簡単に割り当てることができます。この関数を使用すると、通常の JavaScript オブジェクトのプロパティを Map オブジェクトに簡単にエクスポートすることもできます。 Map は、従来の map (または hash) の動作をより適切にサポートできます。

注: object.values() および object.entries()データが返される順序は未定です。したがって、順序に依存しないでください。

英語の元のアドレス: https://dmitripavlutin.com/how-to-iterate-easy-over-object-properties-in-javascript/

翻訳アドレス: https: //www.w3cplus.com/javascript/how-to-iterate-easy-over-object-properties-in-javascript.html

プログラミング関連の知識の詳細については、次を参照してください:プログラミング入門! ！

以上がJS でオブジェクトのプロパティをトラバースするメソッドの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。