1
- # JavaScript specials
1
+ # JavaScript 特性
2
2
3
- This chapter briefly recaps the features of JavaScript that we've learned by now, paying special attention to subtle moments.
3
+ 本章節簡要的回顧一下我們到目前為止所學的,並特別著重在一些細節上。
4
4
5
- ## Code structure
5
+ ## 程式碼結構
6
6
7
- Statements are delimited with a semicolon:
7
+
8
+ 述語(Statements)用分號隔開:
8
9
9
10
``` js run no-beautify
10
11
alert (' Hello' ); alert (' World' );
11
12
```
12
13
13
- Usually, a line-break is also treated as a delimiter, so that would also work:
14
+ 通常,換行符號也被視為分隔符號, 因此也能這樣分隔述語:
14
15
15
16
``` js run no-beautify
16
17
alert (' Hello' )
17
18
alert (' World' )
18
19
```
19
20
20
- That's called "automatic semicolon insertion". Sometimes it doesn't work, for instance:
21
+ 這是所謂的 "自動分號插入"。但有時它不起作用,例如:
21
22
22
23
``` js run
23
24
alert (" There will be an error after this message" )
24
25
25
26
[1 , 2 ].forEach (alert)
26
27
```
27
28
28
- Most codestyle guides agree that we should put a semicolon after each statement.
29
+ 大多數程式碼風格指南都認為我們應該在每個述語後加上分號。
29
30
30
- Semicolons are not required after code blocks ` {...} ` and syntax constructs with them like loops:
31
+ 在像是程式碼區塊和迴圈之類,有用到 ` {...} ` 的語法之後,不需要加上分號:
31
32
32
33
``` js
33
34
function f () {
34
- // no semicolon needed after function declaration
35
+ // 函數宣告後不需要分號
35
36
}
36
37
37
38
for (;;) {
38
- // no semicolon needed after the loop
39
+ // 迴圈述語後不需要分號
39
40
}
40
41
```
41
42
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 > 。
43
46
44
- More in: < info:structure > .
45
47
46
- ## Strict mode
48
+ ## 嚴格模式( Strict mode)
47
49
48
- To fully enable all features of modern JavaScript, we should start scripts with ` "use strict" ` .
50
+ 為了完全啟用現代 JavaScript 的所有功能,我們應該以 ` "use strict" ` 指令作為腳本開頭。
49
51
50
52
``` js
51
53
' use strict' ;
52
54
53
55
...
54
56
```
55
57
56
- The directive must be at the top of a script or at the beginning of a function body.
58
+ 該指令必須放在 JavaScript 腳本的頂部或是函數的開頭。
57
59
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" ` ,一切依然能正常運行,但是某些特性會以 "兼容" 舊式的方式表現,我們通常偏好使用現代的方式。
59
61
60
- Some modern features of the language (like classes that we'll study in the future) enable strict mode implicitly.
62
+ 語言內有些現代功能與特性(像是我們將來要學的類別)會隱式地啟用嚴格模式。
61
63
62
- More in: < info:strict-mode > .
64
+ 更多資訊: < info:strict-mode > .
63
65
64
- ## Variables
66
+ ## 變數( Variables)
65
67
66
- Can be declared using:
68
+ 可以用下列方式聲明變數:
67
69
68
70
- ` let `
69
- - ` const ` (constant, can't be changed)
70
- - ` var ` (old-style, will see later)
71
+ - ` const ` (常數,宣告後不可改變)
72
+ - ` var ` (舊的寫法,稍後會看到)
71
73
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
+ - 非拉丁字母與象形文字也是允許的,但通常不會使用。
76
78
77
- Variables are dynamically typed. They can store any value:
79
+ 變數是會動態被賦予型別的,他們可以儲存任何的值:
78
80
79
81
``` js
80
82
let x = 5 ;
81
83
x = " John" ;
82
84
```
83
85
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 ` -- 用於複雜的資料結構和唯一識別符號,我們還沒學習這個類型。
85
94
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 ` 運算子會回傳值的類型,但有兩個例外:
92
96
93
- The ` typeof ` operator returns the type for a value, with two exceptions:
94
97
``` 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" // 函式被特別對待
97
100
```
98
101
99
- More in: < info:variables > and < info:types > .
102
+ 更多資訊: < info:variables > 和 < info:types > 。
100
103
101
- ## Interaction
104
+ ## 互動( Interaction)
102
105
103
- We're using a browser as a working environment, so basic UI functions will be:
106
+ 我們使用瀏覽器作為工作環境,所以基本的 UI 功能會是:
104
107
105
108
[ ` 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 ` 。
107
110
108
111
[ ` 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 ` 回傳。
110
113
111
114
[ ` alert(message) ` ] ( mdn:api/Window/alert )
112
- : Output a ` message ` .
115
+ : 輸出一個 ` message ` 。
113
116
114
- All these functions are * modal * , they pause the code execution and prevent the visitor from interacting with the page until they answer.
117
+ 所有這些函式都是 * 模態 * ,他們會暫停程式碼執行並阻擋使用者與頁面互動,直到使用者回應模態。
115
118
116
- For instance :
119
+ 舉例來說 :
117
120
118
121
``` js run
119
122
let userName = prompt (" Your name?" , " Alice" );
@@ -123,58 +126,58 @@ alert( "Visitor: " + userName ); // Alice
123
126
alert ( " Tea wanted: " + isTeaWanted ); // true
124
127
```
125
128
126
- More in: < info:alert-prompt-confirm > .
129
+ 更多資訊: < info:alert-prompt-confirm > .
127
130
128
- ## Operators
131
+ ## 運算子( Operators)
129
132
130
- JavaScript supports the following operators:
133
+ JavaScript 支援以下運算子:
131
134
132
- Arithmetical
133
- : Regular: ` * + - / ` , also ` % ` for the remainder and ` ** ` for power of a number.
135
+ 算術運算子( Arithmetical)
136
+ : 常規的運算子如: ` * + - / ` ,以及取餘數操作的 ` % ` 和次方運算的 ` ** ` 。
134
137
135
- The binary plus `+` concatenates strings. And if any of the operands is a string, the other one is converted to string too:
138
+ 二元加號 `+` 連結字串。如果任何一個操作運算元是字串,則另一個也會被轉換成字串:
136
139
137
140
```js run
138
141
alert( '1' + 2 ); // '12', string
139
142
alert( 1 + '2' ); // '12', string
140
143
```
141
144
142
- Assignments
143
- : There is a simple assignment: ` a = b ` and combined ones like ` a *= 2 ` .
145
+ 指定運算子( Assignments)
146
+ : 簡單的指定: ` a = b ` 和結合其他運算的指定運算 ` a *= 2 ` 。
144
147
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 ) 。
147
150
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 ` 。
150
153
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 ` ! ` 轉換操作運算元成布林類型,並回傳相反的值。
153
156
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 ` ,它們除了彼此相等外,不跟任何人相等),所以這些是相等的:
156
159
157
160
```js run
158
161
alert( 0 == false ); // true
159
162
alert( 0 == '' ); // true
160
163
```
161
164
162
- Other comparisons convert to a number as well.
165
+ 其他的比較也會轉換成數值。
163
166
164
- The strict equality operator `===` doesn't do the conversion: different types always mean different values for it.
167
+ 嚴格相等運算子 `===` 不會進行轉換:不同類型永遠代表不同的值。
165
168
166
- Values `null` and `undefined` are special: they equal `==` each other and don't equal anything else.
169
+ `null` 和 `undefined` 值比較特殊:他們只在 `==` 下相等。
167
170
168
- Greater/less comparisons compare strings character-by-character, other types are converted to a number.
171
+ 大於/小於 的比較運算,在比較字串時,是按照字元逐一比較,其他類型則會先轉換成數值。
169
172
170
- Other operators
171
- : There are few others, like a comma operator.
173
+ 其他運算子
174
+ : 有一些其他的運算子,像是逗號運算子。
172
175
173
- More in: < info:operators > , < info:comparison > , < info:logical-operators > .
176
+ 更多資訊: < info:operators > , < info:comparison > , < info:logical-operators > .
174
177
175
- ## Loops
178
+ ## 迴圈
176
179
177
- - We covered 3 types of loops :
180
+ - 我們介紹了三種類型的迴圈 :
178
181
179
182
``` js
180
183
// 1
@@ -193,25 +196,25 @@ More in: <info:operators>, <info:comparison>, <info:logical-operators>.
193
196
}
194
197
```
195
198
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` 允許退出整個 迴圈 / 當前迭代。使用標籤來打破巢狀迴圈。
198
201
199
- Details in : < info: while - for > .
202
+ 更多資訊: < info: while - for > 。
200
203
201
- Later we ' ll study more types of loops to deal with objects.
204
+ 稍後我們將會學習更多類型的迴圈來處理物件。
202
205
203
- ## The "switch" construct
206
+ ## " switch" 結構
204
207
205
- The "switch" construct can replace multiple `if` checks. It uses `===` (strict equality) for comparisons.
208
+ " switch" 結構可以取代多個 ` if` 檢查。 它使用 ` ===` (嚴格相等) 進行比較。
206
209
207
- For instance:
210
+ 例如:
208
211
209
212
` ` ` js run
210
213
let age = prompt('Your age?', 18);
211
214
212
215
switch (age) {
213
216
case 18:
214
- alert("Won' t work" ); // the result of prompt is a string, not a number
217
+ alert("Won't work"); // 提示的結果是一個字串,而非數字
215
218
216
219
case "18":
217
220
alert("This works!");
@@ -222,13 +225,13 @@ switch (age) {
222
225
}
223
226
` ` `
224
227
225
- Details in: <info:switch>.
228
+ 更多資訊: < info: switch >。
226
229
227
- ## Functions
230
+ ## 函式
228
231
229
- We covered three ways to create a function in JavaScript:
232
+ 我們介紹了三種在 JavaScript 中創建函式的方式:
230
233
231
- 1. Function Declaration: the function in the main code flow
234
+ 1. 函式宣告: 主要程式流程中的函示
232
235
233
236
```js
234
237
function sum(a, b) {
@@ -238,7 +241,7 @@ We covered three ways to create a function in JavaScript:
238
241
}
239
242
```
240
243
241
- 2. Function Expression: the function in the context of an expression
244
+ 2. 函式表達式: 表達式上下文中的函式
242
245
243
246
` ` ` js
244
247
let sum = function(a, b) {
@@ -248,32 +251,32 @@ We covered three ways to create a function in JavaScript:
248
251
};
249
252
` ` `
250
253
251
- 3. Arrow functions:
254
+ 3. 箭頭函式:
252
255
253
256
` ` ` js
254
- // expression at the right side
257
+ // 表達式在右邊
255
258
let sum = (a, b) => a + b;
256
259
257
- // or multi-line syntax with { ... }, need return here:
260
+ // 或是帶有 { ... } 的多行語法,需要回傳:
258
261
let sum = (a, b) => {
259
262
// ...
260
263
return a + b;
261
264
}
262
265
263
- // without arguments
266
+ // 沒有引數
264
267
let sayHi = () => alert("Hello");
265
268
266
- // with a single argument
269
+ // 單一引數
267
270
let double = n => n * 2;
268
271
` ` `
269
272
270
273
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` 。
274
277
275
- Details: see <info:function-basics>, <info:function-expressions-arrows>.
278
+ 更多資訊:參見 < info : function -basics>、 <info : function -expressions-arrows>。
276
279
277
- ## More to come
280
+ ## 還有更多
278
281
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