From a0ad1110c59f5540af06e02b597e37313d8373c9 Mon Sep 17 00:00:00 2001 From: Len Chen Date: Wed, 4 Sep 2019 11:45:37 +0800 Subject: [PATCH 1/4] feat: translation 50% of Functions --- .../14-function-basics/article.md | 124 +++++++++--------- 1 file changed, 60 insertions(+), 64 deletions(-) diff --git a/1-js/02-first-steps/14-function-basics/article.md b/1-js/02-first-steps/14-function-basics/article.md index b1881e311..87b72ef4a 100644 --- a/1-js/02-first-steps/14-function-basics/article.md +++ b/1-js/02-first-steps/14-function-basics/article.md @@ -1,18 +1,18 @@ -# Functions +# 函式(Functions) -Quite often we need to perform a similar action in many places of the script. +我們常常會需要在腳本的很多地方執行類似的動作。 -For example, we need to show a nice-looking message when a visitor logs in, logs out and maybe somewhere else. +例如,我們需要在使用者登入、登出或做其他事情時,顯示一則美觀的訊息。 -Functions are the main "building blocks" of the program. They allow the code to be called many times without repetition. +函式是程式主要的 "建構區塊",它們允許程式碼被不重複地多次呼叫。 -We've already seen examples of built-in functions, like `alert(message)`, `prompt(message, default)` and `confirm(question)`. But we can create functions of our own as well. +我們已經看過一些內建函式的例子,像是 `alert(message)`、`prompt(message, default)` 和 `confirm(question)`,不過我們也可以自己來建立函式。 -## Function Declaration +## 函式宣告(Function Declaration) -To create a function we can use a *function declaration*. +要建立一個函式,我們可以使用 *函式宣告(function declaration)*。 -It looks like this: +它長得像這樣: ```js function showMessage() { @@ -20,7 +20,7 @@ function showMessage() { } ``` -The `function` keyword goes first, then goes the *name of the function*, then a list of *parameters* between the parentheses (comma-separated, empty in the example above) and finally the code of the function, also named "the function body", between curly braces. +`function` 關鍵字寫在最前面,然後是 *函式的名字*,接著一串在小括號內的 *參數(parameters)*(用逗號分開,上面的例子中為空),最後在大括號之間的是函式的程式碼,也被稱為 "函式本體(function body)"。 ```js function name(parameters) { @@ -28,9 +28,9 @@ function name(parameters) { } ``` -Our new function can be called by its name: `showMessage()`. +我們的新函式可以使用它的名字來呼叫:`showMessage()`。 -For instance: +舉個例: ```js run function showMessage() { @@ -43,22 +43,22 @@ showMessage(); */!* ``` -The call `showMessage()` executes the code of the function. Here we will see the message two times. +呼叫 `showMessage()` 執行函式的程式碼,這邊我們會看到兩次該則訊息。 -This example clearly demonstrates one of the main purposes of functions: to avoid code duplication. +這個例子清楚演示了函式主要的功能之一:避免重複的程式碼。 -If we ever need to change the message or the way it is shown, it's enough to modify the code in one place: the function which outputs it. +若我們還需要改變該則訊息內容或是被顯示的方式,那改一個地方的程式碼就可以了:也就是函式用來輸出它的部分。 -## Local variables +## 區域變數(Local variables) -A variable declared inside a function is only visible inside that function. +一個在函式內被宣告的變數只有在函式內是可視(visible)的。 -For example: +例如: ```js run function showMessage() { *!* - let message = "Hello, I'm JavaScript!"; // local variable + let message = "Hello, I'm JavaScript!"; // 區域變數 */!* alert( message ); @@ -66,12 +66,12 @@ function showMessage() { showMessage(); // Hello, I'm JavaScript! -alert( message ); // <-- Error! The variable is local to the function +alert( message ); // <-- 錯誤!該變數是函式的區域變數 ``` -## Outer variables +## 外部變數(Outer variables) -A function can access an outer variable as well, for example: +函式也可以存取外部變數,例如: ```js run no-beautify let *!*userName*/!* = 'John'; @@ -84,65 +84,65 @@ function showMessage() { showMessage(); // Hello, John ``` -The function has full access to the outer variable. It can modify it as well. +函式有著完整存取外部變數的權限,也可以修改它。 -For instance: +舉個例: ```js run let *!*userName*/!* = 'John'; function showMessage() { - *!*userName*/!* = "Bob"; // (1) changed the outer variable + *!*userName*/!* = "Bob"; // (1)改變外部變數 let message = 'Hello, ' + *!*userName*/!*; alert(message); } -alert( userName ); // *!*John*/!* before the function call +alert( userName ); // *!*John*/!* 呼叫函式前 showMessage(); -alert( userName ); // *!*Bob*/!*, the value was modified by the function +alert( userName ); // *!*Bob*/!*,值被函式修改了 ``` -The outer variable is only used if there's no local one. +只有不存在相同名字的區域變數時,才會用到該名字的外部變數。 -If a same-named variable is declared inside the function then it *shadows* the outer one. For instance, in the code below the function uses the local `userName`. The outer one is ignored: +若有個相同名字的變數在函式內被宣告,則它會 *遮蔽(shadows)* 外部的那個。舉個例,底下的程式碼中,函式使用區域的 `userName`,而外部的將會被忽略: ```js run let userName = 'John'; function showMessage() { *!* - let userName = "Bob"; // declare a local variable + let userName = "Bob"; // 宣告區域變數 */!* let message = 'Hello, ' + userName; // *!*Bob*/!* alert(message); } -// the function will create and use its own userName +// 函式會建立並使用自己的 userName showMessage(); -alert( userName ); // *!*John*/!*, unchanged, the function did not access the outer variable +alert( userName ); // *!*John*/!* 維持不變,函式並沒有存取外部變數 ``` -```smart header="Global variables" -Variables declared outside of any function, such as the outer `userName` in the code above, are called *global*. +```smart header="全域變數(Global variables)" +宣告在任何函式之外的變數,像是上面程式碼中位於外部的 `userName`,被稱之為 *全域*。 -Global variables are visible from any function (unless shadowed by locals). +全域變數在任何函式內都可視(除非被區域變數遮蔽)。 -It's a good practice to minimize the use of global variables. Modern code has few or no globals. Most variables reside in their functions. Sometimes though, they can be useful to store project-level data. +減少使用全域變數是個良好做法。目前流行的程式碼中很少或甚至不使用全域變數,大多數變數存在函式之中,但有時它們被用在儲存專案等級的資料時會很有用。 ``` -## Parameters +## 參數(Parameters) -We can pass arbitrary data to functions using parameters (also called *function arguments*) . +我們可以使用參數,或稱為 *函式引數(function arguments)*,來傳遞任意資料給函式。 -In the example below, the function has two parameters: `from` and `text`. +在上面的例子中,函式有兩個參數:`from` 和 `text`。 ```js run -function showMessage(*!*from, text*/!*) { // arguments: from, text +function showMessage(*!*from, text*/!*) { // 引數:from、text alert(from + ': ' + text); } @@ -152,16 +152,15 @@ showMessage('Ann', "What's up?"); // Ann: What's up? (**) */!* ``` -When the function is called in lines `(*)` and `(**)`, the given values are copied to local variables `from` and `text`. Then the function uses them. - -Here's one more example: we have a variable `from` and pass it to the function. Please note: the function changes `from`, but the change is not seen outside, because a function always gets a copy of the value: +當函式在 `(*)` 和 `(**)` 被呼叫時,被給予的值將會被複製到區域變數 `from` 和 `text` 中,然後函式才使用它們。 +這裡有另一個例子:我們把一個變數 `from` 傳遞給函式。請注意,此函式改變了 `from`,但這個改變在外部看不到,因為函式總是使用該值的複製品: ```js run function showMessage(from, text) { *!* - from = '*' + from + '*'; // make "from" look nicer + from = '*' + from + '*'; // 讓 "from" 變得更好看 */!* alert( from + ': ' + text ); @@ -171,23 +170,23 @@ let from = "Ann"; showMessage(from, "Hello"); // *Ann*: Hello -// the value of "from" is the same, the function modified a local copy +// "from" 的值維持原樣,因為函式修改的是身為區域變數的複製品 alert( from ); // Ann ``` -## Default values +## 預設值 -If a parameter is not provided, then its value becomes `undefined`. +若參數沒被提供,它的值會變成 `undefined`。 -For instance, the aforementioned function `showMessage(from, text)` can be called with a single argument: +舉個例,前述的函式 `showMessage(from, text)` 可以使用單一個引數來呼叫: ```js showMessage("Ann"); ``` -That's not an error. Such a call would output `"Ann: undefined"`. There's no `text`, so it's assumed that `text === undefined`. +那並非錯誤,這種呼叫方式會輸出 `"Ann: undefined"`。因為沒有 `text`,所以它預設成 `text === undefined`。 -If we want to use a "default" `text` in this case, then we can specify it after `=`: +如果在這種情況想使用一個 "預設的" `text`,那我們可以加個 `=` 並在其後指定預設值: ```js run function showMessage(from, *!*text = "no text given"*/!*) { @@ -197,27 +196,27 @@ function showMessage(from, *!*text = "no text given"*/!*) { showMessage("Ann"); // Ann: no text given ``` -Now if the `text` parameter is not passed, it will get the value `"no text given"` +若現在沒有傳遞 `text` 參數,它將會拿到值 `"no text given"`。 -Here `"no text given"` is a string, but it can be a more complex expression, which is only evaluated and assigned if the parameter is missing. So, this is also possible: +這邊的 `"no text given"` 是一個字串,但它可以是更為複雜的表達式,該表達式只在未給予參數時才會被計算和指定。所以這麼做是可以的: ```js run function showMessage(from, text = anotherFunction()) { - // anotherFunction() only executed if no text given - // its result becomes the value of text + // anotherFunction() 只有在沒給 text 的時候會被執行 + // 其結果會變成 text 的值 } ``` -```smart header="Evaluation of default parameters" -In JavaScript, a default parameter is evaluated every time the function is called without the respective parameter. +```smart header="預設參數的計算" +在 JavaScript 中,每次呼叫函式卻沒帶對應參數時,該預設參數才會被計算。 -In the example above, `anotherFunction()` is called every time `showMessage()` is called without the `text` parameter. +上面的例子中,在呼叫 `showMessage()` 卻沒帶 `text` 參數時,才會去呼叫 `anotherFunction()`。 ``` -````smart header="Default parameters old-style" -Old editions of JavaScript did not support default parameters. So there are alternative ways to support them, that you can find mostly in the old scripts. +````smart header="舊風格的預設參數" +舊版本的 JavaScript 不支援預設參數,所以有幾種替代方案來支援,你可以在大多數老舊的腳本中找到。 -For instance, an explicit check for being `undefined`: +舉個例,明確檢查 `undefined`: ```js function showMessage(from, text) { @@ -231,20 +230,17 @@ function showMessage(from, text) { } ``` -...Or the `||` operator: +...或使用 `||` 運算子: ```js function showMessage(from, text) { - // if text is falsy then text gets the "default" value + // 若 text 為虛值,則 text 會得到其 "預設" 值 text = text || 'no text given'; ... } ``` - - ```` - ## Returning a value A function can return a value back into the calling code as the result. From bff9e179c8504c3f02f07b3780286c58a8c40349 Mon Sep 17 00:00:00 2001 From: Len Chen Date: Sun, 8 Sep 2019 11:23:08 +0800 Subject: [PATCH 2/4] feat: translat 100% of Functions --- .../1-if-else-required/solution.md | 3 +- .../1-if-else-required/task.md | 11 +- .../solution.md | 7 +- .../2-rewrite-function-question-or/task.md | 15 +- .../14-function-basics/3-min/solution.md | 7 +- .../14-function-basics/3-min/task.md | 6 +- .../14-function-basics/4-pow/solution.md | 1 + .../14-function-basics/4-pow/task.md | 9 +- .../14-function-basics/article.md | 141 +++++++++--------- 9 files changed, 105 insertions(+), 95 deletions(-) diff --git a/1-js/02-first-steps/14-function-basics/1-if-else-required/solution.md b/1-js/02-first-steps/14-function-basics/1-if-else-required/solution.md index e41c80418..bb9738290 100644 --- a/1-js/02-first-steps/14-function-basics/1-if-else-required/solution.md +++ b/1-js/02-first-steps/14-function-basics/1-if-else-required/solution.md @@ -1 +1,2 @@ -No difference. \ No newline at end of file +沒有不同。 + diff --git a/1-js/02-first-steps/14-function-basics/1-if-else-required/task.md b/1-js/02-first-steps/14-function-basics/1-if-else-required/task.md index 4f69a5c8c..208b73d0e 100644 --- a/1-js/02-first-steps/14-function-basics/1-if-else-required/task.md +++ b/1-js/02-first-steps/14-function-basics/1-if-else-required/task.md @@ -2,11 +2,11 @@ importance: 4 --- -# Is "else" required? +# "else" 是否必須? -The following function returns `true` if the parameter `age` is greater than `18`. +底下的函式中,若參數 `age` 大於 `18` 時會回傳 `true`。 -Otherwise it asks for a confirmation and returns its result: +否則它會要求確認並回傳結果: ```js function checkAge(age) { @@ -21,7 +21,7 @@ function checkAge(age) { } ``` -Will the function work differently if `else` is removed? +若把 `else` 刪掉,此函式是否會以不同方式運作? ```js function checkAge(age) { @@ -35,4 +35,5 @@ function checkAge(age) { } ``` -Is there any difference in the behavior of these two variants? +這兩種做法在行為上是否有任何不同? + diff --git a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md b/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md index c8ee9618f..63f423dc8 100644 --- a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md +++ b/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md @@ -1,4 +1,4 @@ -Using a question mark operator `'?'`: +使用問號運算子 `'?'`: ```js function checkAge(age) { @@ -6,7 +6,7 @@ function checkAge(age) { } ``` -Using OR `||` (the shortest variant): +使用 OR `||`(最短的做法): ```js function checkAge(age) { @@ -14,4 +14,5 @@ function checkAge(age) { } ``` -Note that the parentheses around `age > 18` are not required here. They exist for better readabilty. +注意圍繞著 `age > 18` 的括號在此並非必要,它們存在的原因只是為了更佳的可讀性。 + diff --git a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md b/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md index 46da079c0..b8c30b2be 100644 --- a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md +++ b/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md @@ -2,11 +2,11 @@ importance: 4 --- -# Rewrite the function using '?' or '||' +# 使用 '?' 或 '||' 改寫函式 -The following function returns `true` if the parameter `age` is greater than `18`. +底下的函式中,若參數 `age` 大於 `18` 則回傳 `true`。 -Otherwise it asks for a confirmation and returns its result. +否則它要求確認並回傳其結果。 ```js function checkAge(age) { @@ -18,9 +18,10 @@ function checkAge(age) { } ``` -Rewrite it, to perform the same, but without `if`, in a single line. +改寫它,使其在沒有 `if` 的情況下,以單獨一行就可以達到同樣的操作。 -Make two variants of `checkAge`: +寫出兩種 `checkAge` 的不同做法: + +1. 使用問號運算子 `?` +2. 使用 OR `||` -1. Using a question mark operator `?` -2. Using OR `||` diff --git a/1-js/02-first-steps/14-function-basics/3-min/solution.md b/1-js/02-first-steps/14-function-basics/3-min/solution.md index 2236d9203..f41da9d7e 100644 --- a/1-js/02-first-steps/14-function-basics/3-min/solution.md +++ b/1-js/02-first-steps/14-function-basics/3-min/solution.md @@ -1,4 +1,4 @@ -A solution using `if`: +使用 `if` 的解法: ```js function min(a, b) { @@ -10,7 +10,7 @@ function min(a, b) { } ``` -A solution with a question mark operator `'?'`: +使用問號運算子 `'?'` 的解法: ```js function min(a, b) { @@ -18,4 +18,5 @@ function min(a, b) { } ``` -P.S. In the case of an equality `a == b` it does not matter what to return. \ No newline at end of file +註:在相等的情況 `a == b`,回傳哪一個就不重要了。 + diff --git a/1-js/02-first-steps/14-function-basics/3-min/task.md b/1-js/02-first-steps/14-function-basics/3-min/task.md index 50edd0d36..46ddd0b7f 100644 --- a/1-js/02-first-steps/14-function-basics/3-min/task.md +++ b/1-js/02-first-steps/14-function-basics/3-min/task.md @@ -2,11 +2,11 @@ importance: 1 --- -# Function min(a, b) +# 函式 min(a, b) -Write a function `min(a,b)` which returns the least of two numbers `a` and `b`. +寫出一個函式 `min(a, b)`,用以回傳 `a` 和 `b` 兩個數值中的最小者。 -For instance: +舉個例: ```js min(2, 5) == 2 diff --git a/1-js/02-first-steps/14-function-basics/4-pow/solution.md b/1-js/02-first-steps/14-function-basics/4-pow/solution.md index 19fe9011f..4110ff2bf 100644 --- a/1-js/02-first-steps/14-function-basics/4-pow/solution.md +++ b/1-js/02-first-steps/14-function-basics/4-pow/solution.md @@ -19,3 +19,4 @@ if (n < 1) { alert( pow(x, n) ); } ``` + diff --git a/1-js/02-first-steps/14-function-basics/4-pow/task.md b/1-js/02-first-steps/14-function-basics/4-pow/task.md index f569320c7..208537021 100644 --- a/1-js/02-first-steps/14-function-basics/4-pow/task.md +++ b/1-js/02-first-steps/14-function-basics/4-pow/task.md @@ -2,9 +2,9 @@ importance: 4 --- -# Function pow(x,n) +# 函式 pow(x, n) -Write a function `pow(x,n)` that returns `x` in power `n`. Or, in other words, multiplies `x` by itself `n` times and returns the result. +寫一個函式 `pow(x, n)`,用以回傳 `x` 的 `n` 次方。換句話說,將 `x` 自乘 `n` 次並回傳其結果。 ```js pow(3, 2) = 3 * 3 = 9 @@ -12,8 +12,9 @@ pow(3, 3) = 3 * 3 * 3 = 27 pow(1, 100) = 1 * 1 * ...* 1 = 1 ``` -Create a web-page that prompts for `x` and `n`, and then shows the result of `pow(x,n)`. +建立一個網頁,分別跳出提示輸入 `x` 和 `n` 的 prompts,並顯示 `pow(x, n)` 的結果。 [demo] -P.S. In this task the function should support only natural values of `n`: integers up from `1`. +註:在本課題中函式應該要只支援自然數 `n`:從 `1` 開始向上數的整數。 + diff --git a/1-js/02-first-steps/14-function-basics/article.md b/1-js/02-first-steps/14-function-basics/article.md index 87b72ef4a..c376adeef 100644 --- a/1-js/02-first-steps/14-function-basics/article.md +++ b/1-js/02-first-steps/14-function-basics/article.md @@ -241,11 +241,11 @@ function showMessage(from, text) { ``` ```` -## Returning a value +## 回傳值 -A function can return a value back into the calling code as the result. +函式可以回傳一個值給呼叫它的程式碼作為結果。 -The simplest example would be a function that sums two values: +把兩個值相加的最簡單做法是利用函式: ```js run no-beautify function sum(a, b) { @@ -256,9 +256,9 @@ let result = sum(1, 2); alert( result ); // 3 ``` -The directive `return` can be in any place of the function. When the execution reaches it, the function stops, and the value is returned to the calling code (assigned to `result` above). +`return` 指令可以放在函式中的任意位置,當執行到這個指令,函式將會停止並將值回傳給呼叫它的程式碼(上例中 `result` 將被指定)。 -There may be many occurrences of `return` in a single function. For instance: +一個函式中可以許會有多個 `return` 的可能位置,舉個例: ```js run function checkAge(age) { @@ -282,9 +282,9 @@ if ( checkAge(age) ) { } ``` -It is possible to use `return` without a value. That causes the function to exit immediately. +使用 `return` 但不回傳值也是可以的,這樣可以讓函式立刻離開返回。 -For example: +例如: ```js function showMovie(age) { @@ -299,18 +299,18 @@ function showMovie(age) { } ``` -In the code above, if `checkAge(age)` returns `false`, then `showMovie` won't proceed to the `alert`. +上面的程式碼中,若 `checkAge(age)` 回傳 `false`,則 `showMovie` 不會繼續執行 `alert`。 -````smart header="A function with an empty `return` or without it returns `undefined`" -If a function does not return a value, it is the same as if it returns `undefined`: +````smart header="使用 `return ` 回傳空值或根本沒寫,該函式將會回傳 `undefined`" +若一個函式沒有回傳任何值,則意思跟回傳 `undefined` 一樣: ```js run -function doNothing() { /* empty */ } +function doNothing() { /* 空的函式 */ } alert( doNothing() === undefined ); // true ``` -An empty `return` is also the same as `return undefined`: +`return` 空值的意思也跟 `return undefined` 一樣: ```js run function doNothing() { @@ -321,23 +321,24 @@ alert( doNothing() === undefined ); // true ``` ```` -````warn header="Never add a newline between `return` and the value" -For a long expression in `return`, it might be tempting to put it on a separate line, like this: +````warn header="不要在 `return` 和要回傳的值之間增加新行" +對於一個擁有冗長表達式的 `return`,可能會試圖將表達式放在分開的一行,像這樣: ```js return (some + long + expression + or + whatever * f(a) + f(b)) ``` -That doesn't work, because JavaScript assumes a semicolon after `return`. That'll work the same as: + +但這樣不行,因為 JavaScript 在 `return` 後會預判加入分號,所以運作起來像這樣: ```js return*!*;*/!* (some + long + expression + or + whatever * f(a) + f(b)) ``` -So, it effectively becomes an empty return. +所以它實際上變成回傳一個空值。 -If we want the returned expression to wrap across multiple lines, we should start it at the same line as `return`. Or at least put the opening parentheses there as follows: +若我們想回傳一個能夠橫跨多行的表達式,我們應該把它寫在跟 `return` 同一行,或者至少使用小括號包起來: ```js return ( @@ -346,67 +347,68 @@ return ( whatever * f(a) + f(b) ) ``` -And it will work just as we expect it to. + +這樣它才能如預期般運作。 ```` -## Naming a function [#function-naming] +## 函式命名 [#function-naming] -Functions are actions. So their name is usually a verb. It should be brief, as accurate as possible and describe what the function does, so that someone reading the code gets an indication of what the function does. +函式意味著動作,所以它們的名字通常使用動詞。其名字應該要簡短並盡可能的精準描述它的行為,這樣別人讀程式碼時才能理解這個函式在做什麼。 -It is a widespread practice to start a function with a verbal prefix which vaguely describes the action. There must be an agreement within the team on the meaning of the prefixes. +一種普遍的做法是利用動詞前置作為命名起頭,該動詞大略的描述其行為,而團隊之間對於使用的動詞前置的意思應該要有個共識。 -For instance, functions that start with `"show"` usually show something. +舉個例,使用 `show` 起頭的函式通常代表著顯示些什麼。 -Function starting with... +函式若起始於... -- `"get…"` -- return a value, -- `"calc…"` -- calculate something, -- `"create…"` -- create something, -- `"check…"` -- check something and return a boolean, etc. +- `"get…"` -- 回傳一個值, +- `"calc…"` -- 計算什麼, +- `"create…"` -- 建立什麼, +- `"check…"` -- 檢查什麼並回傳一個布林值,等等。 -Examples of such names: +該種類名字的例子有: ```js no-beautify -showMessage(..) // shows a message -getAge(..) // returns the age (gets it somehow) -calcSum(..) // calculates a sum and returns the result -createForm(..) // creates a form (and usually returns it) -checkPermission(..) // checks a permission, returns true/false +showMessage(..) // 顯示訊息 +getAge(..) // 回傳年齡(從某處取得) +calcSum(..) // 計算總和並回傳結果 +createForm(..) // 建立表格(通常也會回傳它) +checkPermission(..) // 確認權限,並回傳 true/false ``` -With prefixes in place, a glance at a function name gives an understanding what kind of work it does and what kind of value it returns. +自帶這種前置的話,看一眼函式名稱就可以理解到它在做什麼,且知道會回傳什麼。 -```smart header="One function -- one action" -A function should do exactly what is suggested by its name, no more. +```smart header="一個函式 -- 一個動作" +一個函式應該要就只做名稱提及的事情,別做多餘的事。 -Two independent actions usually deserve two functions, even if they are usually called together (in that case we can make a 3rd function that calls those two). +兩個獨立的動作通常需要使用兩個函式,就算它們時常互相呼叫(這種情況下,我們可以製作第三個函式來呼叫這兩者)。 -A few examples of breaking this rule: +幾個破壞此規則的範例: -- `getAge` -- would be bad if it shows an `alert` with the age (should only get). -- `createForm` -- would be bad if it modifies the document, adding a form to it (should only create it and return). -- `checkPermission` -- would be bad if it displays the `access granted/denied` message (should only perform the check and return the result). +- `getAge` -- 若它使用 `alert` 來顯示年齡就很糟(應該只有取得年齡而已)。 +- `createForm` -- 若它修改了文件內容才把表格加在上面就很糟(應該只有建立表格並回傳)。 +- `checkPermission` -- 若它顯示 `存取 核准/拒絕` 的訊息就很糟(應該只做檢查並回傳結果)。 -These examples assume common meanings of prefixes. You and your team are free to agree on other meanings, but usually they're not much different. In any case, you should have a firm understanding of what a prefix means, what a prefixed function can and cannot do. All same-prefixed functions should obey the rules. And the team should share the knowledge. +這些例子假設該前置詞使用最常見的含義,你和你們團隊可以自由認定為其他種含義,但通常它們不會差太多。無論如何,你應該要確實理解該前置詞的意義,有哪些函式適合使用而哪些不適合。所有同個前置詞的函式應該都要遵守這些規則,且團隊應該也要知曉此事。 ``` -```smart header="Ultrashort function names" -Functions that are used *very often* sometimes have ultrashort names. +```smart header="極短函式名稱" +*很常* 被使用的函式有時有著極短的名稱。 -For example, the [jQuery](http://jquery.com) framework defines a function with `$`. The [Lodash](http://lodash.com/) library has its core function named `_`. +例如,[jQuery](http://jquery.com) 框架使用 `$` 定義了一個函式。而 [Lodash](http://lodash.com/) 函式庫以 `_` 作為其核心函式的名稱。 -These are exceptions. Generally functions names should be concise and descriptive. +這些都只是例外,一般的函式名稱應該要精簡易懂。 ``` -## Functions == Comments +## 函式 == 註解 -Functions should be short and do exactly one thing. If that thing is big, maybe it's worth it to split the function into a few smaller functions. Sometimes following this rule may not be that easy, but it's definitely a good thing. +函式應該要簡短且就只做一件事,若這件事很大,或許該把該函式拆成多個較小的函式。有時候想遵守此規則沒這麼簡單,但這麼做絕對是件好事。 -A separate function is not only easier to test and debug -- its very existence is a great comment! +分開的函式不只更易於測試和除錯 -- 它的存在本身就是極好的註解! -For instance, compare the two functions `showPrimes(n)` below. Each one outputs [prime numbers](https://en.wikipedia.org/wiki/Prime_number) up to `n`. +舉個例,底下比較兩個函式 `showPrimes(n)`。每一個都會回傳直到 `n` 的 [質數(prime numbers)](https://en.wikipedia.org/wiki/Prime_number)。 -The first variant uses a label: +第一個使用標籤: ```js function showPrimes(n) { @@ -416,12 +418,12 @@ function showPrimes(n) { if (i % j == 0) continue nextPrime; } - alert( i ); // a prime + alert( i ); // 一個質數 } } ``` -The second variant uses an additional function `isPrime(n)` to test for primality: +第二個使用額外的函式 `isPrime(n)` 來測試質數性質: ```js function showPrimes(n) { @@ -429,7 +431,7 @@ function showPrimes(n) { for (let i = 2; i < n; i++) { *!*if (!isPrime(i)) continue;*/!* - alert(i); // a prime + alert(i); // 一個質數 } } @@ -441,32 +443,33 @@ function isPrime(n) { } ``` -The second variant is easier to understand, isn't it? Instead of the code piece we see a name of the action (`isPrime`). Sometimes people refer to such code as *self-describing*. +第二個寫法更為容易理解,對吧?我們看到的不是程式碼片段,而是一個具有名字的動作(`isPrime`),有時人們稱這種程式碼具有 *自我描述性(self-describing)*。 -So, functions can be created even if we don't intend to reuse them. They structure the code and make it readable. +所以,就算我們不打算重用,也可以建立函式,它們建構了程式碼並讓其更具可讀性。 -## Summary +## 總結 -A function declaration looks like this: +函式宣告看起來像這樣: ```js function name(parameters, delimited, by, comma) { - /* code */ + /* 程式碼 */ } ``` -- Values passed to a function as parameters are copied to its local variables. -- A function may access outer variables. But it works only from inside out. The code outside of the function doesn't see its local variables. -- A function can return a value. If it doesn't, then its result is `undefined`. +- 傳遞給函式作為參數的值,將會被複製為函式的區域變數。 +- 函式可以存取外部變數,但只有在由內而外時起作用。函式外部的程式碼看不到該函式的區域變數。 +- 函式可以回傳一個值,若沒有回傳,則其回傳值為 `undefined`。 + +為了讓程式碼簡潔易懂,建議在函式中以使用區域變數和參數為主,少用外部變數。 -To make the code clean and easy to understand, it's recommended to use mainly local variables and parameters in the function, not outer variables. +比起沒有取得任何參數,直接修改外部變數作為副作用的做法,函式先獲取參數並對其操作再回傳結果,能夠更容易理解。 -It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side-effect. +函式命名: -Function naming: +- 名稱應該清楚描述該函式做了什麼。在程式碼中看到呼叫函式時,良好的命名可以讓我們立刻知道它會做什麼且回傳什麼。 +- 一個函式就是一個動作,所以函式名稱通常為動詞。 +- 有許多知名的函式前置詞,像是:`create...`、`show...`、`get...` 和 `check...` 等等,使用它們可以提示函式的用途。 -- A name should clearly describe what the function does. When we see a function call in the code, a good name instantly gives us an understanding what it does and returns. -- A function is an action, so function names are usually verbal. -- There exist many well-known function prefixes like `create…`, `show…`, `get…`, `check…` and so on. Use them to hint what a function does. +函式是主要建構腳本的區塊,現在我們理解其基礎了,所以可以來開始建立並使用它們。但這只是這條路的開始,我們將會在很多時間點回頭來看它們,並更深入理解它們的進階特性。 -Functions are the main building blocks of scripts. Now we've covered the basics, so we actually can start creating and using them. But that's only the beginning of the path. We are going to return to them many times, going more deeply into their advanced features. From 2f47031af5cd9907d65fb12557940a78883d03f1 Mon Sep 17 00:00:00 2001 From: Len Chen Date: Tue, 10 Sep 2019 17:56:17 +0800 Subject: [PATCH 3/4] Apply suggestions from code review Co-Authored-By: ArvinH --- 1-js/02-first-steps/14-function-basics/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/1-js/02-first-steps/14-function-basics/article.md b/1-js/02-first-steps/14-function-basics/article.md index c376adeef..1fcedbda7 100644 --- a/1-js/02-first-steps/14-function-basics/article.md +++ b/1-js/02-first-steps/14-function-basics/article.md @@ -4,7 +4,7 @@ 例如,我們需要在使用者登入、登出或做其他事情時,顯示一則美觀的訊息。 -函式是程式主要的 "建構區塊",它們允許程式碼被不重複地多次呼叫。 +函式是程式主要的 "建構區塊",它們允許程式碼被多次呼叫,無需重複撰寫。 我們已經看過一些內建函式的例子,像是 `alert(message)`、`prompt(message, default)` 和 `confirm(question)`,不過我們也可以自己來建立函式。 @@ -28,7 +28,7 @@ function name(parameters) { } ``` -我們的新函式可以使用它的名字來呼叫:`showMessage()`。 +我們可以呼叫函式名稱:`showMessage()` 來使用新函式。 舉個例: @@ -47,7 +47,7 @@ showMessage(); 這個例子清楚演示了函式主要的功能之一:避免重複的程式碼。 -若我們還需要改變該則訊息內容或是被顯示的方式,那改一個地方的程式碼就可以了:也就是函式用來輸出它的部分。 +若我們還需要改變該則訊息內容或是被顯示的方式,那改一個地方的程式碼就可以了:也就是輸出該訊息的函式。 ## 區域變數(Local variables) @@ -256,7 +256,7 @@ let result = sum(1, 2); alert( result ); // 3 ``` -`return` 指令可以放在函式中的任意位置,當執行到這個指令,函式將會停止並將值回傳給呼叫它的程式碼(上例中 `result` 將被指定)。 +`return` 指令可以放在函式中的任意位置,當執行到這個指令,函式將會停止並將值回傳給呼叫它的程式碼(將回傳值指定給上例中的 `result` )。 一個函式中可以許會有多個 `return` 的可能位置,舉個例: @@ -463,7 +463,7 @@ function name(parameters, delimited, by, comma) { 為了讓程式碼簡潔易懂,建議在函式中以使用區域變數和參數為主,少用外部變數。 -比起沒有取得任何參數,直接修改外部變數作為副作用的做法,函式先獲取參數並對其操作再回傳結果,能夠更容易理解。 +比起沒有取得任何參數,直接修改外部變數作為副作用的做法,函式先獲取參數並對其操作再回傳結果,更容易讓人理解。 函式命名: From 91b0b612490a37bfa62caf9841e64fd840faa091 Mon Sep 17 00:00:00 2001 From: Len Chen Date: Tue, 10 Sep 2019 20:04:32 +0800 Subject: [PATCH 4/4] Update 1-js/02-first-steps/14-function-basics/article.md Co-Authored-By: ArvinH --- 1-js/02-first-steps/14-function-basics/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/14-function-basics/article.md b/1-js/02-first-steps/14-function-basics/article.md index 1fcedbda7..7494d9326 100644 --- a/1-js/02-first-steps/14-function-basics/article.md +++ b/1-js/02-first-steps/14-function-basics/article.md @@ -258,7 +258,7 @@ alert( result ); // 3 `return` 指令可以放在函式中的任意位置,當執行到這個指令,函式將會停止並將值回傳給呼叫它的程式碼(將回傳值指定給上例中的 `result` )。 -一個函式中可以許會有多個 `return` 的可能位置,舉個例: +一個函式中或許會有多個 `return`,舉個例: ```js run function checkAge(age) {