aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/javascript/reference/functions/default_parameters/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-cn/web/javascript/reference/functions/default_parameters/index.html')
-rw-r--r--files/zh-cn/web/javascript/reference/functions/default_parameters/index.html220
1 files changed, 220 insertions, 0 deletions
diff --git a/files/zh-cn/web/javascript/reference/functions/default_parameters/index.html b/files/zh-cn/web/javascript/reference/functions/default_parameters/index.html
new file mode 100644
index 0000000000..7422fc208b
--- /dev/null
+++ b/files/zh-cn/web/javascript/reference/functions/default_parameters/index.html
@@ -0,0 +1,220 @@
+---
+title: 默认参数值
+slug: Web/JavaScript/Reference/Functions/Default_parameters
+tags:
+ - ECMAScript 2015
+ - Functions
+ - JavaScript
+translation_of: Web/JavaScript/Reference/Functions/Default_parameters
+---
+<p>{{jsSidebar("Functions")}}</p>
+
+<p><strong>函数默认参数</strong>允许在没有值或<code>undefined</code>被传入时使用默认形参。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div>
+
+
+
+<h2 id="语法" name="语法">语法</h2>
+
+<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[ = defaultValue1 ][, ..., <em>paramN</em>[ = defaultValueN ]]]) {
+<em> statements</em>
+}
+</pre>
+
+<h2 id="描述" name="描述">描述</h2>
+
+<p>JavaScript 中函数的参数默认是<code>{{jsxref("undefined")}}</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) {
+ return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5); // NaN !
+
+</pre>
+
+<p>为了防止这种情况,第二行代码解决了这个问题,其中如果只使用一个参数调用<code>multiply</code>,则<code>b</code>设置为<code>1</code>:</p>
+
+<pre class="brush: js">function multiply(a, b) {
+ b = (typeof b !== 'undefined') ? b : 1;
+ return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5); // 5</pre>
+
+<p>有了默认参数,我们不需要再在函数体内做不必要的检查。现在你可以在函数头将<code>b</code>的默认值置为<code>1</code>:</p>
+
+<pre class="brush: js">function multiply(a, b = 1) {
+ return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5); // 5</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) {
+ console.log(typeof num);
+}
+
+test(); // 'number' (num is set to 1)
+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>
+
+<h3 id="调用时解析">调用时解析</h3>
+
+<p>在函数被调用时,参数默认值会被解析,所以不像Python中的例子,每次函数调用时都会创建一个新的参数对象。</p>
+
+<pre class="brush: js">function append(value, array = []) {
+ array.push(value);
+ return array;
+}
+
+append(1); //[1]
+append(2); //[2], not [1, 2]</pre>
+
+<p>这个规则对于函数和变量也是适用的。</p>
+
+<pre class="brush: js">function callSomething(thing = something()) {
+ return thing;
+}
+
+let numberOfTimesCalled = 0;
+function something() {
+ numberOfTimesCalled += 1;
+ return numberOfTimesCalled;
+}
+
+callSomething(); // 1
+callSomething(); // 2</pre>
+
+<h3 id="默认参数可用于后面的默认参数">默认参数可用于后面的默认参数</h3>
+
+<p>已经遇到的参数可用于以后的默认参数:</p>
+
+<pre class="brush: js">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>
+
+<p>以下这个例子近似模拟了一些比较简单的情况,并说明了特殊情况是怎么被处理的。</p>
+
+<pre class="brush: js">function go() {
+ return ':P';
+}
+
+function withDefaults(a, b = 5, c = b, d = go(), e = this,
+ f = arguments, g = this.value) {
+ return [a, b, c, d, e, f, g];
+}
+
+function withoutDefaults(a, b, c, d, e, f, g) {
+ switch (arguments.length) {
+ case 0:
+ a;
+ case 1:
+ b = 5;
+ case 2:
+ c = b;
+ case 3:
+ d = go();
+ case 4:
+ e = this;
+ case 5:
+ f = arguments;
+ case 6:
+ g = this.value;
+ default:
+ }
+ return [a, b, c, d, e, f, g];
+}
+
+withDefaults.call({value: '=^_^='});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+
+withoutDefaults.call({value: '=^_^='});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]</pre>
+
+<h3 id="函数嵌套定义">函数嵌套定义</h3>
+
+<p>在 Gecko 33 {{geckoRelease(33)}} 中引入。在函数体内的函数声明不能引用内部的默认参数,并且会在 SpiderMonkey 抛出一个{{jsxref("ReferenceError")}}(现在是 {{jsxref("TypeError")}}),参见 {{bug(1022967)}}。默认参数总是会被首先执行,而在函数体内部的函数声明会在之后生效。</p>
+
+<pre class="brush: js">// Doesn't work! Throws ReferenceError.
+function f(a = go()) {
+ function go() { return ':P'; }
+}</pre>
+
+<h3 id="位于默认参数之后非默认参数">位于默认参数之后非默认参数</h3>
+
+<p>在Gecko 26 {{geckoRelease(26)}}之前,以下代码会造成{{jsxref("SyntaxError")}}错误。这已经在{{bug(1022967)}}中修复,并在以后的版本中按预期方式工作。参数仍然设置为从左到右,覆盖默认参数,即使后面的参数没有默认值。</p>
+
+<pre class="brush: js">function f(x = 1, y) {
+ return [x, y];
+}
+
+f(); // [1, undefined]
+f(2); // [2, undefined]</pre>
+
+<h3 id="有默认值的解构参数">有默认值的解构参数</h3>
+
+<p>你可以通过<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>为参数赋值:</p>
+
+<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+ return x + y + z;
+}
+
+f(); // 6</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>{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容" name="浏览器兼容">浏览器兼容</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 href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.functions.default_parameters")}}</p>
+
+<h2 id="相关链接" name="相关链接">相关链接</h2>
+
+<ul>
+ <li><a class="external external-icon" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Original proposal at ecmascript.org</a></li>
+</ul>
+
+<p> </p>