mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-13 10:44:03 +08:00
505 lines
34 KiB
HTML
505 lines
34 KiB
HTML
<article id="wikiArticle">
|
||
<div></div>
|
||
<p><strong>解构赋值</strong>语法是一种 Javascript 表达式，它使得将值从数组，或属性从对象，提取到不同的变量中，成为可能。</p>
|
||
<p><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/expressions-destructuringassignment.html" width="100%"></iframe></p>
|
||
<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">var a, b, rest;
|
||
[a, b] = [10, 20];
|
||
console.log(a); // 10
|
||
console.log(b); // 20
|
||
|
||
[a, b, ...rest] = [10, 20, 30, 40, 50];
|
||
console.log(a); // 10
|
||
console.log(b); // 20
|
||
console.log(rest); // [30, 40, 50]
|
||
|
||
({ a, b } = { a: 10, b: 20 });
|
||
console.log(a); // 10
|
||
console.log(b); // 20
|
||
|
||
|
||
// Stage 4（已完成）提案中的特性
|
||
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
|
||
console.log(a); // 10
|
||
console.log(b); // 20
|
||
console.log(rest); // {c: 30, d: 40}
|
||
</code></pre>
|
||
<h2 id="描述">描述</h2>
|
||
<p>对象和数组逐个对应表达式，或称对象字面量和数组字面量，提供了一种简单的定义一个特定的数据组的方法。</p>
|
||
<pre><code class="language-javascript">var x = [1, 2, 3, 4, 5];</code></pre>
|
||
<p>解构赋值使用了相同的语法，不同的是在表达式左边定义了要从原变量中取出什么变量。</p>
|
||
<pre><code class="language-javascript">var x = [1, 2, 3, 4, 5];
|
||
var [y, z] = x;
|
||
console.log(y); // 1
|
||
console.log(z); // 2
|
||
</code></pre>
|
||
<p>JavaScript 中，解构赋值的作用类似于 Perl 和 Python 语言中的相似特性。</p>
|
||
<h2 id="解构数组">解构数组</h2>
|
||
<h3 id="变量声明并赋值时的解构">变量声明并赋值时的解构</h3>
|
||
<pre><code class="language-javascript">var foo = ["one", "two", "three"];
|
||
|
||
var [one, two, three] = foo;
|
||
console.log(one); // "one"
|
||
console.log(two); // "two"
|
||
console.log(three); // "three"</code></pre>
|
||
<h3 id="变量先声明后赋值时的解构">变量先声明后赋值时的解构</h3>
|
||
<p>通过解构分离变量的声明，可以为一个变量赋值。</p>
|
||
<pre><code class="language-javascript">var a, b;
|
||
|
||
[a, b] = [1, 2];
|
||
console.log(a); // 1
|
||
console.log(b); // 2</code></pre>
|
||
<h3 id="默认值">默认值</h3>
|
||
<p>为了防止从数组中取出一个值为<code>undefined</code>的对象，可以在表达式左边的数组中为任意对象预设默认值。</p>
|
||
<pre><code class="language-javascript">var a, b;
|
||
|
||
[a=5, b=7] = [1];
|
||
console.log(a); // 1
|
||
console.log(b); // 7</code></pre>
|
||
<h3 id="交换变量">交换变量</h3>
|
||
<p>在一个解构表达式中可以交换两个变量的值。</p>
|
||
<p>没有解构赋值的情况下，交换两个变量需要一个临时变量（或者用低级语言中的<a class="external" href="http://en.wikipedia.org/wiki/XOR_swap" rel="noopener">XOR-swap技巧</a>）。</p>
|
||
<pre><code class="language-javascript">var a = 1;
|
||
var b = 3;
|
||
|
||
[a, b] = [b, a];
|
||
console.log(a); // 3
|
||
console.log(b); // 1</code></pre>
|
||
<h3 id="解析一个从函数返回的数组">解析一个从函数返回的数组</h3>
|
||
<p>从一个函数返回一个数组是十分常见的情况。解构使得处理返回值为数组时更加方便。</p>
|
||
<p>在下面例子中，要让 <code>[1, 2]</code> 成为函数的 <code>f()</code> 的输出值，可以使用解构在一行内完成解析。</p>
|
||
<pre><code class="language-javascript">function f() {
|
||
return [1, 2];
|
||
}
|
||
|
||
var a, b;
|
||
[a, b] = f();
|
||
console.log(a); // 1
|
||
console.log(b); // 2
|
||
</code></pre>
|
||
<h3 id="忽略某些返回值">忽略某些返回值</h3>
|
||
<p>你也可以忽略你不感兴趣的返回值：</p>
|
||
<pre><code class="language-js">function f() {
|
||
return [1, 2, 3];
|
||
}
|
||
|
||
var [a, , b] = f();
|
||
console.log(a); // 1
|
||
console.log(b); // 3</code></pre>
|
||
<p>你也可以忽略全部返回值：</p>
|
||
<pre><code class="language-js">[,,] = f();
|
||
</code></pre>
|
||
<h3 id="将剩余数组赋值给一个变量">将剩余数组赋值给一个变量</h3>
|
||
<p>当解构一个数组时，可以使用剩余模式，将数组剩余部分赋值给一个变量。</p>
|
||
<pre><code class="language-javascript">var [a, ...b] = [1, 2, 3];
|
||
console.log(a); // 1
|
||
console.log(b); // [2, 3]</code></pre>
|
||
<p>注意：如果剩余元素右侧有逗号，会抛出 <a href="Reference/Global_Objects/SyntaxError" title="SyntaxError 对象代表尝试解析语法上不合法的代码的错误。"><code>SyntaxError</code></a>，因为剩余元素必须是数组的最后一个元素。</p>
|
||
<pre><code class="language-js example-bad">var [a, ...b,] = [1, 2, 3];
|
||
// SyntaxError: rest element may not have a trailing comma</code></pre>
|
||
<h3 id="用正则表达式匹配提取值">用正则表达式匹配提取值</h3>
|
||
<p>用正则表达式的 <code><a href="Reference/Global_Objects/RegExp/exec">exec()</a></code> 方法匹配字符串会返回一个数组，该数组第一个值是完全匹配正则表达式的字符串，然后的值是匹配正则表达式括号内内容部分。解构赋值允许你轻易地提取出需要的部分，忽略完全匹配的字符串——如果不需要的话。</p>
|
||
<pre><code class="language-javascript">function parseProtocol(url) {
|
||
var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
|
||
if (!parsedURL) {
|
||
return false;
|
||
}
|
||
console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
|
||
|
||
var [, protocol, fullhost, fullpath] = parsedURL;
|
||
return protocol;
|
||
}
|
||
|
||
console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
|
||
</code></pre>
|
||
<h2 id="解构对象">解构对象</h2>
|
||
<h3 id="基本赋值">基本赋值</h3>
|
||
<pre><code class="language-javascript">var o = {p: 42, q: true};
|
||
var {p, q} = o;
|
||
|
||
console.log(p); // 42
|
||
console.log(q); // true
|
||
</code></pre>
|
||
<h3 id="无声明赋值">无声明赋值</h3>
|
||
<p>通过解构，无需声明即可赋值一个变量。</p>
|
||
<pre><code class="language-javascript">var a, b;
|
||
|
||
({a, b} = {a: 1, b: 2});
|
||
</code></pre>
|
||
<p>赋值语句周围的 <code>( ... )</code> 是使用对象字面解构赋值时不需要声明的语法。<code>{a, b} = {a: 1, b: 2}</code> 不是有效的独立语法，因为左边的 <code>{a, b}</code> 被认为是一个块而不是对象字面量。然而，<code>({a, b} = {a: 1, b: 2})</code> 是有效的，正如 <code>var {a, b} = {a: 1, b: 2}</code></p>
|
||
<div class="note">
|
||
<p><strong>注意</strong>：你的<code>( ... )</code> 表达式需要一个分号在它前面，否则它也许会被当成上一行中的函数来执行。</p>
|
||
<p>However, <code>({a, b} = {a: 1, b: 2})</code> is valid, as is <code>var {a, b} = {a: 1, b: 2}</code></p>
|
||
<p>Your <code>( ... )</code> expression needs to be preceded by a semicolon or it may be used to execute a function on the previous line.</p>
|
||
</div>
|
||
<h3 id="给新的变量名赋值">给新的变量名赋值</h3>
|
||
<p>可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。</p>
|
||
<pre><code class="language-javascript">var o = {p: 42, q: true};
|
||
var {p: foo, q: bar} = o;
|
||
|
||
console.log(foo); // 42
|
||
console.log(bar); // true </code></pre>
|
||
<h3 id="默认值_2">默认值</h3>
|
||
<p>变量可以先赋予默认值。当要提取的对象没有对应的属性，变量就被赋予默认值。</p>
|
||
<pre><code class="language-javascript">var {a = 10, b = 5} = {a: 3};
|
||
|
||
console.log(a); // 3
|
||
console.log(b); // 5
|
||
</code></pre>
|
||
<h3 id="给新的变量命名并提供默认值">给新的变量命名并提供默认值</h3>
|
||
<p>一个属性可以是1）从一个对象解构，并分配给一个不同名称的变量，2）分配一个默认值，以防未解构的值是<code>undefined</code>。</p>
|
||
<pre><code class="language-javascript">var {a:aa = 10, b:bb = 5} = {a: 3};
|
||
|
||
console.log(aa); // 3
|
||
console.log(bb); // 5
|
||
</code></pre>
|
||
<h3 id="函数参数默认值">函数参数默认值</h3>
|
||
<h4 id="ES5_版本">ES5 版本</h4>
|
||
<pre><code class="language-javascript">function drawES5Chart(options) {
|
||
options = options === undefined ? {} : options;
|
||
var size = options.size === undefined ? 'big' : options.size;
|
||
var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
|
||
var radius = options.radius === undefined ? 25 : options.radius;
|
||
console.log(size, cords, radius);
|
||
// now finally do some chart drawing
|
||
}
|
||
|
||
drawES5Chart({
|
||
cords: { x: 18, y: 30 },
|
||
radius: 30
|
||
});</code></pre>
|
||
<h4 id="ES2015_版本">ES2015 版本</h4>
|
||
<pre><code class="language-javascript">function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {})
|
||
{
|
||
console.log(size, cords, radius);
|
||
// do some chart drawing
|
||
}
|
||
|
||
drawES2015Chart({
|
||
cords: { x: 18, y: 30 },
|
||
radius: 30
|
||
});</code></pre>
|
||
<div class="note">
|
||
<p>在上面的<strong><code>drawES2015Chart</code></strong>的函数签名中，解构的左手边被分配给右手边的空对象字面值：<code>{size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}</code>。你也可以在没有右侧分配的情况下编写函数。但是，如果你忽略了右边的赋值，那么函数会在被调用的时候查找至少一个被提供的参数，而在当前的形式下，你可以直接调用<code><strong>drawES2015Chart()</strong></code>而不提供任何参数。如果你希望能够在不提供任何参数的情况下调用该函数，则当前的设计非常有用，而另一种方法在您确保将对象传递给函数时非常有用。</p>
|
||
</div>
|
||
<h3 id="解构嵌套对象和数组">解构嵌套对象和数组</h3>
|
||
<pre><code class="language-js">const metadata = {
|
||
title: 'Scratchpad',
|
||
translations: [
|
||
{
|
||
locale: 'de',
|
||
localization_tags: [],
|
||
last_edit: '2014-04-14T08:43:37',
|
||
url: '/de/docs/Tools/Scratchpad',
|
||
title: 'JavaScript-Umgebung'
|
||
}
|
||
],
|
||
url: '/en-US/docs/Tools/Scratchpad'
|
||
};
|
||
|
||
let {
|
||
title: englishTitle, // rename
|
||
translations: [
|
||
{
|
||
title: localeTitle, // rename
|
||
},
|
||
],
|
||
} = metadata;
|
||
|
||
console.log(englishTitle); // "Scratchpad"
|
||
console.log(localeTitle); // "JavaScript-Umgebung"</code></pre>
|
||
<h3 id="For_of_迭代和解构">For of 迭代和解构</h3>
|
||
<pre><code class="language-javascript">var people = [
|
||
{
|
||
name: 'Mike Smith',
|
||
family: {
|
||
mother: 'Jane Smith',
|
||
father: 'Harry Smith',
|
||
sister: 'Samantha Smith'
|
||
},
|
||
age: 35
|
||
},
|
||
{
|
||
name: 'Tom Jones',
|
||
family: {
|
||
mother: 'Norah Jones',
|
||
father: 'Richard Jones',
|
||
brother: 'Howard Jones'
|
||
},
|
||
age: 25
|
||
}
|
||
];
|
||
|
||
for (var {name: n, family: {father: f}} of people) {
|
||
console.log('Name: ' + n + ', Father: ' + f);
|
||
}
|
||
|
||
// "Name: Mike Smith, Father: Harry Smith"
|
||
// "Name: Tom Jones, Father: Richard Jones"</code></pre>
|
||
<h3 id="从作为函数实参的对象中提取数据">从作为函数实参的对象中提取数据</h3>
|
||
<pre><code class="language-js">function userId({id}) {
|
||
return id;
|
||
}
|
||
|
||
function whois({displayName: displayName, fullName: {firstName: name}}){
|
||
console.log(displayName + " is " + name);
|
||
}
|
||
|
||
var user = {
|
||
id: 42,
|
||
displayName: "jdoe",
|
||
fullName: {
|
||
firstName: "John",
|
||
lastName: "Doe"
|
||
}
|
||
};
|
||
|
||
console.log("userId: " + userId(user)); // "userId: 42"
|
||
whois(user); // "jdoe is John"</code></pre>
|
||
<p>这段代码从user对象中提取并输出<code>id<font face="Open Sans, Arial, sans-serif">、</font></code><code>displayName</code>和<code>firstName</code>。</p>
|
||
<h3 id="对象属性计算名和解构">对象属性计算名和解构</h3>
|
||
<p>计算属性名，如<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">object literals</a>，可以被解构。</p>
|
||
<pre><code class="language-javascript">let key = "z";
|
||
let { [key]: foo } = { z: "bar" };
|
||
|
||
console.log(foo); // "bar"
|
||
</code></pre>
|
||
<h3 id="对象解构中的_Rest">对象解构中的 Rest</h3>
|
||
<p><a class="external" href="https://github.com/tc39/proposal-object-rest-spread" rel="noopener">Rest/Spread Properties for ECMAScript</a> 提案（阶段 3）将 <a href="Reference/Functions/rest_parameters">rest</a> 语法添加到解构中。Rest 属性收集那些尚未被解构模式拾取的剩余可枚举属性键。</p>
|
||
<pre><code class="language-javascript">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
|
||
a; // 10
|
||
b; // 20
|
||
rest; // { c: 30, d: 40 }</code></pre>
|
||
<h3 id="无效的_JavaScript_标识符作为属性名称">无效的 JavaScript 标识符作为属性名称</h3>
|
||
<p>通过提供有效的替代标识符，解构可以与不是有效的JavaScript<a href="/zh-CN/docs/Glossary/Identifier">标识符</a>的属性名称一起使用。</p>
|
||
<pre><code class="language-javascript">const foo = { 'fizz-buzz': true };
|
||
const { 'fizz-buzz': fizzBuzz } = foo;
|
||
|
||
console.log(fizzBuzz); // "true"
|
||
</code></pre>
|
||
<h2 id="规范">规范</h2>
|
||
<table class="standard-table">
|
||
<tbody>
|
||
<tr>
|
||
<th scope="col">Specification</th>
|
||
<th scope="col">Status</th>
|
||
<th scope="col">Comment</th>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="external" href="https://www.ecma-international.org/ecma-262/6.0/#sec-destructuring-assignment" hreflang="en" lang="en" rel="noopener">ECMAScript 2015 (6th Edition, ECMA-262)<br/><small lang="zh-CN">Destructuring assignment</small></a></td>
|
||
<td><span class="spec-Standard">Standard</span></td>
|
||
<td>Initial definition.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="external" href="https://tc39.github.io/ecma262/#sec-destructuring-assignment" hreflang="en" lang="en" rel="noopener">ECMAScript Latest Draft (ECMA-262)<br/><small lang="zh-CN">Destructuring assignment</small></a></td>
|
||
<td><span class="spec-Draft">Draft</span></td>
|
||
<td> </td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="浏览器兼容">浏览器兼容</h2>
|
||
<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">Destructuring assignment</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>
|
||
49</td><td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
14</td><td class="bc-supports-yes bc-browser-firefox bc-has-history"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
41<div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> </div><section class="bc-history" id="sect1"><dl><dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
41<div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> </div></dt><dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> Firefox provided a non-standard destructuring implementation from Firefox 2 to 40.</dd></dl></section></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-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
8</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>
|
||
49</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>
|
||
49</td><td class="bc-supports-yes bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
14</td><td class="bc-supports-yes bc-browser-firefox_android bc-has-history"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
41<div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> </div><section class="bc-history" id="sect2"><dl><dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
41<div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> </div></dt><dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> Firefox provided a non-standard destructuring implementation from Firefox 2 to 40.</dd></dl></section></td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
8</td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
5.0</td><td class="bc-supports-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
6.0.0</td></tr><tr><th scope="row">Computed property names</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>
|
||
49</td><td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
14</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>
|
||
41</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-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</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>
|
||
49</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>
|
||
49</td><td class="bc-supports-yes bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
14</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>
|
||
41</td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</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-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
5.0</td><td class="bc-supports-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td></tr><tr><th scope="row">Rest in arrays</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>
|
||
49</td><td class="bc-supports-yes bc-browser-edge bc-has-history"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
14<div class="bc-icons"><abbr class="only-icon" title="User must explicitly enable this feature."><span>Disabled</span><i class="ic-disabled"></i></abbr> </div><section class="bc-history" id="sect3"><dl><dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
14<div class="bc-icons"><abbr class="only-icon" title="User must explicitly enable this feature."><span>Disabled</span><i class="ic-disabled"></i></abbr> </div></dt><dd><abbr class="only-icon" title="User must explicitly enable this feature."><span>Disabled</span><i class="ic-disabled"></i></abbr> From version 14: this feature is behind the <code>Enable experimental Javascript features</code> preference.</dd></dl></section></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>
|
||
41</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-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</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>
|
||
49</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>
|
||
49</td><td class="bc-supports-yes bc-browser-edge_mobile bc-has-history"><span class="bc-browser-name">Edge Mobile</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
14<div class="bc-icons"><abbr class="only-icon" title="User must explicitly enable this feature."><span>Disabled</span><i class="ic-disabled"></i></abbr> </div><section class="bc-history" id="sect4"><dl><dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
14<div class="bc-icons"><abbr class="only-icon" title="User must explicitly enable this feature."><span>Disabled</span><i class="ic-disabled"></i></abbr> </div></dt><dd><abbr class="only-icon" title="User must explicitly enable this feature."><span>Disabled</span><i class="ic-disabled"></i></abbr> From version 14: this feature is behind the <code>Enable experimental Javascript features</code> preference.</dd></dl></section></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>
|
||
41</td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</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-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
5.0</td><td class="bc-supports-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
6.0.0</td></tr><tr><th scope="row">Rest in objects <div class="bc-icons"><abbr class="only-icon" title="Experimental. Expect behavior to change in the future."><span>Experimental</span><i class="ic-experimental"></i></abbr></div></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>
|
||
60</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>
|
||
55</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-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
11.1</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>
|
||
60</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>
|
||
60</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>
|
||
55</td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
11.1</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-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
8.3.0</td></tr></tbody></table><section class="bc-legend" id="sect5"><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><dt><abbr class="only-icon" title="Experimental. Expect behavior to change in the future."><span>Experimental. Expect behavior to change in the future.</span><i class="ic-experimental"></i></abbr></dt><dd>Experimental. Expect behavior to change in the future.</dd><dt><abbr class="only-icon" title="See implementation notes."><span>See implementation notes.</span><i class="ic-footnote"></i></abbr></dt><dd>See implementation notes.</dd><dt><abbr class="only-icon" title="User must explicitly enable this feature."><span>User must explicitly enable this feature.</span><i class="ic-disabled"></i></abbr></dt><dd>User must explicitly enable this feature.</dd></dl></section></div><p></p>
|
||
<h2 id="相关链接">相关链接</h2>
|
||
<ul>
|
||
<li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">赋值操作符</a></li>
|
||
<li><a class="external" href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/" rel="noopener">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li>
|
||
</ul>
|
||
<h3 id="译者注：关于_42">译者注：关于 42</h3>
|
||
<p>为什么在示例代码中出现了那么多 42？如果有什么特别的原因的话，以下是译者的猜测。</p>
|
||
<ul>
|
||
<li><a class="external external-icon" href="https://zh.wikipedia.org/wiki/42#%E5%9C%A8%E4%BA%BA%E7%B1%BB%E6%96%87%E5%8C%96%E4%B8%AD" rel="noopener">42#在人类文化中 - 维基百科</a></li>
|
||
<li><a class="external external-icon" href="https://zh.wikipedia.org/wiki/%E7%94%9F%E5%91%BD%E3%80%81%E5%AE%87%E5%AE%99%E4%BB%A5%E5%8F%8A%E4%BB%BB%E4%BD%95%E4%BA%8B%E6%83%85%E7%9A%84%E7%B5%82%E6%A5%B5%E7%AD%94%E6%A1%88" rel="noopener">生命、宇宙以及任何事情的终极答案 - 维基百科</a></li>
|
||
<li><a class="external external-icon" href="https://en.wikipedia.org/wiki/42_(number)#The_Hitchhiker's_Guide_to_the_Galaxy" rel="noopener">42_(number)#The Hitchhiker's Guide to the Galaxy - Wikipedia</a></li>
|
||
<li><a class="external external-icon" href="https://en.wikipedia.org/wiki/Phrases_from_The_Hitchhiker%27s_Guide_to_the_Galaxy#Answer_to_the_Ultimate_Question_of_Life,_the_Universe,_and_Everything_(42)" rel="noopener">Phrases_from_The_Hitchhiker%27s_Guide_to_the_Galaxy#Answer_to_the_Ultimate_Question_of_Life,_the_Universe,_and_Everything_(42) - Wikipedia</a></li>
|
||
</ul>
|
||
</article> |