diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-19 00:36:37 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-27 09:36:13 +0900 |
commit | dc150b0d7beb18d0addc54a60563f40c05fdea5b (patch) | |
tree | 829ec93eb960025e533c95be26367fba46e63b5b | |
parent | 2843c5058cd3c54d507c9700ef435a9159443905 (diff) | |
download | translated-content-dc150b0d7beb18d0addc54a60563f40c05fdea5b.tar.gz translated-content-dc150b0d7beb18d0addc54a60563f40c05fdea5b.tar.bz2 translated-content-dc150b0d7beb18d0addc54a60563f40c05fdea5b.zip |
Global_Objects/Object/entries を更新
- Markdown へ変換
- 2021/06/21 時点の英語版に同期
-rw-r--r-- | files/ja/web/javascript/reference/global_objects/object/entries/index.md | 167 |
1 files changed, 76 insertions, 91 deletions
diff --git a/files/ja/web/javascript/reference/global_objects/object/entries/index.md b/files/ja/web/javascript/reference/global_objects/object/entries/index.md index 9b1787ea03..2528a8313b 100644 --- a/files/ja/web/javascript/reference/global_objects/object/entries/index.md +++ b/files/ja/web/javascript/reference/global_objects/object/entries/index.md @@ -3,52 +3,50 @@ title: Object.entries() slug: Web/JavaScript/Reference/Global_Objects/Object/entries tags: - JavaScript - - Method - - Object - - Reference - メソッド + - Object + - リファレンス + - ポリフィル +browser-compat: javascript.builtins.Object.entries translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries --- -<div>{{JSRef}}</div> +{{JSRef}} -<p><code><strong>Object.entries()</strong></code> メソッドは、引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 <code>[<var>key</var>, <var>value</var>]</code> からなる配列を返します。配列要素の順序は {{jsxref("Statements/for...in", "for...in")}} ループによる順序と同じです (両者の主な違いは、<code>for...in</code> ループではプロトタイプチェーン内のプロパティも列挙されることです)。</p> +**`Object.entries()`** メソッドは、引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 `[key, value]` からなる配列を返します。これは {{jsxref("Statements/for...in", "for...in")}} ループでの反復処理と同様ですが、違いは `for...in` ループではプロトタイプチェーン内のプロパティも列挙されることです。 -<p><code><strong>Object.entries()</strong></code> で返される配列の順序は、オブジェクトがどのように定義されたかに依存しません。特定の順序にする必要があるのであれば、<code>Object.entries(obj).sort((a, b) => a[0] - b[0]);</code> のようにして、まず配列を整列する必要があります。</p> +**`Object.entries()`** で返される配列の順序は、{{jsxref("Statements/for...in", "for...in")}} ループによる順序と同じです。異なる順序にする必要があるのであれば、`Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));` のようにして、まず配列を整列する必要があります。 -<div>{{EmbedInteractiveExample("pages/js/object-entries.html", "taller")}}</div> +{{EmbedInteractiveExample("pages/js/object-entries.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +```js +Object.entries(obj) +``` -<pre class="syntaxbox notranslate">Object.entries(<var>obj</var>)</pre> +### 引数 -<h3 id="Parameters" name="Parameters">引数</h3> +- `obj` + - : 返されることになる文字列をキーとした列挙可能な所有プロパティの組 `[key, value]` を持つオブジェクト。 -<dl> - <dt><code><var>obj</var></code></dt> - <dd>返されることになる文字列をキーとした列挙可能な所有プロパティの組 <code>[<var>key</var>, <var>value</var>]</code> を持つオブジェクト。</dd> -</dl> +### 返値 -<h3 id="Return_value" name="Return_value">返値</h3> +引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 `[key, value]` の配列。 -<p>引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 <code>[<var>key</var>, <var>value</var>]</code> の配列。</p> +## 解説 -<h2 id="Description" name="Description">解説</h2> +`Object.entries()` は、`object` に直接存在する文字列をキーとした列挙可能プロパティの組 `[key, value]` が配列要素に対応した配列を返します。プロパティの順序はオブジェクト内のプロパティに対してループさせた時の順序と同じになります。 -<p><code>Object.entries()</code> は、<code>object</code> に直接存在する文字列をキーとした列挙可能プロパティの組 <code>[<var>key</var>, <var>value</var>]</code> が配列要素に対応した配列を返します。プロパティの順序はオブジェクト内のプロパティに対してループさせた時の順序と同じになります。</p> +## ポリフィル -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> +ネイティブで `Object.entries` に対応していない古い環境に互換性を持たせる場合は、以下のいずれかを使用することができます。 -<p>ネイティブで <code>Object.entries</code> に対応していない古い環境に互換性を持たせる場合は、以下のいずれかを使用することができます。</p> +- `Object.entries` の試験的実装である [tc39/proposal-object-values-entries](https://github.com/tc39/proposal-object-values-entries) (IE に対応する必要がない場合) +- [es-shims/Object.entries](https://github.com/es-shims/Object.entries) リポジトリーにあるポリフィル +- または、単純に、下記の配布可能なポリフィルを使うこともできます。 -<ul> - <li><code>Object.entries</code> の試験的実装である <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> (IE に対応する必要がない場合)</li> - <li><a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a> リポジトリにあるポリフィル</li> - <li>または、単純に、下記の配布可能なポリフィルを使うこともできます。</li> -</ul> - -<pre class="brush: js notranslate">if (!Object.entries) { +```js +if (!Object.entries) { Object.entries = function( obj ){ var ownProps = Object.keys( obj ), i = ownProps.length, @@ -59,20 +57,21 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries return resArray; }; } -</pre> +``` -<p>上記のポリフィルのコードスニペットで、IE<9 の対応が必要な場合、Object.keys の polyfill ({{jsxref("Object.keys")}} ページにあるようなもの) も必要となります。</p> +上記のポリフィルのコードスニペットで、IE 9 以前の対応が必要な場合、`Object.keys()` のポリフィル ({{jsxref("Object.keys")}} ページにあるようなもの) も必要となります。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 }; +```js +const obj = { foo: 'bar', baz: 42 }; console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] -// 配列様オブジェクト +// 配列風オブジェクト const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] -// ランダムなキー順序を持つ配列様オブジェクト +// ランダムなキー順序を持つ配列風オブジェクト const anObj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] @@ -84,72 +83,58 @@ console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ] // オブジェクトでない引数はオブジェクトへと型強制されます console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] -// returns an empty array for any primitive type, since primitives have no own properties +// プリミティブにはプロパティがないため、文字列を除くすべてのプリミティブ型に対して空の配列を返します (上記の例を参照) console.log(Object.entries(100)); // [ ] -// iterate through key-value gracefully +// 行儀のよいキーと値の反復処理 const obj = { a: 5, b: 7, c: 9 }; for (const [key, value] of Object.entries(obj)) { console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" } -// Or, using array extras -Object.entries(obj).forEach(([key, value]) => { -console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" +// または配列の展開の使用 +Object.entries(obj).forEach(([key, value]) => { + console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" }); -</pre> +``` -<h3 id="Converting_an_Object_to_a_Map" name="Converting_an_Object_to_a_Map"><code>Object</code> から <code>Map</code> への変換</h3> +### `Object` から `Map` への変換 -<p>{{jsxref("Map", "new Map()")}} コンストラクターは <code>entries</code> による反復処理に対応しています。<code>Object.entries</code> を使うと、{{jsxref("Object")}} から {{jsxref("Map")}} へと簡単に変換できます。:</p> +{{jsxref("Map", "new Map()")}} コンストラクターは `entries` による反復処理に対応しています。`Object.entries` を使うと、{{jsxref("Object")}} から {{jsxref("Map")}} へと簡単に変換できます。 -<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 }; +```js +const obj = { foo: 'bar', baz: 42 }; const map = new Map(Object.entries(obj)); -console.log(map); // Map { foo: "bar", baz: 42 } -</pre> - -<h3 id="Iterating_through_an_Object" name="Iterating_through_an_Object"><code>Object</code> をループする</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Array Destructuring</a> を使って、objects を簡単にループできます。</p> - -<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 }; -Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42" -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Object.entries")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">プロパティの列挙可能性と所有権</a></li> - <li>{{jsxref("Object.keys()")}}</li> - <li>{{jsxref("Object.values()")}}</li> - <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> - <li>{{jsxref("Object.create()")}}</li> - <li>{{jsxref("Object.fromEntries()")}}</li> - <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> - <li>{{jsxref("Map.prototype.entries()")}}</li> - <li>{{jsxref("Map.prototype.keys()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> +console.log(map); // Map(2) {"foo" => "bar", "baz" => 42} +``` + +### `Object` の反復処理 + +[配列の分割](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#array_destructuring)を使って、オブジェクトを簡単に反復処理することができます。 + +```js +const obj = { foo: 'bar', baz: 42 }; +Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Object.entries` のポリフィルは [`core-js`](https://github.com/zloirock/core-js#ecmascript-object) で利用できます +- [プロパティの列挙可能性と所有権](/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) +- {{jsxref("Object.keys()")}} +- {{jsxref("Object.values()")}} +- {{jsxref("Object.prototype.propertyIsEnumerable()")}} +- {{jsxref("Object.create()")}} +- {{jsxref("Object.fromEntries()")}} +- {{jsxref("Object.getOwnPropertyNames()")}} +- {{jsxref("Map.prototype.entries()")}} +- {{jsxref("Map.prototype.keys()")}} +- {{jsxref("Map.prototype.values()")}} |