mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2026-03-06 13:54:12 +08:00
语法高亮，滚动条美化，设置页面调整
This commit is contained in:
fofolee
@@ -4,7 +4,7 @@
|
||||
<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 class="brush: js">var a, b, rest;
|
||||
<pre><code class="language-javascript">var a, b, rest;
|
||||
[a, b] = [10, 20];
|
||||
console.log(a); // 10
|
||||
console.log(b); // 20
|
||||
@@ -24,52 +24,52 @@ console.log(b); // 20
|
||||
console.log(a); // 10
|
||||
console.log(b); // 20
|
||||
console.log(rest); // {c: 30, d: 40}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="描述">描述</h2>
|
||||
<p>对象和数组逐个对应表达式，或称对象字面量和数组字面量，提供了一种简单的定义一个特定的数据组的方法。</p>
|
||||
<pre class="brush: js">var x = [1, 2, 3, 4, 5];</pre>
|
||||
<pre><code class="language-javascript">var x = [1, 2, 3, 4, 5];</code></pre>
|
||||
<p>解构赋值使用了相同的语法，不同的是在表达式左边定义了要从原变量中取出什么变量。</p>
|
||||
<pre class="brush: js">var x = [1, 2, 3, 4, 5];
|
||||
<pre><code class="language-javascript">var x = [1, 2, 3, 4, 5];
|
||||
var [y, z] = x;
|
||||
console.log(y); // 1
|
||||
console.log(z); // 2
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>JavaScript 中，解构赋值的作用类似于 Perl 和 Python 语言中的相似特性。</p>
|
||||
<h2 id="解构数组">解构数组</h2>
|
||||
<h3 id="变量声明并赋值时的解构">变量声明并赋值时的解构</h3>
|
||||
<pre class="brush: js">var foo = ["one", "two", "three"];
|
||||
<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"</pre>
|
||||
console.log(three); // "three"</code></pre>
|
||||
<h3 id="变量先声明后赋值时的解构">变量先声明后赋值时的解构</h3>
|
||||
<p>通过解构分离变量的声明，可以为一个变量赋值。</p>
|
||||
<pre class="brush: js">var a, b;
|
||||
<pre><code class="language-javascript">var a, b;
|
||||
|
||||
[a, b] = [1, 2];
|
||||
console.log(a); // 1
|
||||
console.log(b); // 2</pre>
|
||||
console.log(b); // 2</code></pre>
|
||||
<h3 id="默认值">默认值</h3>
|
||||
<p>为了防止从数组中取出一个值为<code>undefined</code>的对象，可以在表达式左边的数组中为任意对象预设默认值。</p>
|
||||
<pre class="brush: js">var a, b;
|
||||
<pre><code class="language-javascript">var a, b;
|
||||
|
||||
[a=5, b=7] = [1];
|
||||
console.log(a); // 1
|
||||
console.log(b); // 7</pre>
|
||||
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 class="brush: js">var a = 1;
|
||||
<pre><code class="language-javascript">var a = 1;
|
||||
var b = 3;
|
||||
|
||||
[a, b] = [b, a];
|
||||
console.log(a); // 3
|
||||
console.log(b); // 1</pre>
|
||||
console.log(b); // 1</code></pre>
|
||||
<h3 id="解析一个从函数返回的数组">解析一个从函数返回的数组</h3>
|
||||
<p>从一个函数返回一个数组是十分常见的情况。解构使得处理返回值为数组时更加方便。</p>
|
||||
<p>在下面例子中，要让 <code>[1, 2]</code> 成为函数的 <code>f()</code> 的输出值，可以使用解构在一行内完成解析。</p>
|
||||
<pre class="brush: js">function f() {
|
||||
<pre><code class="language-javascript">function f() {
|
||||
return [1, 2];
|
||||
}
|
||||
|
||||
@@ -77,30 +77,30 @@ var a, b;
|
||||
[a, b] = f();
|
||||
console.log(a); // 1
|
||||
console.log(b); // 2
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="忽略某些返回值">忽略某些返回值</h3>
|
||||
<p>你也可以忽略你不感兴趣的返回值：</p>
|
||||
<pre class="brush:js">function f() {
|
||||
<pre><code class="language-js">function f() {
|
||||
return [1, 2, 3];
|
||||
}
|
||||
|
||||
var [a, , b] = f();
|
||||
console.log(a); // 1
|
||||
console.log(b); // 3</pre>
|
||||
console.log(b); // 3</code></pre>
|
||||
<p>你也可以忽略全部返回值：</p>
|
||||
<pre class="brush:js">[,,] = f();
|
||||
</pre>
|
||||
<pre><code class="language-js">[,,] = f();
|
||||
</code></pre>
|
||||
<h3 id="将剩余数组赋值给一个变量">将剩余数组赋值给一个变量</h3>
|
||||
<p>当解构一个数组时，可以使用剩余模式，将数组剩余部分赋值给一个变量。</p>
|
||||
<pre class="brush: js">var [a, ...b] = [1, 2, 3];
|
||||
<pre><code class="language-javascript">var [a, ...b] = [1, 2, 3];
|
||||
console.log(a); // 1
|
||||
console.log(b); // [2, 3]</pre>
|
||||
console.log(b); // [2, 3]</code></pre>
|
||||
<p>注意：如果剩余元素右侧有逗号，会抛出 <a href="Reference/Global_Objects/SyntaxError" title="SyntaxError 对象代表尝试解析语法上不合法的代码的错误。"><code>SyntaxError</code></a>，因为剩余元素必须是数组的最后一个元素。</p>
|
||||
<pre class="brush: js example-bad">var [a, ...b,] = [1, 2, 3];
|
||||
// SyntaxError: rest element may not have a trailing comma</pre>
|
||||
<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 class="brush: js">function parseProtocol(url) {
|
||||
<pre><code class="language-javascript">function parseProtocol(url) {
|
||||
var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
|
||||
if (!parsedURL) {
|
||||
return false;
|
||||
@@ -112,21 +112,21 @@ console.log(b); // [2, 3]</pre>
|
||||
}
|
||||
|
||||
console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="解构对象">解构对象</h2>
|
||||
<h3 id="基本赋值">基本赋值</h3>
|
||||
<pre class="brush: js">var o = {p: 42, q: true};
|
||||
<pre><code class="language-javascript">var o = {p: 42, q: true};
|
||||
var {p, q} = o;
|
||||
|
||||
console.log(p); // 42
|
||||
console.log(q); // true
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="无声明赋值">无声明赋值</h3>
|
||||
<p>通过解构，无需声明即可赋值一个变量。</p>
|
||||
<pre class="brush: js">var a, b;
|
||||
<pre><code class="language-javascript">var a, b;
|
||||
|
||||
({a, b} = {a: 1, b: 2});
|
||||
</pre>
|
||||
</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>
|
||||
@@ -135,28 +135,28 @@ console.log(q); // true
|
||||
</div>
|
||||
<h3 id="给新的变量名赋值">给新的变量名赋值</h3>
|
||||
<p>可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。</p>
|
||||
<pre class="brush: js">var o = {p: 42, q: true};
|
||||
<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 </pre>
|
||||
console.log(bar); // true </code></pre>
|
||||
<h3 id="默认值_2">默认值</h3>
|
||||
<p>变量可以先赋予默认值。当要提取的对象没有对应的属性，变量就被赋予默认值。</p>
|
||||
<pre class="brush: js">var {a = 10, b = 5} = {a: 3};
|
||||
<pre><code class="language-javascript">var {a = 10, b = 5} = {a: 3};
|
||||
|
||||
console.log(a); // 3
|
||||
console.log(b); // 5
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="给新的变量命名并提供默认值">给新的变量命名并提供默认值</h3>
|
||||
<p>一个属性可以是1）从一个对象解构，并分配给一个不同名称的变量，2）分配一个默认值，以防未解构的值是<code>undefined</code>。</p>
|
||||
<pre class="brush: js">var {a:aa = 10, b:bb = 5} = {a: 3};
|
||||
<pre><code class="language-javascript">var {a:aa = 10, b:bb = 5} = {a: 3};
|
||||
|
||||
console.log(aa); // 3
|
||||
console.log(bb); // 5
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="函数参数默认值">函数参数默认值</h3>
|
||||
<h4 id="ES5_版本">ES5 版本</h4>
|
||||
<pre class="brush: js">function drawES5Chart(options) {
|
||||
<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;
|
||||
@@ -168,9 +168,9 @@ console.log(bb); // 5
|
||||
drawES5Chart({
|
||||
cords: { x: 18, y: 30 },
|
||||
radius: 30
|
||||
});</pre>
|
||||
});</code></pre>
|
||||
<h4 id="ES2015_版本">ES2015 版本</h4>
|
||||
<pre class="brush: js">function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {})
|
||||
<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
|
||||
@@ -179,12 +179,12 @@ drawES5Chart({
|
||||
drawES2015Chart({
|
||||
cords: { x: 18, y: 30 },
|
||||
radius: 30
|
||||
});</pre>
|
||||
});</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 class="brush:js">const metadata = {
|
||||
<pre><code class="language-js">const metadata = {
|
||||
title: 'Scratchpad',
|
||||
translations: [
|
||||
{
|
||||
@@ -208,9 +208,9 @@ let {
|
||||
} = metadata;
|
||||
|
||||
console.log(englishTitle); // "Scratchpad"
|
||||
console.log(localeTitle); // "JavaScript-Umgebung"</pre>
|
||||
console.log(localeTitle); // "JavaScript-Umgebung"</code></pre>
|
||||
<h3 id="For_of_迭代和解构">For of 迭代和解构</h3>
|
||||
<pre class="brush: js">var people = [
|
||||
<pre><code class="language-javascript">var people = [
|
||||
{
|
||||
name: 'Mike Smith',
|
||||
family: {
|
||||
@@ -236,9 +236,9 @@ for (var {name: n, family: {father: f}} of people) {
|
||||
}
|
||||
|
||||
// "Name: Mike Smith, Father: Harry Smith"
|
||||
// "Name: Tom Jones, Father: Richard Jones"</pre>
|
||||
// "Name: Tom Jones, Father: Richard Jones"</code></pre>
|
||||
<h3 id="从作为函数实参的对象中提取数据">从作为函数实参的对象中提取数据</h3>
|
||||
<pre class="brush:js">function userId({id}) {
|
||||
<pre><code class="language-js">function userId({id}) {
|
||||
return id;
|
||||
}
|
||||
|
||||
@@ -256,28 +256,28 @@ var user = {
|
||||
};
|
||||
|
||||
console.log("userId: " + userId(user)); // "userId: 42"
|
||||
whois(user); // "jdoe is John"</pre>
|
||||
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 class="brush: js">let key = "z";
|
||||
<pre><code class="language-javascript">let key = "z";
|
||||
let { [key]: foo } = { z: "bar" };
|
||||
|
||||
console.log(foo); // "bar"
|
||||
</pre>
|
||||
</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 class="brush: js">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
|
||||
<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 }</pre>
|
||||
rest; // { c: 30, d: 40 }</code></pre>
|
||||
<h3 id="无效的_JavaScript_标识符作为属性名称">无效的 JavaScript 标识符作为属性名称</h3>
|
||||
<p>通过提供有效的替代标识符，解构可以与不是有效的JavaScript<a href="/zh-CN/docs/Glossary/Identifier">标识符</a>的属性名称一起使用。</p>
|
||||
<pre class="brush: js">const foo = { 'fizz-buzz': true };
|
||||
<pre><code class="language-javascript">const foo = { 'fizz-buzz': true };
|
||||
const { 'fizz-buzz': fizzBuzz } = foo;
|
||||
|
||||
console.log(fizzBuzz); // "true"
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
Reference in New Issue
Block a user