1- # JavaScript specials
1+ # JavaScript 特性
22
3- This chapter briefly recaps the features of JavaScript that we've learned by now, paying special attention to subtle moments.
3+ 本章節簡要的回顧一下我們到目前為止所學的,並特別著重在一些細節上。
44
5- ## Code structure
5+ ## 程式碼結構
66
7- Statements are delimited with a semicolon:
7+
8+ 述語(Statements)用分號隔開:
89
910``` js run no-beautify
1011alert (' Hello' ); alert (' World' );
1112```
1213
13- Usually, a line-break is also treated as a delimiter, so that would also work:
14+ 通常,換行符號也被視為分隔符號, 因此也能這樣分隔述語:
1415
1516``` js run no-beautify
1617alert (' Hello' )
1718alert (' World' )
1819```
1920
20- That's called "automatic semicolon insertion". Sometimes it doesn't work, for instance:
21+ 這是所謂的 "自動分號插入"。但有時它不起作用,例如:
2122
2223``` js run
2324alert (" There will be an error after this message" )
2425
2526[1 , 2 ].forEach (alert)
2627```
2728
28- Most codestyle guides agree that we should put a semicolon after each statement.
29+ 大多數程式碼風格指南都認為我們應該在每個述語後加上分號。
2930
30- Semicolons are not required after code blocks ` {...} ` and syntax constructs with them like loops:
31+ 在像是程式碼區塊和迴圈之類,有用到 ` {...} ` 的語法之後,不需要加上分號:
3132
3233``` js
3334function f () {
34- // no semicolon needed after function declaration
35+ // 函數宣告後不需要分號
3536}
3637
3738for (;;) {
38- // no semicolon needed after the loop
39+ // 迴圈述語後不需要分號
3940}
4041```
4142
42- ...But even if we can put an "extra" semicolon somewhere, that's not an error. It will be ignored.
43+ ...但即使我們在某處放了 "額外" 的分號,這也不會造成錯誤。它會被忽略。
44+
45+ 更多資訊: < info:structure > 。
4346
44- More in: < info:structure > .
4547
46- ## Strict mode
48+ ## 嚴格模式( Strict mode)
4749
48- To fully enable all features of modern JavaScript, we should start scripts with ` "use strict" ` .
50+ 為了完全啟用現代 JavaScript 的所有功能,我們應該以 ` "use strict" ` 指令作為腳本開頭。
4951
5052``` js
5153' use strict' ;
5254
5355...
5456```
5557
56- The directive must be at the top of a script or at the beginning of a function body.
58+ 該指令必須放在 JavaScript 腳本的頂部或是函數的開頭。
5759
58- Without ` "use strict" ` , everything still works, but some features behave in the old-fashion, "compatible" way. We'd generally prefer the modern behavior.
60+ 沒有使用 ` "use strict" ` ,一切依然能正常運行,但是某些特性會以 "兼容" 舊式的方式表現,我們通常偏好使用現代的方式。
5961
60- Some modern features of the language (like classes that we'll study in the future) enable strict mode implicitly.
62+ 語言內有些現代功能與特性(像是我們將來要學的類別)會隱式地啟用嚴格模式。
6163
62- More in: < info:strict-mode > .
64+ 更多資訊: < info:strict-mode > .
6365
64- ## Variables
66+ ## 變數( Variables)
6567
66- Can be declared using:
68+ 可以用下列方式聲明變數:
6769
6870- ` let `
69- - ` const ` (constant, can't be changed)
70- - ` var ` (old-style, will see later)
71+ - ` const ` (常數,宣告後不可改變)
72+ - ` var ` (舊的寫法,稍後會看到)
7173
72- A variable name can include:
73- - Letters and digits, but the first character may not be a digit.
74- - Characters ` $ ` and ` _ ` are normal, on par with letters.
75- - Non-Latin alphabets and hieroglyphs are also allowed, but commonly not used.
74+ 一個變數名稱可以包含:
75+ - 字母與數字,但變數名的第一個字元不能是數字。
76+ - 字元 ` $ ` 和 ` _ ` 是允許且正常的,用法同字母。
77+ - 非拉丁字母與象形文字也是允許的,但通常不會使用。
7678
77- Variables are dynamically typed. They can store any value:
79+ 變數是會動態被賦予型別的,他們可以儲存任何的值:
7880
7981``` js
8082let x = 5 ;
8183x = " John" ;
8284```
8385
84- There are 7 data types:
86+ 有 7 種資料類型:
87+
88+ - ` number ` 可以是浮點數或是整數。
89+ - ` string ` 字串類型。
90+ - ` boolean ` 表達邏輯的值: ` true/false ` 。
91+ - ` null ` -- 具有單一值 ` null ` 的類型,代表 "空的" 或 "不存在"。
92+ - ` undefined ` -- 具有單一值 ` undefined ` 的類型,代表 "未指定"。
93+ - ` object ` 與 ` symbol ` -- 用於複雜的資料結構和唯一識別符號,我們還沒學習這個類型。
8594
86- - ` number ` for both floating-point and integer numbers,
87- - ` string ` for strings,
88- - ` boolean ` for logical values: ` true/false ` ,
89- - ` null ` -- a type with a single value ` null ` , meaning "empty" or "does not exist",
90- - ` undefined ` -- a type with a single value ` undefined ` , meaning "not assigned",
91- - ` object ` and ` symbol ` -- for complex data structures and unique identifiers, we haven't learnt them yet.
95+ ` typeof ` 運算子會回傳值的類型,但有兩個例外:
9296
93- The ` typeof ` operator returns the type for a value, with two exceptions:
9497``` js
95- typeof null == " object" // error in the language
96- typeof function (){} == " function" // functions are treated specially
98+ typeof null == " object" // 語言本身的錯誤
99+ typeof function (){} == " function" // 函式被特別對待
97100```
98101
99- More in: < info:variables > and < info:types > .
102+ 更多資訊: < info:variables > 和 < info:types > 。
100103
101- ## Interaction
104+ ## 互動( Interaction)
102105
103- We're using a browser as a working environment, so basic UI functions will be:
106+ 我們使用瀏覽器作為工作環境,所以基本的 UI 功能會是:
104107
105108[ ` prompt(question, [default]) ` ] ( mdn:api/Window/prompt )
106- : Ask a ` question ` , and return either what the visitor entered or ` null ` if they clicked "cancel".
109+ : 詢問一個 ` question ` ,並回傳使用者輸入的內容,若使用者按下 "取消",則回傳 ` null ` 。
107110
108111[ ` confirm(question) ` ] ( mdn:api/Window/confirm )
109- : Ask a ` question ` and suggest to choose between Ok and Cancel. The choice is returned as ` true/false ` .
112+ : 詢問一個 ` question ` ,並提供在 Ok 與 Cancel 間進行選擇。選擇結果以 ` true/false ` 回傳。
110113
111114[ ` alert(message) ` ] ( mdn:api/Window/alert )
112- : Output a ` message ` .
115+ : 輸出一個 ` message ` 。
113116
114- All these functions are * modal * , they pause the code execution and prevent the visitor from interacting with the page until they answer.
117+ 所有這些函式都是 * 模態 * ,他們會暫停程式碼執行並阻擋使用者與頁面互動,直到使用者回應模態。
115118
116- For instance :
119+ 舉例來說 :
117120
118121``` js run
119122let userName = prompt (" Your name?" , " Alice" );
@@ -123,58 +126,58 @@ alert( "Visitor: " + userName ); // Alice
123126alert ( " Tea wanted: " + isTeaWanted ); // true
124127```
125128
126- More in: < info:alert-prompt-confirm > .
129+ 更多資訊: < info:alert-prompt-confirm > .
127130
128- ## Operators
131+ ## 運算子( Operators)
129132
130- JavaScript supports the following operators:
133+ JavaScript 支援以下運算子:
131134
132- Arithmetical
133- : Regular: ` * + - / ` , also ` % ` for the remainder and ` ** ` for power of a number.
135+ 算術運算子( Arithmetical)
136+ : 常規的運算子如: ` * + - / ` ,以及取餘數操作的 ` % ` 和次方運算的 ` ** ` 。
134137
135- The binary plus `+` concatenates strings. And if any of the operands is a string, the other one is converted to string too:
138+ 二元加號 `+` 連結字串。如果任何一個操作運算元是字串,則另一個也會被轉換成字串:
136139
137140 ```js run
138141 alert( '1' + 2 ); // '12', string
139142 alert( 1 + '2' ); // '12', string
140143 ```
141144
142- Assignments
143- : There is a simple assignment: ` a = b ` and combined ones like ` a *= 2 ` .
145+ 指定運算子( Assignments)
146+ : 簡單的指定: ` a = b ` 和結合其他運算的指定運算 ` a *= 2 ` 。
144147
145- Bitwise
146- : Bitwise operators work with 32-bit integers at the lowest, bit-level: see the [ docs] ( mdn:/JavaScript/Reference/Operators/Bitwise_Operators ) when they are needed.
148+ 位元操作( Bitwise)
149+ : 位元操作在最底層的位元層面使用 32-bit 整數: 有需要時,請參閱 [ docs] ( mdn:/JavaScript/Reference/Operators/Bitwise_Operators ) 。
147150
148- Conditional
149- : The only operator with three parameters: ` cond ? resultA : resultB ` . If ` cond ` is truthy, returns ` resultA ` , otherwise ` resultB ` .
151+ 條件運算( Conditional)
152+ : 唯一具有三個參數的操作: ` cond ? resultA : resultB ` . 如果 ` cond ` 是真值,則回傳 ` resultA ` 否則回傳 ` resultB ` 。
150153
151- Logical operators
152- : Logical AND ` && ` and OR ` || ` perform short-circuit evaluation and then return the value where it stopped (not necessary ` true ` /` false ` ). Logical NOT ` ! ` converts the operand to boolean type and returns the inverse value.
154+ 邏輯運算子( Logical operators)
155+ : 邏輯的 AND ` && ` 和 OR ` || ` 執行短路核定,然後回傳停止時的值(不一定為 ` true ` /` false ` )。邏輯的 NOT ` ! ` 轉換操作運算元成布林類型,並回傳相反的值。
153156
154- Comparisons
155- : Equality check ` == ` for values of different types converts them to a number (except ` null ` and ` undefined ` that equal each other and nothing else), so these are equal:
157+ 比較運算子( Comparisons)
158+ : 相等性檢查 ` == ` 將不同類型的值轉換成數值(除了 ` null ` 和 ` undefined ` ,它們除了彼此相等外,不跟任何人相等),所以這些是相等的:
156159
157160 ```js run
158161 alert( 0 == false ); // true
159162 alert( 0 == '' ); // true
160163 ```
161164
162- Other comparisons convert to a number as well.
165+ 其他的比較也會轉換成數值。
163166
164- The strict equality operator `===` doesn't do the conversion: different types always mean different values for it.
167+ 嚴格相等運算子 `===` 不會進行轉換:不同類型永遠代表不同的值。
165168
166- Values `null` and `undefined` are special: they equal `==` each other and don't equal anything else.
169+ `null` 和 `undefined` 值比較特殊:他們只在 `==` 下相等。
167170
168- Greater/less comparisons compare strings character-by-character, other types are converted to a number.
171+ 大於/小於 的比較運算,在比較字串時,是按照字元逐一比較,其他類型則會先轉換成數值。
169172
170- Other operators
171- : There are few others, like a comma operator.
173+ 其他運算子
174+ : 有一些其他的運算子,像是逗號運算子。
172175
173- More in: < info:operators > , < info:comparison > , < info:logical-operators > .
176+ 更多資訊: < info:operators > , < info:comparison > , < info:logical-operators > .
174177
175- ## Loops
178+ ## 迴圈
176179
177- - We covered 3 types of loops :
180+ - 我們介紹了三種類型的迴圈 :
178181
179182 ``` js
180183 // 1
@@ -193,25 +196,25 @@ More in: <info:operators>, <info:comparison>, <info:logical-operators>.
193196 }
194197 ```
195198
196- - The variable declared in ` for(let...)` loop is visible only inside the loop . But we can also omit ` let` and reuse an existing variable.
197- - Directives ` break/continue` allow to exit the whole loop / current iteration . Use labels to break nested loops.
199+ - 在 ` for(let...)` 迴圈中宣告的變數其作用域只在迴圈中但我們也能省略 ` let` 並重用現有的變數。
200+ - 指令 ` break/continue` 允許退出整個 迴圈 / 當前迭代。使用標籤來打破巢狀迴圈。
198201
199- Details in : < info: while - for > .
202+ 更多資訊: < info: while - for > 。
200203
201- Later we ' ll study more types of loops to deal with objects.
204+ 稍後我們將會學習更多類型的迴圈來處理物件。
202205
203- ## The "switch" construct
206+ ## " switch" 結構
204207
205- The "switch" construct can replace multiple `if` checks. It uses `===` (strict equality) for comparisons.
208+ " switch" 結構可以取代多個 ` if` 檢查。 它使用 ` ===` (嚴格相等) 進行比較。
206209
207- For instance:
210+ 例如:
208211
209212` ` ` js run
210213let age = prompt('Your age?', 18);
211214
212215switch (age) {
213216 case 18:
214- alert("Won' t work" ); // the result of prompt is a string, not a number
217+ alert("Won't work"); // 提示的結果是一個字串,而非數字
215218
216219 case "18":
217220 alert("This works!");
@@ -222,13 +225,13 @@ switch (age) {
222225}
223226` ` `
224227
225- Details in: <info:switch>.
228+ 更多資訊: < info: switch >。
226229
227- ## Functions
230+ ## 函式
228231
229- We covered three ways to create a function in JavaScript:
232+ 我們介紹了三種在 JavaScript 中創建函式的方式:
230233
231- 1. Function Declaration: the function in the main code flow
234+ 1. 函式宣告: 主要程式流程中的函示
232235
233236 ```js
234237 function sum(a, b) {
@@ -238,7 +241,7 @@ We covered three ways to create a function in JavaScript:
238241 }
239242 ```
240243
241- 2. Function Expression: the function in the context of an expression
244+ 2. 函式表達式: 表達式上下文中的函式
242245
243246 ` ` ` js
244247 let sum = function(a, b) {
@@ -248,32 +251,32 @@ We covered three ways to create a function in JavaScript:
248251 };
249252 ` ` `
250253
251- 3. Arrow functions:
254+ 3. 箭頭函式:
252255
253256 ` ` ` js
254- // expression at the right side
257+ // 表達式在右邊
255258 let sum = (a, b) => a + b;
256259
257- // or multi-line syntax with { ... }, need return here:
260+ // 或是帶有 { ... } 的多行語法,需要回傳:
258261 let sum = (a, b) => {
259262 // ...
260263 return a + b;
261264 }
262265
263- // without arguments
266+ // 沒有引數
264267 let sayHi = () => alert("Hello");
265268
266- // with a single argument
269+ // 單一引數
267270 let double = n => n * 2;
268271 ` ` `
269272
270273
271- - Functions may have local variables: those declared inside its body. Such variables are only visible inside the function.
272- - Parameters can have default values: `function sum(a = 1, b = 2) {...}`.
273- - Functions always return something. If there's no `return` statement, then the result is `undefined`.
274+ - 函式可能有區域變數: 那些在函式內宣告的變數。 這類的變數其作用域只存在函式內部。
275+ - 參數可以有預設值: ` function sum(a = 1, b = 2) {...}` 。
276+ - 函式永遠會回傳一些東西。如果沒有 ` return` 述語,則其結果為 ` undefined` 。
274277
275- Details: see <info:function-basics>, <info:function-expressions-arrows>.
278+ 更多資訊:參見 < info : function -basics>、 <info : function -expressions-arrows>。
276279
277- ## More to come
280+ ## 還有更多
278281
279- That was a brief list of JavaScript features. As of now we've studied only basics. Further in the tutorial you'll find more specials and advanced features of JavaScript.
282+ 這是 JavaScript 特性的簡短概要。 截至目前,我們只學習了基礎知識。隨著教程的深入,你將會學習到 JavaScript 的更多特性與進階功能。
0 commit comments