mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2026-02-27 09:32:01 +08:00
语法高亮，滚动条美化，设置页面调整
This commit is contained in:
fofolee
@@ -4,41 +4,41 @@
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/functions-default.html" width="100%"></iframe></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="语法" name="语法">语法</h2>
|
||||
<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[ = defaultValue1 ][, ..., <em>paramN</em>[ = defaultValueN ]]]) {
|
||||
<pre><code class="language-javascript">function [<em>name</em>]([<em>param1</em>[ = defaultValue1 ][, ..., <em>paramN</em>[ = defaultValueN ]]]) {
|
||||
<em> statements</em>
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="描述" name="描述">描述</h2>
|
||||
<p>JavaScript 中函数的参数默认是<code><a href="Reference/Global_Objects/undefined" title="undefined是全局对象的一个属性。也就是说，它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined。"><code>undefined</code></a></code>。然而，在某些情况下可能需要设置一个不同的默认值。这是默认参数可以帮助的地方。</p>
|
||||
<p>以前，一般设置默认参数的方法是在函数体测试参数是否为<code>undefined</code>，如果是的话就设置为默认的值。</p>
|
||||
<p>下面的例子中，如果在调用<code>multiply</code>时，参数<code>b</code>的值没有提供，那么它的值就为<code>undefined</code>。如果直接执行<code>a * b</code>，函数会返回 <code>NaN</code>。</p>
|
||||
<pre class="brush: js">function multiply(a, b) {
|
||||
<pre><code class="language-javascript">function multiply(a, b) {
|
||||
return a * b;
|
||||
}
|
||||
|
||||
multiply(5, 2); // 10
|
||||
multiply(5); // NaN !
|
||||
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>为了防止这种情况，第二行代码解决了这个问题，其中如果只使用一个参数调用<code>multiply</code>，则<code>b</code>设置为<code>1</code>：</p>
|
||||
<pre class="brush: js">function multiply(a, b) {
|
||||
<pre><code class="language-javascript">function multiply(a, b) {
|
||||
b = (typeof b !== 'undefined') ? b : 1;
|
||||
return a * b;
|
||||
}
|
||||
|
||||
multiply(5, 2); // 10
|
||||
multiply(5); // 5</pre>
|
||||
multiply(5); // 5</code></pre>
|
||||
<p>有了默认参数，我们不需要再在函数体内做不必要的检查。现在你可以在函数头将<code>b</code>的默认值置为<code>1</code>：</p>
|
||||
<pre class="brush: js">function multiply(a, b = 1) {
|
||||
<pre><code class="language-javascript">function multiply(a, b = 1) {
|
||||
return a * b;
|
||||
}
|
||||
|
||||
multiply(5, 2); // 10
|
||||
multiply(5); // 5</pre>
|
||||
multiply(5); // 5</code></pre>
|
||||
<h2 id="示例" name="示例">示例</h2>
|
||||
<h3 id="传入_undefined_vs_其他假值">传入 <code>undefined</code> vs 其他假值</h3>
|
||||
<p>在第二次调用中，即使第一个参数在调用时显式设置为<code>undefined</code>（虽然不是<code>null</code>或其他<a href="/zh-CN/docs/Glossary/Falsy">falsy</a>值），但是<code>num</code>参数的值是默认值。</p>
|
||||
<pre class="brush: js">function test(num = 1) {
|
||||
<pre><code class="language-javascript">function test(num = 1) {
|
||||
console.log(typeof num);
|
||||
}
|
||||
|
||||
@@ -47,18 +47,18 @@ test(undefined); // 'number' (num is set to 1 too)
|
||||
|
||||
// test with other falsy values:
|
||||
test(''); // 'string' (num is set to '')
|
||||
test(null); // 'object' (num is set to null)</pre>
|
||||
test(null); // 'object' (num is set to null)</code></pre>
|
||||
<h3 id="调用时解析">调用时解析</h3>
|
||||
<p>在函数被调用时，参数默认值会被解析，所以不像Python中的例子，每次函数调用时都会创建一个新的参数对象。</p>
|
||||
<pre class="brush: js">function append(value, array = []) {
|
||||
<pre><code class="language-javascript">function append(value, array = []) {
|
||||
array.push(value);
|
||||
return array;
|
||||
}
|
||||
|
||||
append(1); //[1]
|
||||
append(2); //[2], not [1, 2]</pre>
|
||||
append(2); //[2], not [1, 2]</code></pre>
|
||||
<p>这个规则对于函数和变量也是适用的。</p>
|
||||
<pre class="brush: js">function callSomething(thing = something()) {
|
||||
<pre><code class="language-javascript">function callSomething(thing = something()) {
|
||||
return thing;
|
||||
}
|
||||
|
||||
@@ -69,18 +69,18 @@ function something() {
|
||||
}
|
||||
|
||||
callSomething(); // 1
|
||||
callSomething(); // 2</pre>
|
||||
callSomething(); // 2</code></pre>
|
||||
<h3 id="默认参数可用于后面的默认参数">默认参数可用于后面的默认参数</h3>
|
||||
<p>已经遇到的参数可用于以后的默认参数：</p>
|
||||
<pre class="brush: js">function greet(name, greeting, message = greeting + ' ' + name) {
|
||||
<pre><code class="language-javascript">function greet(name, greeting, message = greeting + ' ' + name) {
|
||||
return [name, greeting, message];
|
||||
}
|
||||
|
||||
greet('David', 'Hi'); // ["David", "Hi", "Hi David"]
|
||||
greet('David', 'Hi', 'Happy Birthday!'); // ["David", "Hi", "Happy Birthday!"]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>以下这个例子近似模拟了一些比较简单的情况，并说明了特殊情况是怎么被处理的。</p>
|
||||
<pre class="brush: js">function go() {
|
||||
<pre><code class="language-javascript">function go() {
|
||||
return ':P';
|
||||
}
|
||||
|
||||
@@ -115,28 +115,28 @@ withDefaults.call({value: '=^_^='});
|
||||
|
||||
|
||||
withoutDefaults.call({value: '=^_^='});
|
||||
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]</pre>
|
||||
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]</code></pre>
|
||||
<h3 id="函数嵌套定义">函数嵌套定义</h3>
|
||||
<p>在 Gecko 33 (Firefox 33 / Thunderbird 33 / SeaMonkey 2.30) 中引入。在函数体内的函数声明不能引用内部的默认参数，并且会在 SpiderMonkey 抛出一个<a href="Reference/Global_Objects/ReferenceError" title="ReferenceError（引用错误） 对象代表当一个不存在的变量被引用时发生的错误。"><code>ReferenceError</code></a>（现在是 <a href="Reference/Global_Objects/TypeError" title="TypeError（类型错误） 对象用来表示值的类型非预期类型时发生的错误。"><code>TypeError</code></a>），参见 <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1022967" rel="noopener" title="FIXED: Separate environment for default parameter and function body if default parameter contains expression">bug 1022967</a>。默认参数总是会被首先执行，而在函数体内部的函数声明会在之后生效。</p>
|
||||
<pre class="brush: js">// Doesn't work! Throws ReferenceError.
|
||||
<pre><code class="language-javascript">// Doesn't work! Throws ReferenceError.
|
||||
function f(a = go()) {
|
||||
function go() { return ':P'; }
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h3 id="位于默认参数之后非默认参数">位于默认参数之后非默认参数</h3>
|
||||
<p>在Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2)之前，以下代码会造成<a href="Reference/Global_Objects/SyntaxError" title="SyntaxError 对象代表尝试解析语法上不合法的代码的错误。"><code>SyntaxError</code></a>错误。这已经在<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1022967" rel="noopener" title="FIXED: Separate environment for default parameter and function body if default parameter contains expression">bug 1022967</a>中修复，并在以后的版本中按预期方式工作。参数仍然设置为从左到右，覆盖默认参数，即使后面的参数没有默认值。</p>
|
||||
<pre class="brush: js">function f(x = 1, y) {
|
||||
<pre><code class="language-javascript">function f(x = 1, y) {
|
||||
return [x, y];
|
||||
}
|
||||
|
||||
f(); // [1, undefined]
|
||||
f(2); // [2, undefined]</pre>
|
||||
f(2); // [2, undefined]</code></pre>
|
||||
<h3 id="有默认值的解构参数">有默认值的解构参数</h3>
|
||||
<p>你可以通过<a href="Reference/Operators/Destructuring_assignment">解构赋值</a>为参数赋值：</p>
|
||||
<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) {
|
||||
<pre><code class="language-javascript">function f([x, y] = [1, 2], {z: z} = {z: 3}) {
|
||||
return x + y + z;
|
||||
}
|
||||
|
||||
f(); // 6</pre>
|
||||
f(); // 6</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
Reference in New Issue
Block a user