diff options
Diffstat (limited to 'files/zh-tw/web/javascript/reference/functions')
3 files changed, 49 insertions, 49 deletions
diff --git a/files/zh-tw/web/javascript/reference/functions/arguments/index.html b/files/zh-tw/web/javascript/reference/functions/arguments/index.html index 6b1d6a45a1..ddccefae10 100644 --- a/files/zh-tw/web/javascript/reference/functions/arguments/index.html +++ b/files/zh-tw/web/javascript/reference/functions/arguments/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Functions/arguments <h2 id="語法">語法</h2> -<pre class="syntaxbox notranslate">arguments</pre> +<pre class="syntaxbox">arguments</pre> <h2 id="描述">描述</h2> @@ -32,20 +32,20 @@ translation_of: Web/JavaScript/Reference/Functions/arguments <p>For example, if a function is passed three arguments, you can refer to them as follows:</p> -<pre class="brush: js notranslate">arguments[0] +<pre class="brush: js">arguments[0] arguments[1] arguments[2] </pre> <p>arguments 也可以被指定：</p> -<pre class="brush: js notranslate">arguments[1] = 'new value';</pre> +<pre class="brush: js">arguments[1] = 'new value';</pre> <p><code>arguments</code> 物件不是陣列。它與陣列非常相似，但是它沒有除了 <code>length</code> 這個屬性以外的其他陣列屬性。舉例，它沒有 <code>pop</code> 這個陣列方法。</p> <p>然而，它依然可以被轉換為真正的陣列(Array)。</p> -<pre class="brush: js notranslate">var args = Array.prototype.slice.call(arguments); +<pre class="brush: js">var args = Array.prototype.slice.call(arguments); var args = [].slice.call(arguments); // ES2015 @@ -55,7 +55,7 @@ const args = Array.from(arguments); <div class="warning"> <p class="brush: js">Using slice on arguments prevents optimizations in some JavaScript engines (V8 for example - <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">more information</a>). If you care for them, try constructing a new array by iterating through the arguments object instead. An alternative would be to use the despised <code>Array</code> constructor as a function:</p> -<pre class="brush: js notranslate">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));</pre> +<pre class="brush: js">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));</pre> </div> <p>You can use the <code>arguments</code> object if you call a function with more arguments than it is formally declared to accept. This technique is useful for functions that can be passed a variable number of arguments. Use <code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code> to determine the number of arguments passed to the function, and then process each argument by using the <code>arguments</code> object. To determine the number of parameters in the function <a href="/en-US/docs/Glossary/Signature/Function">signature</a>, use the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/length">Function.length</a></code> property.</p> @@ -64,17 +64,17 @@ const args = Array.from(arguments); <p>The typeof arguments returns 'object'. </p> -<pre class="notranslate">console.log(typeof arguments); // 'object' </pre> +<pre>console.log(typeof arguments); // 'object' </pre> <p>The typeof individual arguments can be determined with the use of indexing.</p> -<pre class="notranslate">console.log(typeof arguments[0]); //this will return the typeof individual arguments.</pre> +<pre>console.log(typeof arguments[0]); //this will return the typeof individual arguments.</pre> <h3 id="Using_the_Spread_Syntax_with_Arguments">Using the Spread Syntax with Arguments</h3> <p>You can also use the {{jsxref("Array.from()")}} method or the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> to convert arguments to a real Array:</p> -<pre class="brush: js notranslate">var args = Array.from(arguments); +<pre class="brush: js">var args = Array.from(arguments); var args = [...arguments]; </pre> @@ -97,14 +97,14 @@ var args = [...arguments]; <p>This example defines a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p> -<pre class="brush:js notranslate">function myConcat(separator) { +<pre class="brush:js">function myConcat(separator) { var args = Array.prototype.slice.call(arguments, 1); return args.join(separator); }</pre> <p>You can pass any number of arguments to this function, and it creates a list using each argument as an item in the list.</p> -<pre class="brush:js notranslate">// returns "red, orange, blue" +<pre class="brush:js">// returns "red, orange, blue" myConcat(', ', 'red', 'orange', 'blue'); // returns "elephant; giraffe; lion; cheetah" @@ -117,7 +117,7 @@ myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');</pre> <p>This example defines a function that creates a string containing HTML for a list. The only formal argument for the function is a string that is "<code>u</code>" if the list is to be unordered (bulleted), or "<code>o</code>" if the list is to be ordered (numbered). The function is defined as follows:</p> -<pre class="brush:js notranslate">function list(type) { +<pre class="brush:js">function list(type) { var result = '<' + type + 'l><li>'; var args = Array.prototype.slice.call(arguments, 1); result += args.join('</li><li>'); @@ -128,7 +128,7 @@ myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');</pre> <p>You can pass any number of arguments to this function, and it adds each argument as an item to a list of the type indicated. For example:</p> -<pre class="brush:js notranslate">var listHTML = list('u', 'One', 'Two', 'Three'); +<pre class="brush:js">var listHTML = list('u', 'One', 'Two', 'Three'); /* listHTML is: @@ -140,7 +140,7 @@ myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');</pre> <p>The <code>arguments</code> object can be used in conjunction with <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, and <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a> parameters.</p> -<pre class="brush: js notranslate">function foo(...args) { +<pre class="brush: js">function foo(...args) { return args; } foo(1, 2, 3); // [1,2,3] @@ -150,7 +150,7 @@ foo(1, 2, 3); // [1,2,3] <p>When a non-strict function <strong><strong>does </strong>not</strong> contain <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, or <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a> parameters, then the values in the <code>arguments</code> object <strong>do</strong> track the values of the arguments (and vice versa). See the code below:</p> -<pre class="brush: js notranslate">function func(a) { +<pre class="brush: js">function func(a) { arguments[0] = 99; // updating arguments[0] also updates a console.log(a); } @@ -159,7 +159,7 @@ func(10); // 99 <p>and</p> -<pre class="brush: js notranslate">function func(a) { +<pre class="brush: js">function func(a) { a = 99; // updating a also updates arguments[0] console.log(arguments[0]); } @@ -168,7 +168,7 @@ func(10); // 99 <p>When a non-strict function <strong>does</strong> contain <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, or <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a> parameters, then the values in the <code>arguments</code> object <strong>do not</strong> track the values of the arguments (and vice versa). Instead, they reflect the arguments provided at the time of invocation:</p> -<pre class="brush: js notranslate">function func(a = 55) { +<pre class="brush: js">function func(a = 55) { arguments[0] = 99; // updating arguments[0] does not also update a console.log(a); } @@ -176,7 +176,7 @@ func(10); // 10</pre> <p>and</p> -<pre class="brush: js notranslate">function func(a = 55) { +<pre class="brush: js">function func(a = 55) { a = 99; // updating a does not also update arguments[0] console.log(arguments[0]); } @@ -185,7 +185,7 @@ func(10); // 10 <p>and</p> -<pre class="brush: js notranslate">function func(a = 55) { +<pre class="brush: js">function func(a = 55) { console.log(arguments[0]); } func(); // undefined</pre> diff --git a/files/zh-tw/web/javascript/reference/functions/arrow_functions/index.html b/files/zh-tw/web/javascript/reference/functions/arrow_functions/index.html index 82285afeae..0b53f14444 100644 --- a/files/zh-tw/web/javascript/reference/functions/arrow_functions/index.html +++ b/files/zh-tw/web/javascript/reference/functions/arrow_functions/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Functions/Arrow_functions <h2 id="基本語法">基本語法</h2> -<pre class="syntaxbox notranslate">(參數1, 參數2, …, 參數N) => { 陳述式; } +<pre class="syntaxbox">(參數1, 參數2, …, 參數N) => { 陳述式; } (參數1, 參數2, …, 參數N) => 表示式; // 等相同(參數1, 參數2, …, 參數N) => { return 表示式; } @@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Reference/Functions/Arrow_functions <h2 id="進階語法">進階語法</h2> -<pre class="syntaxbox notranslate">// 用大括號將內容括起來，返回一個物件字面值表示法： +<pre class="syntaxbox">// 用大括號將內容括起來，返回一個物件字面值表示法： params => ({foo: bar}) // 支援<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters">其餘參數</a>與<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/Default_parameters">預設參數</a> @@ -46,7 +46,7 @@ var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6 <h3 id="更短的函式寫法">更短的函式寫法</h3> -<pre class="brush: js notranslate">var elements = [ +<pre class="brush: js">var elements = [ 'Hydrogen', 'Helium', 'Lithium', @@ -96,7 +96,7 @@ elements.map(({ length }) => length); // [8, 6, 7, 9] <p>事實證明這對物件導向程式設計來說並不理想。</p> -<pre class="brush: js notranslate">function Person() { +<pre class="brush: js">function Person() { // Person() 建構式將 this 定義為它自己的一個實體 this.age = 0; @@ -112,7 +112,7 @@ var p = new Person();</pre> <p>在 ECMAScript 3/5 裡面，有關 <code>this</code> 的問題，可以透過指派 <code>this</code> 值給可以關閉的變數解決。</p> -<pre class="brush: js notranslate">function Person() { +<pre class="brush: js">function Person() { var self = this; // 有些人喜歡 `that` 而不是 `self`. // 選好一種取法後始終如一 self.age = 0; @@ -129,7 +129,7 @@ var p = new Person();</pre> <p>因此，在以下程式碼內，傳遞給 <code>setInterval</code> 的 箭頭函式中的<code>this</code> ，會與封閉函式的 <code>this</code> 值相同：</p> -<pre class="brush: js notranslate">function Person(){ +<pre class="brush: js">function Person(){ this.age = 0; setInterval(() => { @@ -143,7 +143,7 @@ var p = new Person();</pre> <p>由於 <code>this</code> 變數具有詞彙上綁定意義，所以<a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴格模式</a>的宣告對 <code>this</code> 的作用將被忽略。</p> -<pre class="brush: js notranslate">var f = () => {'use strict'; return this}; +<pre class="brush: js">var f = () => {'use strict'; return this}; f() === window; // 或是 global 物件</pre> <p>但嚴格模式的其他作用依舊存在。</p> @@ -152,7 +152,7 @@ f() === window; // 或是 global 物件</pre> <p>由於箭頭函式並沒有自己的 <code>this</code>，所以透過 <code>call()</code> 或 <code>apply()</code> 呼叫箭頭函式只能傳入參數。<code>thisArg</code> 將會被忽略。</p> -<pre class="brush: js notranslate">var adder = { +<pre class="brush: js">var adder = { base : 1, add : function(a) { var f = v => v + this.base; @@ -174,7 +174,7 @@ console.log(adder.addThruCall(1)); // 依舊顯示 2 <p>箭頭函式並沒有自己的 <a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> 物件</a>。所以在此例中，<code>arguments</code> 只是參考到 enclosing 作用域裡面的相同變數：</p> -<pre class="brush: js notranslate">var arguments = [1, 2, 3]; +<pre class="brush: js">var arguments = [1, 2, 3]; var arr = () => arguments[0]; arr(); // 1 @@ -188,7 +188,7 @@ foo(1); // 2</pre> <p>大多時候，使用<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters">其餘參數</a> 是取代 <code>arguments</code> 物件的較好方式。</p> -<pre class="brush: js notranslate">function foo(n) { +<pre class="brush: js">function foo(n) { var f = (...args) => args[0] + n; return f(10); } @@ -199,7 +199,7 @@ foo(1); // 11</pre> <p>如同前述，箭頭函式運算式最適合用在非方法的函式。來看看如果要把它們當成方法來用，會發生什麼事：</p> -<pre class="brush: js notranslate"><code>'use strict'; +<pre class="brush: js"><code>'use strict'; var obj = { i: 10, b: () => console.log(this.i, this), @@ -212,7 +212,7 @@ obj.c(); // 印出 10, Object {...}</code></pre> <p>箭頭函式並沒有自己的 <code>this</code>。另一個例子與 {{jsxref("Object.defineProperty()")}} 有關：</p> -<pre class="brush: js notranslate">'use strict'; +<pre class="brush: js">'use strict'; var obj = { a: 10 @@ -230,14 +230,14 @@ Object.defineProperty(obj, 'b', { <p>箭頭函式不可作為建構式使用；若使用於建構式，會在使用 <code>new</code> 時候拋出錯誤。</p> -<pre class="brush: js notranslate">var Foo = () => {}; +<pre class="brush: js">var Foo = () => {}; var foo = new Foo(); // TypeError: Foo is not a constructor</pre> <h3 id="使用_prototype_屬性">使用 <code>prototype</code> 屬性</h3> <p>箭頭函式並沒有原型（<code>prototype</code>）屬性。</p> -<pre class="brush: js notranslate">var Foo = () => {}; +<pre class="brush: js">var Foo = () => {}; console.log(Foo.prototype); // undefined </pre> @@ -251,21 +251,21 @@ console.log(Foo.prototype); // undefined <p>在 concise body 裡面只需要輸入運算式，就會附上內建的回傳。在 block body 裡面就必須附上明確的 <code>return</code> 宣告。</p> -<pre class="brush: js notranslate"><code>var func = x => x * x; // concise 語法會內建 "return" +<pre class="brush: js"><code>var func = x => x * x; // concise 語法會內建 "return" var func = (x, y) => { return x + y; }; // block body 需要明確的 "return"</code></pre> <h2 id="回傳物件字面值">回傳物件字面值</h2> <p>請注意只使用 <code>params => {object:literal}</code> 並不會按照期望般回傳物件字面值（object literal）。</p> -<pre class="brush: js notranslate"><code>var func = () => { foo: 1 }; // Calling func() returns undefined! +<pre class="brush: js"><code>var func = () => { foo: 1 }; // Calling func() returns undefined! var func = () => { foo: function() {} }; // SyntaxError: Unexpected token (</code></pre> <p>因為在大括弧（<code>{}</code>）裡面的文字會被解析為有序宣告（例如 <code>foo</code> 會被當作標記（label）、而不是物件的 key ）</p> <p>要記得把物件字面值包在圓括弧內。</p> -<pre class="brush: js notranslate"><code>var func = () => ({foo: 1}); +<pre class="brush: js"><code>var func = () => ({foo: 1}); var func = () => ({ foo: function() {} }); </code> </pre> @@ -273,14 +273,14 @@ var func = () => ({ foo: function() {} }); </code> <p>箭頭函式不可以在參數及箭頭間包含換行。</p> -<pre class="brush: js notranslate"><code>var func = () +<pre class="brush: js"><code>var func = () => 1; // SyntaxError: expected expression, got '=>'</code></pre> <h2 id="Parsing_order">Parsing order</h2> <p>箭頭函式的箭頭儘管不是操作符，但藉著<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">運算子優先等級</a>，箭頭函式有著和普通函式不相同的特殊解析規則。</p> -<pre class="brush: js notranslate"><code>let callback; +<pre class="brush: js"><code>let callback; callback = callback || function() {}; // ok callback = callback || () => {}; // SyntaxError: invalid arrow-function arguments @@ -288,7 +288,7 @@ callback = callback || (() => {}); // ok</code></pre> <h2 id="更多範例">更多範例</h2> -<pre class="brush: js notranslate">// 回傳 undefined 的箭頭函式 +<pre class="brush: js">// 回傳 undefined 的箭頭函式 let empty = () => {}; (() => "foobar")() // 回傳 "foobar" diff --git a/files/zh-tw/web/javascript/reference/functions/default_parameters/index.html b/files/zh-tw/web/javascript/reference/functions/default_parameters/index.html index 6faacba9a3..e7a796f4d1 100644 --- a/files/zh-tw/web/javascript/reference/functions/default_parameters/index.html +++ b/files/zh-tw/web/javascript/reference/functions/default_parameters/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Functions/Default_parameters <h2 id="語法">語法</h2> -<pre class="syntaxbox notranslate">function [<em>name</em>]([<em>param1</em>[ = defaultValue1 ][, ..., <em>paramN</em>[ = defaultValueN ]]]) { +<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[ = defaultValue1 ][, ..., <em>paramN</em>[ = defaultValueN ]]]) { <em>要執行的程序</em> } </pre> @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Functions/Default_parameters <p>以往設定預設值有個普遍方法：在函式的內容裡檢查傳入參數是否為 <code>undefined ，如果是的話，爲他指定一個值。如下列範例，若函式被呼叫時，並沒有提供 b 的值，它的值就會是 undefined，在計算 a*b 時，以及呼叫 multiply 時，就會回傳 NaN。然而這在範例的第二行被阻止了：</code>:</p> -<pre class="brush: js notranslate">function multiply(a, b) { +<pre class="brush: js">function multiply(a, b) { b = (typeof b !== 'undefined') ? b : 1; return a * b; } @@ -32,7 +32,7 @@ multiply(5); // 5 <p>有了 ES2015 的預設參數，再也不用於函式進行檢查了，現在只要簡單的在函式的起始處為 b 指定 1 的值：</p> -<pre class="brush: js notranslate">function multiply(a, b = 1) { +<pre class="brush: js">function multiply(a, b = 1) { return a * b; } @@ -47,7 +47,7 @@ multiply(5); // 5 <p>這邊第二段函式呼叫中，僅管第二個傳入參數在呼叫時明確地指定為undefined（雖不是null），其顏色參數的值是預設值（rosybrown）。</p> -<pre class="brush: js notranslate">function setBackgroundColor(element, color = 'rosybrown') { +<pre class="brush: js">function setBackgroundColor(element, color = 'rosybrown') { element.style.backgroundColor = color; } @@ -60,7 +60,7 @@ setBackgroundColor(someDiv, 'blue'); // color set to 'blue' <p>跟Python等語言不同的地方是，先前預設的代數值會拿來進行函式內的程序，也因此在函式呼叫的時候，會建立新物件。</p> -<pre class="brush: js notranslate">function append(value, array = []) { +<pre class="brush: js">function append(value, array = []) { array.push(value); return array; } @@ -71,7 +71,7 @@ append(2); //[2], 而非 [1, 2] <p>諸如此類的做法，也適用在函式和變量。</p> -<pre class="brush: js notranslate">function callSomething(thing = something()) { +<pre class="brush: js">function callSomething(thing = something()) { return thing; } @@ -85,7 +85,7 @@ callSomething(); //sth</pre> <p>先前有碰到的參數，後來的即可使用。</p> -<pre class="brush: js notranslate">function singularAutoPlural(singular, plural = singular + '們', +<pre class="brush: js">function singularAutoPlural(singular, plural = singular + '們', rallyingCry = plural + '，進攻啊!!!') { return [singular, plural, rallyingCry]; } @@ -103,7 +103,7 @@ singularAutoPlural('鹿兒', '鹿兒們', '鹿兒們平心靜氣的 \ <p>This functionality is approximated in a straight forward fashion and demonstrates how many edge cases are handled.</p> -<pre class="brush: js notranslate">function go() { +<pre class="brush: js">function go() { return ':P'; } @@ -145,7 +145,7 @@ withoutDefaults.call({value: '=^_^='}); <p>Introduced in Gecko 33 {{geckoRelease(33)}}. Functions declared in the function body cannot be referred inside default parameters and throw a {{jsxref("ReferenceError")}} (currently a {{jsxref("TypeError")}} in SpiderMonkey, see {{bug(1022967)}}). Default parameters are always executed first, function declarations inside the function body evaluate afterwards.</p> -<pre class="brush: js notranslate">// 行不通的！ 最後會丟出 ReferenceError。 +<pre class="brush: js">// 行不通的！ 最後會丟出 ReferenceError。 function f(a = go()) { function go() { return ':P'; } } @@ -155,7 +155,7 @@ function f(a = go()) { <p>Prior to Gecko 26 {{geckoRelease(26)}}, the following code resulted in a {{jsxref("SyntaxError")}}. This has been fixed in {{bug(777060)}} and works as expected in later versions. Parameters are still set left-to-right, overwriting default parameters even if there are later parameters without defaults.</p> -<pre class="brush: js notranslate">function f(x = 1, y) { +<pre class="brush: js">function f(x = 1, y) { return [x, y]; } @@ -167,7 +167,7 @@ f(2); // [2, undefined] <p>You can use default value assignment with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a> notation:</p> -<pre class="brush: js notranslate">function f([x, y] = [1, 2], {z: z} = {z: 3}) { +<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) { return x + y + z; } |