aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/javascript/reference/global_objects/object/fromentries/index.html
blob: 04f84e02d28eba8cdd2bfc65bac46b2f23531031 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
---
title: Object.fromEntries()
slug: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
tags:
  - JavaScript
  - Method
  - Object
  - Reference
translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
---
<p>{{JSRef}}</p>

<p><code><strong>Object.fromEntries()</strong></code> メソッドは、キーと値の組み合わせのリストをオブジェクトに変換します。</p>

<div>{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}</div>

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

<pre class="syntaxbox notranslate">Object.fromEntries(<var>iterable</var>);</pre>

<h3 id="Parameters" name="Parameters">引数</h3>

<dl>
 <dt><code><var>iterable</var></code></dt>
 <dd><a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">反復処理プロトコル</a>を実装している {{jsxref("Array")}}{{jsxref("Map")}} やその他の反復処理可能なオブジェクトです。</dd>
</dl>

<h3 id="Return_value" name="Return_value">返値</h3>

<p>反復可能な項目から作成されたプロパティを持つ新しいオブジェクト。</p>

<h2 id="Description" name="Description">説明</h2>

<p><code>Object.fromEntries()</code> メソッドは、キーと値のリストを取り、これらの項目から作成されたプロパティを持つ新しいオブジェクトを返します。引数の <var>iterable</var><code>@@iterator</code> メソッドを実装しており、オブジェクトのような二つの要素を持ち、最初の要素がプロパティキーとして使われる値であり、次の要素がプロパティのキーに関連付けられる値であるようなオブジェクトであることが求められます。</p>

<p><code>Object.fromEntries()</code>{{jsxref("Object.entries()")}} の逆の動作をします。</p>

<h2 id="Examples" name="Examples"></h2>

<h3 id="Converting_a_Map_to_an_Object" name="Converting_a_Map_to_an_Object">Map から Object への変換</h3>

<p><code>Object.fromEntries</code> では、 {{jsxref("Map")}}{{jsxref("Object")}} に変換することができます。</p>

<pre class="brush: js notranslate">const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }
</pre>

<h3 id="Converting_an_Array_to_an_Object" name="Converting_an_Array_to_an_Object">Array から Object への変換</h3>

<p><code>Object.fromEntries</code> では、 {{jsxref("Array")}}{{jsxref("Object")}} に変換することができます。</p>

<pre class="brush: js notranslate">const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }
</pre>

<h3 id="Object_transformations" name="Object_transformations">オブジェクトの変形</h3>

<p><code>Object.fromEntries</code>、逆のメソッド {{jsxref("Object.entries()")}}<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods_2">配列操作メソッド</a>を使用して、以下のようにオブジェクトを変形することができます。</p>

<pre class="brush: js notranslate">const object1 = { a: 1, b: 2, c: 3 };

const object2 = Object.fromEntries(
  Object.entries(object1)
  .map(([ key, val ]) =&gt; [ key, val * 2 ])
);

console.log(object2);
// { a: 2, b: 4, c: 6 }</pre>

<div class="hidden">
<p>MDN のページにポリフィルを追加しないでください。詳しくは、 <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a> を参照してください。</p>
</div>

<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.fromentries', 'Object.fromEntries')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("javascript.builtins.Object.fromEntries")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{jsxref("Object.entries()")}}</li>
 <li>{{jsxref("Object.keys()")}}</li>
 <li>{{jsxref("Object.values()")}}</li>
 <li>{{jsxref("Map.prototype.entries()")}}</li>
 <li>{{jsxref("Map.prototype.keys()")}}</li>
 <li>{{jsxref("Map.prototype.values()")}}</li>
</ul>