mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-12 18:14:42 +08:00
119 lines
12 KiB
HTML
119 lines
12 KiB
HTML
<article id="wikiArticle">
|
||
<div></div>
|
||
<p>方法 <code><strong>Object.fromEntries()</strong></code> 把键值对列表转换为一个对象。</p>
|
||
<div>{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}</div>
|
||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||
<h2 id="语法">语法</h2>
|
||
<pre><code class="language-javascript">Object.fromEntries(<var>iterable</var>);</code></pre>
|
||
<h3 id="参数">参数</h3>
|
||
<dl>
|
||
<dt><code>iterable</code></dt>
|
||
<dd>类似实现了<a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">可迭代协议</a> <a href="Reference/Array" title="REDIRECT Array"><code>Array</code></a> 或者 <a href="Reference/Map" title="此页面仍未被本地化, 期待您的翻译!"><code>Map</code></a> 或者其它对象的可迭代对象。</dd>
|
||
</dl>
|
||
<h3 id="返回值">返回值</h3>
|
||
<p>一个包含提供的可迭代对象条目的对应属性的新对象。</p>
|
||
<h2 id="描述">描述</h2>
|
||
<p><code>Object.fromEntries()</code> 函数传入一个键值对的列表，并返回一个带有这些键值对的新对象。这个迭代参数应该是一个能够实现@iterator方法的的对象，返回一个迭代器对象。它生成一个具有两个元素的类似数组的对象，第一个元素是将用作属性键的值，第二个元素是与该属性键关联的值。</p>
|
||
<p><code>Object.fromEntries()</code> 是 <a href="Reference/Global_Objects/Object/entries" title="The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request."><code>Object.entries</code></a> 的反转。</p>
|
||
<h2 id="示例">示例</h2>
|
||
<h3 id="Map_转化为_Object"> <code>Map</code> 转化为 <code>Object</code></h3>
|
||
<p>通过 <code>Object.fromEntries</code>， 可以将 <a href="Reference/Map" title="此页面仍未被本地化, 期待您的翻译!"><code>Map</code></a> 转化为 <a href="Reference/Global_Objects/Object" title="Object 构造函数创建一个对象包装器。"><code>Object</code></a>:</p>
|
||
<pre><code class="language-javascript">const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
|
||
const obj = Object.fromEntries(map);
|
||
console.log(obj); // { foo: "bar", baz: 42 }
|
||
</code></pre>
|
||
<h3 id="Array_转化为_Object"><code>Array</code> 转化为 <code>Object</code></h3>
|
||
<p>通过 <code>Object.fromEntries</code>， 可以将 <a href="Reference/Array" title="REDIRECT Array"><code>Array</code></a> 转化为 <a href="Reference/Global_Objects/Object" title="Object 构造函数创建一个对象包装器。"><code>Object</code></a>:</p>
|
||
<pre><code class="language-javascript">const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
|
||
const obj = Object.fromEntries(arr);
|
||
console.log(obj); // { 0: "a", 1: "b", 2: "c" }
|
||
</code></pre>
|
||
<h3 id="对象转换">对象转换</h3>
|
||
<p> <code>Object.fromEntries</code> 是 <a href="Reference/Global_Objects/Object/entries" title="The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request."><code>Object.entries()</code></a> 的反转函数， 借用 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods_2">array manipulation methods</a> 可以转换对象，如下：</p>
|
||
<pre><code class="language-javascript">const object1 = { a: 1, b: 2, c: 3 };
|
||
|
||
const object2 = Object.fromEntries(
|
||
Object.entries(object1)
|
||
.map(([ key, val ]) => [ key, val * 2 ])
|
||
);
|
||
|
||
console.log(object2);
|
||
// { a: 2, b: 4, c: 6 }</code></pre>
|
||
<h2 id="规范">规范</h2>
|
||
<table class="standard-table">
|
||
<tbody>
|
||
<tr>
|
||
<th scope="col">Specification</th>
|
||
<th scope="col">Status</th>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="external" href="https://tc39.github.io/proposal-object-from-entries/" rel="noopener">https://tc39.github.io/proposal-object-from-entries</a></td>
|
||
<td>Stage 3</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="浏览器兼容">浏览器兼容</h2>
|
||
<div>
|
||
<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
|
||
<p></p><div class="bc-data"><a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener">Update compatibility data on GitHub</a><table class="bc-table bc-table-js"><thead><tr class="bc-platforms"><td></td><th class="bc-platform-desktop" colspan="6"><span>Desktop</span></th><th class="bc-platform-mobile" colspan="7"><span>Mobile</span></th><th class="bc-platform-server" colspan="1"><span>Server</span></th></tr><tr class="bc-browsers"><td></td><th class="bc-browser-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome</span></th><th class="bc-browser-edge"><span class="bc-head-txt-label bc-head-icon-edge">Edge</span></th><th class="bc-browser-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th><th class="bc-browser-ie"><span class="bc-head-txt-label bc-head-icon-ie">Internet Explorer</span></th><th class="bc-browser-opera"><span class="bc-head-txt-label bc-head-icon-opera">Opera</span></th><th class="bc-browser-safari"><span class="bc-head-txt-label bc-head-icon-safari">Safari</span></th><th class="bc-browser-webview_android"><span class="bc-head-txt-label bc-head-icon-webview_android">Android webview</span></th><th class="bc-browser-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome for Android</span></th><th class="bc-browser-edge_mobile"><span class="bc-head-txt-label bc-head-icon-edge_mobile">Edge Mobile</span></th><th class="bc-browser-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox for Android</span></th><th class="bc-browser-opera_android"><span class="bc-head-txt-label bc-head-icon-opera_android">Opera for Android</span></th><th class="bc-browser-safari_ios"><span class="bc-head-txt-label bc-head-icon-safari_ios">Safari on iOS</span></th><th class="bc-browser-samsunginternet_android"><span class="bc-head-txt-label bc-head-icon-samsunginternet_android">Samsung Internet</span></th><th class="bc-browser-nodejs"><span class="bc-head-txt-label bc-head-icon-nodejs">Node.js</span></th></tr></thead><tbody><tr><th scope="row"><code>fromEntries</code></th><td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
73</td><td class="bc-supports-no bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
63</td><td class="bc-supports-no bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-no bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-no bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
73</td><td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
73</td><td class="bc-supports-no bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
63</td><td class="bc-supports-no bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-no bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-no bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-no bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td></tr></tbody></table><section class="bc-legend" id="sect1"><h3 class="offscreen" id="Legend">Legend</h3><dl><dt><span class="bc-supports-yes bc-supports">
|
||
<abbr class="bc-level bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
|
||
</abbr></span></dt><dd>Full support</dd><dt><span class="bc-supports-no bc-supports">
|
||
<abbr class="bc-level bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
|
||
</abbr></span></dt><dd>No support</dd></dl></section></div><p></p>
|
||
</div>
|
||
<h2 id="相关链接">相关链接</h2>
|
||
<ul>
|
||
<li><a href="Reference/Global_Objects/Object/entries" title="The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request."><code>Object.entries()</code></a></li>
|
||
<li><a href="Reference/Global_Objects/Object/keys" title="Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。"><code>Object.keys()</code></a></li>
|
||
<li><a href="Reference/Global_Objects/Object/values" title="Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。"><code>Object.values()</code></a></li>
|
||
<li><a href="Reference/Global_Objects/Map/entries" title="entries() ?方法返回一个新的包含 [key, value] ?对的 Iterator ?对象，返回的迭代器的迭代顺序与 Map 对象的插入顺序相同。"><code>Map.prototype.entries()</code></a></li>
|
||
<li><a href="Reference/Global_Objects/Map/keys" title="keys() 返回一个新的 Iterator 对象。它包含按照顺序插入 Map 对象中每个元素的key值。"><code>Map.prototype.keys()</code></a></li>
|
||
<li><a href="Reference/Global_Objects/Map/values" title="一个新的 Map 可迭代对象."><code>Map.prototype.values()</code></a></li>
|
||
</ul>
|
||
</article> |