Skip to content

Commit dbf0b77

Browse files
authored
Merge pull request #74 from lenchen1112/master
Sync with upstream @74e603a
2 parents 5347181 + 66d7d8d commit dbf0b77

File tree

28 files changed

+223
-197
lines changed

28 files changed

+223
-197
lines changed

1-js/01-getting-started/1-intro/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
2. 接著轉換("編譯")腳本為機器語言
3939
3. 然後機器語言極快地執行
4040
41-
引擎會對流程中每個階段進行優化。甚至會在執行時監看編譯好的腳本,分析其資料流並以此再優化為機器碼,由此腳本可以快速地執行
41+
引擎會對流程中每個階段進行優化。甚至會在執行時監看編譯好的腳本,分析其資料流,並以此再優化機器碼
4242
```
4343

4444
## 瀏覽器中的 JavaScript 可以做什麼?

1-js/02-first-steps/15-function-expressions-arrows/article.md renamed to 1-js/02-first-steps/15-function-expressions/article.md

Lines changed: 1 addition & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 函式表達式和箭頭函式
1+
# 函式表達式
22

33
在 JavaScript 中,函式不是一個 "神奇的語言結構",而是一種特殊的值。
44

@@ -347,7 +347,6 @@ welcome(); // ok now
347347
*/!*
348348
```
349349

350-
351350
```smart header="何時選擇函式宣告式或函式表達式?"
352351
根據經驗,當我們需要宣告函式時,首先考慮的是函式宣告式語法。對於組織我們的程式碼上,它給了我們更多的自由,因為我們可以在這些函式被宣告前呼叫他們。
353352
@@ -356,106 +355,6 @@ welcome(); // ok now
356355
...但如果函式宣告式由於某些原因不適合我們,或是我們需要條件式宣告(我們剛剛才看過例子),那就應該使用函式表達式。
357356
```
358357

359-
## 箭頭函式(Arrow functions) [#arrow-functions]
360-
361-
創建函式還有一個非常簡潔的語法,通常比函式表達式更好。它被稱為 "箭頭函式(arrow functions)",因為它看起來像這樣:
362-
363-
364-
```js
365-
let func = (arg1, arg2, ...argN) => expression
366-
```
367-
368-
...這會創建一個接受引數 `arg1..argN` 的函式 `func`,運行右側的 `expression` 並回傳結果。
369-
370-
換句話說,它大致與此相同:
371-
372-
```js
373-
let func = function(arg1, arg2, ...argN) {
374-
return expression;
375-
};
376-
```
377-
378-
...但更加簡潔。
379-
380-
讓我們來看個例子:
381-
382-
```js run
383-
let sum = (a, b) => a + b;
384-
385-
/* 箭頭函式是簡短版的:
386-
387-
let sum = function(a, b) {
388-
return a + b;
389-
};
390-
*/
391-
392-
alert( sum(1, 2) ); // 3
393-
394-
```
395-
396-
如果我們只有一個引數,那麼參數旁的括號可以省略,讓它更短:
397-
398-
```js run
399-
// 如同
400-
// let double = function(n) { return n * 2 }
401-
*!*
402-
let double = n => n * 2;
403-
*/!*
404-
405-
alert( double(3) ); // 6
406-
```
407-
408-
如果沒有任何引數,括號應該是空的(但他們應該被保留):
409-
410-
```js run
411-
let sayHi = () => alert("Hello!");
412-
413-
sayHi();
414-
```
415-
416-
箭頭函式的使用情境與函式宣告式相同。
417-
418-
比如,這邊是重寫 `welcome()` 的例子:
419-
420-
```js run
421-
let age = prompt("What is your age?", 18);
422-
423-
let welcome = (age < 18) ?
424-
() => alert('Hello') :
425-
() => alert("Greetings!");
426-
427-
welcome(); // ok now
428-
```
429-
430-
在剛開始使用箭頭函式時,可能會覺得不熟悉且閱讀性不那麼好,但習慣這種結構後,情況會迅速改變。
431-
432-
他們對於簡單的單行動作非常方便,尤其當我們發懶不想寫太多文字時。
433-
434-
```smart header="多行箭頭函式"
435-
436-
上述的範例拿 `=>` 左側的引數並在右側的表達式中使用它們。
437-
438-
有時我們需要一些更複雜的東西,像是多個表達式或是述語。這也是可能的,但我們應該用大括弧將它們括起來。然後在其中使用普通的 `return`
439-
440-
像這樣:
441-
442-
```js run
443-
let sum = (a, b) => { // 大括弧開啟多行函式
444-
let result = a + b;
445-
*!*
446-
return result; // 如果我們使用大括弧,用 return 來取得結果
447-
*/!*
448-
};
449-
450-
alert( sum(1, 2) ); // 3
451-
```
452-
453-
```smart header="還有更多"
454-
這裡我們稍微稱讚了箭頭函式。但那不是全部!箭頭函式還有其他有趣的功能。我們稍後將在章節 <info:arrow-functions> 中回頭學習它們。
455-
456-
目前,我們已經可以在單行動作與回呼中使用箭頭函式。
457-
```
458-
459358
## 總結
460359

461360
- 函式是值。他們可以被指定、複製或在程式碼中任何地方被宣告。
@@ -467,8 +366,3 @@ alert( sum(1, 2) ); // 3
467366
在大多數情況下,當我們需要宣告一個函式時,我們偏好採用函式宣告式,因為它讓函式在宣告前就是可視的。這給了我們很多組織程式碼的彈性,通常也具有較佳的可讀性。
468367

469368
所以我們應該只在函式宣告式不適合任務時才採用函式表達式。我們在這章節中已經看到一些例子,將來會看到更多。
470-
471-
箭頭函式對於單行動作來說非常方便。以下是它的兩個樣貌:
472-
473-
1. 沒有大括號:`(...args) => expression` -- 右側是一個表達式:函式執行它並回傳結果。
474-
2. 有大括號:`(...args) => { body }` -- 括號允許我們在函式內撰寫多行述語,但我們需要一個明確地 `return` 來回傳一些東西。
Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
# 箭頭函式,基本觀念
2+
3+
創建函式還有一個非常簡潔的語法,通常比函式表達式更好。
4+
5+
它被稱為 "箭頭函式(arrow functions)",因為它看起來像這樣:
6+
7+
```js
8+
let func = (arg1, arg2, ...argN) => expression
9+
```
10+
11+
...這會創建一個接受引數 `arg1..argN` 的函式 `func`,運行右側的 `expression` 並回傳結果。
12+
13+
換句話說,它是這個的簡短版本:
14+
15+
```js
16+
let func = function(arg1, arg2, ...argN) {
17+
return expression;
18+
};
19+
```
20+
21+
讓我們來看個實際範例:
22+
23+
```js run
24+
let sum = (a, b) => a + b;
25+
26+
/* 箭頭函式是簡短版的:
27+
28+
let sum = function(a, b) {
29+
return a + b;
30+
};
31+
*/
32+
33+
alert( sum(1, 2) ); // 3
34+
```
35+
36+
如你所見,`(a, b) => a + b` 代表接收兩個名為 `a``b` 引數的函式。在執行時,它會運算 `a + b` 的表達式然後回傳結果。
37+
38+
- 如果我們只有一個引數,那麼參數旁的括號可以省略,讓它更短。
39+
40+
例如:
41+
42+
```js run
43+
*!*
44+
let double = n => n * 2;
45+
// 大致上等同於:let double = function(n) { return n * 2 }
46+
*/!*
47+
48+
alert( double(3) ); // 6
49+
```
50+
51+
- 如果沒有任何引數,括號應該是空的(但他們應該被保留):
52+
53+
```js run
54+
let sayHi = () => alert("Hello!");
55+
56+
sayHi();
57+
```
58+
59+
箭頭函式的使用情境與函式宣告式相同。
60+
61+
例如,動態產生一個函式:
62+
63+
```js run
64+
let age = prompt("What is your age?", 18);
65+
66+
let welcome = (age < 18) ?
67+
() => alert('Hello') :
68+
() => alert("Greetings!");
69+
70+
welcome(); // ok now
71+
```
72+
73+
在剛開始使用箭頭函式時,可能會覺得不熟悉且閱讀性不那麼好,但習慣這種結構後,情況會迅速改變。
74+
75+
他們對於簡單的單行動作非常方便,尤其當我們發懶不想寫太多文字時。
76+
77+
## 多行箭頭函式
78+
79+
上述的範例拿取 `=>` 左側的引數並在右側的表達式中使用它們。
80+
81+
有時我們需要一些更複雜的東西,像是多個表達式或是述語。這也是可行的,但我們應該用大括弧將它們括起來。然後在其中使用普通的 `return`
82+
83+
像這樣:
84+
85+
```js run
86+
let sum = (a, b) => { // 大括弧開啟多行函式
87+
let result = a + b;
88+
*!*
89+
return result; // 如果我們使用大括弧,則需要明確的 "return"
90+
*/!*
91+
};
92+
93+
alert( sum(1, 2) ); // 3
94+
```
95+
96+
```smart header="還有更多"
97+
這裡我們稍微稱讚了箭頭函式。但那不是全部!
98+
99+
箭頭函式還有其他有趣的功能。
100+
101+
想更深入學習它們,我們首先需要了解 JavaScript 的其餘面向,因此我們會晚點再於章節 <info:arrow-functions> 中回來看箭頭函式。
102+
103+
至此,我們已經可以在單行動作與回呼中使用箭頭函式。
104+
```
105+
106+
## 總結
107+
108+
箭頭函式對於單行動作來說非常方便,以下是它的兩個樣貌:
109+
110+
1. 沒有大括號:`(...args) => expression` -- 右側是一個表達式:函式執行它並回傳結果。
111+
2. 有大括號:`(...args) => { body }` -- 括號允許我們在函式內撰寫多行述語,但我們需要用明確地 `return` 來回傳東西。

1-js/02-first-steps/16-javascript-specials/article.md renamed to 1-js/02-first-steps/17-javascript-specials/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,7 @@ switch (age) {
275275
- 參數可以有預設值:`function sum(a = 1, b = 2) {...}`
276276
- 函式永遠會回傳一些東西。如果沒有 `return` 述語,則其結果為 `undefined`
277277

278-
更多資訊:參見 <info:function-basics>、<info:function-expressions-arrows>。
278+
更多資訊:參見 <info:function-basics>、<info:arrow-functions-basics>。
279279

280280
## 還有更多
281281

1-js/05-data-types/05-array-methods/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -447,7 +447,7 @@ alert(arr); // *!*1, 2, 15*/!*
447447
````
448448

449449
````smart header="Arrow functions for the best"
450-
Remember [arrow functions](info:function-expressions-arrows#arrow-functions)? We can use them here for neater sorting:
450+
Remember [arrow functions](info:arrow-functions-basics)? We can use them here for neater sorting:
451451
452452
```js
453453
arr.sort( (a, b) => a - b );

1-js/05-data-types/11-date/article.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,13 @@ To create a new `Date` object call `new Date()` with one of the following argume
3333

3434
It's a lightweight numeric representation of a date. We can always create a date from a timestamp using `new Date(timestamp)` and convert the existing `Date` object to a timestamp using the `date.getTime()` method (see below).
3535

36+
Dates before 01.01.1970 have negative timestamps, e.g.:
37+
```js run
38+
// 31 Dec 1969
39+
let Dec31_1969 = new Date(-24 * 3600 * 1000);
40+
alert( Dec31_1969 );
41+
```
42+
3643
`new Date(datestring)`
3744
: If there is a single argument, and it's a string, then it is parsed automatically. The algorithm is the same as `Date.parse` uses, we'll cover it later.
3845

1-js/09-classes/01-class/article.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -116,9 +116,9 @@ alert(User.prototype.sayHi); // alert(this.name);
116116
alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
117117
```
118118

119-
## Not just a syntax sugar
119+
## Not just a syntactic sugar
120120

121-
Sometimes people say that `class` is a "syntax sugar" (syntax that is designed to make things easier to read, but doesn't introduce anything new), because we could actually declare the same without `class` keyword at all:
121+
Sometimes people say that `class` is a "syntactic sugar" (syntax that is designed to make things easier to read, but doesn't introduce anything new), because we could actually declare the same without `class` keyword at all:
122122

123123
```js run
124124
// rewriting class User in pure functions
@@ -140,7 +140,7 @@ let user = new User("John");
140140
user.sayHi();
141141
```
142142

143-
The result of this definition is about the same. So, there are indeed reasons why `class` can be considered a syntax sugar to define a constructor together with its prototype methods.
143+
The result of this definition is about the same. So, there are indeed reasons why `class` can be considered a syntactic sugar to define a constructor together with its prototype methods.
144144

145145
Still, there are important differences.
146146

@@ -282,7 +282,7 @@ Object.defineProperties(User.prototype, {
282282
});
283283
```
284284

285-
Here's an example with a computed property in brackets `[...]`:
285+
Here's an example with a computed property name in brackets `[...]`:
286286

287287
```js run
288288
class User {
@@ -318,6 +318,9 @@ class User {
318318
}
319319

320320
new User().sayHi();
321+
322+
alert(User.prototype.sayHi); // placed in User.prototype
323+
alert(User.prototype.name); // undefined, not placed in User.prototype
321324
```
322325

323326
The property `name` is not placed into `User.prototype`. Instead, it is created by `new` before calling the constructor, it's a property of the object itself.

1-js/09-classes/02-class-inheritance/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ The syntax to extend another class is: `class Child extends Parent`.
4040

4141
Let's create `class Rabbit` that inherits from `Animal`:
4242

43-
```js run
43+
```js
4444
*!*
4545
class Rabbit extends Animal {
4646
*/!*

0 commit comments

Comments
 (0)