mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-23 17:41:41 +00:00
Compare commits
5 Commits
6a091ce32a
...
7f07fb87aa
| Author | SHA1 | Date | |
|---|---|---|---|
|
7f07fb87aa | ||
|
|
774ae2c45a | ||
|
|
7678771275 | ||
|
|
990878a11f | ||
|
|
d56d88c263 |
2
.github/workflows/lint.yml
vendored
2
.github/workflows/lint.yml
vendored
@ -11,7 +11,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ruby/setup-ruby@ec02537da5712d66d4d50a0f33b7eb52773b5ed1
|
||||
- uses: ruby/setup-ruby@v1
|
||||
with:
|
||||
ruby-version: '3.2'
|
||||
- run: gem install mdl
|
||||
|
||||
@ -161,6 +161,71 @@ useful tips.
|
||||
<td>second row, second column</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- ################ Additional Tags ################# -->
|
||||
|
||||
<!-- In addition to the first example, here are some more common HTML element tags. -->
|
||||
|
||||
<head>
|
||||
<!-- <meta> describes metadata. -->
|
||||
<!-- We define the content-type and the viewport. -->
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!--
|
||||
Enhance your HTML with JavaScript and CSS.
|
||||
Javascript allows interaction between the user and the page.
|
||||
CSS (Cascading Style Sheet) tells how to display HTML elements in the browser.
|
||||
-->
|
||||
|
||||
<!-- External JavaScript file -->
|
||||
<script src='scripts.js'></script>
|
||||
|
||||
<!-- Inline JavaScript code -->
|
||||
<script>
|
||||
console.log('Hello world')
|
||||
</script>
|
||||
|
||||
<!-- External CSS file -->
|
||||
<link href="styles.css" rel="stylesheet">
|
||||
|
||||
<!-- Inline CSS -->
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<!-- <div> is a simple block container that can contains other elements. -->
|
||||
<!-- <br> adds a line break. -->
|
||||
<div>
|
||||
First line.<br>Second line.<br>
|
||||
<i>italics</i> <b>bold</b> <u>underline</u>
|
||||
</div>
|
||||
|
||||
<!-- An HTML form. -->
|
||||
<form method="post" action="action.php" id="myForm">
|
||||
Post title: <input name="name" type="text"><br>
|
||||
Category:
|
||||
<select name="category">
|
||||
<option selected="selected" value="general">General</option>
|
||||
<option value="js">Javascript</option>
|
||||
<option value="html">HTML</option>
|
||||
</select><br>
|
||||
Post language:
|
||||
<label><input checked="checked" name="lang" type="radio" value="markdown"> Markdown</label>
|
||||
<label><input name="lang" type="radio" value="html"> HTML</label><br>
|
||||
<textarea name="post">Post content</textarea><br>
|
||||
</form>
|
||||
|
||||
<button type="submit" form="myForm" value="Submit">Submit</button>
|
||||
|
||||
<!-- Iframe embeds another HTML page into the current one. -->
|
||||
<iframe src="https://www.openstreetmap.org/export/embed.html">
|
||||
</iframe>
|
||||
|
||||
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
611
zh-tw/javascript-tw.html.markdown
Normal file
611
zh-tw/javascript-tw.html.markdown
Normal file
@ -0,0 +1,611 @@
|
||||
---
|
||||
language: javascript
|
||||
category: language
|
||||
name: javascript
|
||||
filename: javascript-zh-tw.js
|
||||
contributors:
|
||||
- ["Leigh Brenecki", "https://leigh.net.au"]
|
||||
- ["Ariel Krakowski", "http://www.learneroo.com"]
|
||||
translators:
|
||||
- ["Woody Chang", "https://github.com/kazettique"]
|
||||
lang: zh-tw
|
||||
---
|
||||
|
||||
JavaScript 是由網景公司（Netscape）的布蘭登·艾克（Brendan Eich）於 1995 年創建的。它最初被設計為一種更簡單的網站腳本語言，用於補足 Java 在更複雜的網路應用程式中使用，但由於它與網頁的高度整合，以及瀏覽器對 JavaScript 的原生支援，使得它在網頁前端的應用遠比 Java 更加普及。
|
||||
|
||||
然而 JavaScript 並不僅限於網頁瀏覽器：Node.js，一個可提供 Google Chrome 的 V8 JavaScript 引擎執行環境的專案，正變得越來越熱門。
|
||||
|
||||
JavaScript 具備類似 C 語言的語法，所以若您曾使用過 C 或 Java 等語言，許多基本語法對您來說已經相當熟悉了。雖然在語法上、名稱上與 Java 很類似，但是 JavaScript 的物件模型卻與 Java 有顯著地不同。
|
||||
|
||||
```js
|
||||
// 這是單行註解
|
||||
/* 這是
|
||||
多行註解 */
|
||||
|
||||
// 陳述式可以用分號（;）終止
|
||||
doStuff();
|
||||
|
||||
// ... 然而不一定要加分號，當換行時會自動插入分號（除了某些特殊情況）。
|
||||
doStuff()
|
||||
|
||||
// 避免意外結果的情況，本文會繼續使用分號
|
||||
|
||||
///////////////////////////////////
|
||||
// 1. 數字、字串和運算子
|
||||
|
||||
// JavaScript 只有一種數字型別（也就是 64 位元 IEEE 754 雙精度浮點數）。
|
||||
// 雙精度浮點數有一個 52 位的尾數，足以精確儲存整數最大至 9✕10¹⁵ 的整數。
|
||||
3; // = 3
|
||||
1.5; // = 1.5
|
||||
|
||||
// 所有基本算術運算都如您預期。
|
||||
1 + 1; // = 2
|
||||
0.1 + 0.2; // = 0.30000000000000004
|
||||
8 - 1; // = 7
|
||||
10 * 2; // = 20
|
||||
35 / 5; // = 7
|
||||
|
||||
// 包括無法整除的除法運算。
|
||||
5 / 2; // = 2.5
|
||||
|
||||
// 以及餘數運算。
|
||||
10 % 2; // = 0
|
||||
30 % 4; // = 2
|
||||
18.5 % 7; // = 4.5
|
||||
|
||||
// 位元運算也是如此，當執行位元運算時，浮點數會轉換「最多」32位元的有符號整數
|
||||
1 << 2; // = 4
|
||||
|
||||
// 以括號決定運算優先級。
|
||||
(1 + 3) * 2; // = 8
|
||||
|
||||
// 有三個非數值的值：
|
||||
Infinity; // 1/0 的結果
|
||||
-Infinity; // -1/0 的結果
|
||||
NaN; // 0/0 的結果
|
||||
|
||||
// 也有布林值。
|
||||
true;
|
||||
false;
|
||||
|
||||
// 透過單引號（'）或雙引號（"）建立字串。
|
||||
'abc';
|
||||
"Hello, world";
|
||||
|
||||
// 以驚嘆號（!）執行否定運算
|
||||
!true; // = false
|
||||
!false; // = true
|
||||
|
||||
// 相等運算 `===`
|
||||
1 === 1; // = true
|
||||
2 === 1; // = false
|
||||
|
||||
// 不相等運算 !==
|
||||
1 !== 1; // = false
|
||||
2 !== 1; // = true
|
||||
|
||||
// 更多比較運算子
|
||||
1 < 10; // = true
|
||||
1 > 10; // = false
|
||||
2 <= 2; // = true
|
||||
2 >= 2; // = true
|
||||
|
||||
// 以加號(+)進行字串的串接
|
||||
"Hello " + "world!"; // = "Hello world!"
|
||||
|
||||
// 也可以串接字串以外的資料型別
|
||||
"1, 2, " + 3; // = "1, 2, 3"
|
||||
"Hello " + ["world", "!"]; // = "Hello world,!"
|
||||
|
||||
// 這可能導致一些奇怪的行為
|
||||
13 + !0; // 14
|
||||
"13" + !0; // '13true'
|
||||
|
||||
// 以 `<` 和 `>` 進行比較運算
|
||||
"a" < "b"; // = true
|
||||
|
||||
// 使用「兩個等號」（==）做運算時，會執行資料強制轉型
|
||||
"5" == 5; // = true
|
||||
null == undefined; // = true
|
||||
|
||||
// 除非使用「三個等號」（===）
|
||||
"5" === 5; // = false
|
||||
null === undefined; // = false
|
||||
|
||||
// 您可以使用 `charAt` 來取得字串中的字符
|
||||
"This is a string".charAt(0); // = 'T'
|
||||
|
||||
// 或使用 `substring` 獲得更大的區塊。
|
||||
"Hello world".substring(0, 5); // = "Hello"
|
||||
|
||||
// `length` 是一個屬性，因此不要使用 `()`。
|
||||
"Hello".length; // = 5
|
||||
|
||||
// 還有 `null` 和 `undefined` 兩個特殊值。
|
||||
null; // 用於表示刻意指定為空值
|
||||
undefined; // 用來表示目前尚未指定值(儘管 `undefined` 實際上本身是一個值)
|
||||
|
||||
// `false`、`null`、`undefined`、`NaN`、`0` 及 `""`（空字串）皆為偽值（falsy），
|
||||
// 其他的皆為真值（truthy）。
|
||||
// 特別注意，`0` 是偽值，`"0"` 則是真值，儘管 0 == "0"。（因為隱含地轉型）
|
||||
|
||||
///////////////////////////////////
|
||||
// 2. 變數、陣列與物件
|
||||
|
||||
// 以 `var` 關鍵字宣告變數。JavaScript 是動態型別，因此無需指定型別。
|
||||
// 使用一個等號 `=` 來賦值。
|
||||
var someVar = 5;
|
||||
|
||||
// 若忽略使用 `var` 關鍵字，也不會得到錯誤
|
||||
someOtherVar = 10;
|
||||
|
||||
// ...但是您定義的變數將在自動建立在全域，而不在您定義的作用域中。
|
||||
|
||||
// 若在定義變數時未賦予初始值，則預設為 `undefined`。
|
||||
var someThirdVar; // = undefined
|
||||
|
||||
// 若要一次宣告多個變數，可以使用逗號分隔
|
||||
var someFourthVar = 2, someFifthVar = 4;
|
||||
|
||||
// 變數的數學運算有一些簡寫法：
|
||||
someVar += 5; // 等效於 somevar = somevar + 5，現在為 10
|
||||
someVar *= 10; // 現在 someVar 為 100
|
||||
|
||||
// 對於增減 1 的運算，還有更簡略的寫法：
|
||||
someVar++; // 現在 someVar 為 101
|
||||
someVar--; // 回到 100
|
||||
|
||||
// 陣列是以任何型別的資料所組成、有順序性的列表。
|
||||
var myArray = ["Hello", 45, true];
|
||||
|
||||
// 可使用中括號（方括號）`[]` 語法存取其成員。
|
||||
// 陣列的索引值（index）從 0 開始。
|
||||
myArray[1]; // = 45
|
||||
|
||||
// 陣列是可變的，並有隨成員數量變動的長度 `length`。
|
||||
myArray.push("World");
|
||||
myArray.length; // = 4
|
||||
|
||||
// 於指定的索引值新增/修改陣列的成員
|
||||
myArray[3] = "Hello";
|
||||
|
||||
// 從陣列的最前端或最後端新增或刪除元素
|
||||
myArray.unshift(3); // 新增元素至最前端
|
||||
someVar = myArray.shift(); // 移除第一個元素並回傳
|
||||
myArray.push(3); // 新增元素至最後端
|
||||
someVar = myArray.pop(); // 移除最後一個元素並回傳
|
||||
|
||||
// 以分號 `;` 結合陣列的所有元素
|
||||
var myArray0 = [32, false, "js", 12, 56, 90];
|
||||
myArray0.join(";"); // = "32;false;js;12;56;90"
|
||||
|
||||
// 取得索引 1（包括）到 4（排除）元素的子陣列
|
||||
myArray0.slice(1, 4); // = [false, "js", 12]
|
||||
|
||||
// 從索引 2 開始刪除 4 個元素，然後在那裡插入字串 "hi"、"wr" 和"ld"，並回傳刪除的子陣列
|
||||
myArray0.splice(2, 4, "hi", "wr", "ld"); // = ["js", 12, 56, 90]
|
||||
// myArray0 === [32, false, "hi", "wr", "ld"]
|
||||
|
||||
// JavaScript 的物件等同於其他語言中的「字典」（Dictionary）或「映射」（Map）：
|
||||
// 無順序性的鍵值對（key value pair）集合。
|
||||
var myObj = { key1: "Hello", key2: "World" };
|
||||
|
||||
// 鍵的名稱是字串，若它們是有效的 JavaScript 標識字，則不需要使用引號。
|
||||
// 值則可以是任何資料型別。
|
||||
var myObj = { myKey: "myValue", "my other key": 4 };
|
||||
|
||||
// 物件屬性也可以使用下標語法存取
|
||||
myObj["my other key"]; // = 4
|
||||
|
||||
// ...或使用 `.` 來存取，前提是該鍵值必須是有效的標識字。
|
||||
myObj.myKey; // = "myValue"
|
||||
|
||||
// 物件是可變的；其值可修改，並可新增新的鍵值。
|
||||
myObj.myThirdKey = true;
|
||||
|
||||
// 如果您嘗試存取不存在的值，將得到 `undefined` 值。
|
||||
myObj.myFourthKey; // = undefined
|
||||
|
||||
///////////////////////////////////
|
||||
// 3. 邏輯和控制結構
|
||||
|
||||
// `if` 結構，如同其他語言
|
||||
var count = 1;
|
||||
if (count == 3){
|
||||
// count 等於 3 時執行
|
||||
} else if (count == 4){
|
||||
// count 等於 4 時執行
|
||||
} else {
|
||||
// 其他情況下執行
|
||||
}
|
||||
|
||||
// `while` 迴圈
|
||||
while (true){
|
||||
// 無窮迴圈！
|
||||
}
|
||||
|
||||
// Do-while 迴圈類似 While 迴圈，但它至少執行一次
|
||||
var input;
|
||||
do {
|
||||
input = getInput();
|
||||
} while (!isValid(input));
|
||||
|
||||
// `for` 迴圈和 C、Java 語言一樣：
|
||||
// 初始化; 繼續條件; 迭代。
|
||||
for (var i = 0; i < 5; i++){
|
||||
// 會執行 5 次
|
||||
}
|
||||
|
||||
// 類似 Java，利用迴圈標籤（label）來終止外層的迴圈
|
||||
outer:
|
||||
for (var i = 0; i < 10; i++) {
|
||||
for (var j = 0; j < 10; j++) {
|
||||
if (i == 5 && j ==5) {
|
||||
break outer;
|
||||
// 不但終止內部迴圈，也終止外部迴圈
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// for/in 陳述式可以迭代物件中的所有屬性。
|
||||
var description = "";
|
||||
var person = { fname: "Paul", lname: "Ken", age: 18 };
|
||||
for (var x in person){
|
||||
description += person[x] + " ";
|
||||
} // description 為 'Paul Ken 18 '
|
||||
|
||||
// for/of 陳述式允許迭代可迭代物件（包括內建的字串、陣列、例如類陣列（array-like）參數
|
||||
// 或 NodeList 物件、Typedarray 物件、映射（Map）和集合（Set），
|
||||
// 及用戶自定義的可迭代物件（iterables））。
|
||||
var myPets = "";
|
||||
var pets = ["cat", "dog", "hamster", "hedgehog"];
|
||||
for (var pet of pets){
|
||||
myPets += pet + " ";
|
||||
} // myPets 為 'cat dog hamster hedgehog '
|
||||
|
||||
// `&&` 是邏輯且（and）, `||` 是邏輯或（or）
|
||||
if (house.size == "big" && house.colour == "blue"){
|
||||
house.contains = "bear";
|
||||
}
|
||||
if (colour == "red" || colour == "blue"){
|
||||
// colour 等於 "red" 或 "blue" 時執行
|
||||
}
|
||||
|
||||
// `||` 可用來設定初始值，稱做「短路」（short circuit）陳述式
|
||||
var name = otherName || "default";
|
||||
|
||||
// `switch` 陳述式使用 `===` 來檢查相等性。
|
||||
// 在每個 case 後使用 `break`，否則之後的 case 也會被執行。
|
||||
grade = 'B';
|
||||
switch (grade) {
|
||||
case 'A':
|
||||
console.log("Great job");
|
||||
break;
|
||||
case 'B':
|
||||
console.log("OK job");
|
||||
break;
|
||||
case 'C':
|
||||
console.log("You can do better");
|
||||
break;
|
||||
default:
|
||||
console.log("Oy vey");
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
///////////////////////////////////
|
||||
// 4. 函式、作用域與閉包
|
||||
|
||||
// JavaScript 函式是使用 `function` 關鍵字來宣告的。
|
||||
function myFunction(thing) {
|
||||
return thing.toUpperCase();
|
||||
}
|
||||
myFunction("foo"); // = "FOO"
|
||||
|
||||
// 值得注意的是，要回傳的值必須開始於關鍵字 `return` 那一行，
|
||||
// 否則會因為自動插入分號，而將回傳 `undefined`。
|
||||
// 在使用 Allman 程式碼風格時要特別注意。
|
||||
function myFunction()
|
||||
{
|
||||
return // <- 分號在此自動插入
|
||||
{
|
||||
thisIsAn: 'object literal'
|
||||
};
|
||||
}
|
||||
myFunction(); // = undefined
|
||||
|
||||
// JavaScript 函式為一等物件（first-class objects），
|
||||
// 所以它們可以被重新賦值給不同的變數，
|
||||
// 並作為參數傳遞給其他函式 - 例如一個事件處理函式：
|
||||
function myFunction() {
|
||||
// 這段程式碼將在 5 秒後執行
|
||||
}
|
||||
setTimeout(myFunction, 5000);
|
||||
// 註：setTimeout 並不是 JS 語言的一部分，而是由瀏覽器和 Node.js 提供的 API。
|
||||
|
||||
// setInterval 是瀏覽器提供的另一個 API
|
||||
function myFunction() {
|
||||
// 這段程式碼每 5 秒執行一次
|
||||
}
|
||||
setInterval(myFunction, 5000);
|
||||
|
||||
// 函式物件甚至不需要用名稱來宣告 - 你可以直接在另一個函數的參數中直接定義匿名函式。
|
||||
setTimeout(function(){
|
||||
// 這段程式碼將在 5 秒後執行
|
||||
}, 5000);
|
||||
|
||||
// JavaScript 具有函式作用域（scope）；函式擁有自己的作用域，但其他區塊（block）則沒有。
|
||||
if (true){
|
||||
var i = 5;
|
||||
}
|
||||
i; // = 5 - 並非在其他語言所預期的 `undefined`
|
||||
|
||||
// 這導致了一種常見的使用方式，即「立即執行匿名函式」，它可以防止臨時變數洩漏到全域作用域。
|
||||
(function(){
|
||||
var temporary = 5;
|
||||
// 我們可以透過賦值給「全域物件」來訪問全域作用域，
|
||||
// 在網頁瀏覽器中，這個全域物件始終是 `window`。
|
||||
// 在非瀏覽器環境中（例如 Node.js），全域物件可能有不同的名稱。
|
||||
window.permanent = 10;
|
||||
})();
|
||||
temporary; // 拋出錯誤 ReferenceError
|
||||
permanent; // = 10
|
||||
|
||||
// 閉包：JavaScript 最強大的特性之一。
|
||||
// 若一個函式在另一個函式內部定義，即使外部函式已經執行結束，
|
||||
// 內部函式仍可以存取外部函式的所有變數。
|
||||
function sayHelloInFiveSeconds(name){
|
||||
var prompt = "Hello, " + name + "!";
|
||||
// 預設情況下，內部函式會被置於局部作用域中，就如同它們是以 `var` 宣告。
|
||||
function inner(){
|
||||
alert(prompt);
|
||||
}
|
||||
setTimeout(inner, 5000);
|
||||
// setTimeout 是非同步的，所以 sayHelloInFiveSeconds 函式會立即退出。
|
||||
// 而 setTimeout 會在之後呼叫 inner 函式。
|
||||
// 然而，由於 inner 函式被「閉合包含」（closed over）在 sayHelloInFiveSeconds 函式中，
|
||||
// 因此當它最終被呼叫時，仍然可以存取 `prompt` 變數。
|
||||
}
|
||||
sayHelloInFiveSeconds("Adam"); // 將在 5 秒後跳出 "Hello, Adam!" 訊息
|
||||
|
||||
///////////////////////////////////
|
||||
// 5. 更多的物件、建構函式、原型
|
||||
|
||||
// 物件可以包含函式
|
||||
var myObj = {
|
||||
myFunc: function(){
|
||||
return "Hello world!";
|
||||
}
|
||||
};
|
||||
myObj.myFunc(); // 回傳 "Hello world!"
|
||||
|
||||
// 當物件裡的函式被呼叫時，它們可以使用 `this` 關鍵字來存取所屬物件的其他成員。
|
||||
myObj = {
|
||||
myString: "Hello world!",
|
||||
myFunc: function() {
|
||||
return this.myString;
|
||||
}
|
||||
};
|
||||
myObj.myFunc(); // 回傳 "Hello world!"
|
||||
|
||||
// `this` 的設定與函式如何被呼叫有關，而非定義的位置。
|
||||
// 因此，若我們的函式不是在物件的脈絡（context）中被呼叫，就無法正常運作。
|
||||
var myFunc = myObj.myFunc;
|
||||
myFunc(); // = undefined
|
||||
|
||||
// 反之，一個函式可以被賦值給物件並透過 `this` 獲得對它的存取權限，
|
||||
// 即使它在定義時並未依附於該物件上。
|
||||
var myOtherFunc = function() {
|
||||
return this.myString.toUpperCase();
|
||||
};
|
||||
myObj.myOtherFunc = myOtherFunc;
|
||||
myObj.myOtherFunc(); // 回傳 "HELLO WORLD!"
|
||||
|
||||
// 我們也可以在呼叫函式時使用 `call` 或 `apply` 來指定函式的脈絡。
|
||||
var anotherFunc = function(s) {
|
||||
return this.myString + s;
|
||||
};
|
||||
anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"
|
||||
|
||||
// `apply` 函式的用法幾乎一樣，差別在於要用陣列的格式傳遞參數
|
||||
anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"
|
||||
|
||||
// 這在處理接受一系列參數時很有用，特別是當您想要傳遞一個陣列時。
|
||||
Math.min(42, 6, 27); // = 6
|
||||
Math.min([42, 6, 27]); // = NaN（噢！）
|
||||
Math.min.apply(Math, [42, 6, 27]); // = 6
|
||||
|
||||
// 然而 `call` 和 `apply` 只是暫時的。當我們希望它永久有效時，我們可以使用 `bind`。
|
||||
var boundFunc = anotherFunc.bind(myObj);
|
||||
boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"
|
||||
|
||||
// `bind` 也可以用於部分應用，例如：柯里化（curry）的函式。
|
||||
var product = function(a, b) { return a * b; };
|
||||
var doubler = product.bind(this, 2);
|
||||
doubler(8); // = 16
|
||||
|
||||
// 當您使用 `new` 關鍵字呼叫一個函式時，會建立一個新的物件，
|
||||
// 並透過 `this` 關鍵字使該物件可用於該函式。用此方式呼叫的函式被稱為「建構函式」。
|
||||
var MyConstructor = function(){
|
||||
this.myNumber = 5;
|
||||
};
|
||||
myNewObj = new MyConstructor(); // = { myNumber: 5 }
|
||||
myNewObj.myNumber; // = 5
|
||||
|
||||
// 與大多數其他流行的物件導向語言不同，JavaScript 沒有從類別（class）藍圖建立
|
||||
// 實例（instance）的概念；相反地，JavaScript 將實例化（instantiation）和
|
||||
// 繼承（inheritance）結合成單一的概念：「原型」（prototype）。
|
||||
|
||||
// 每個 JavaScript 物件都有一個「原型」（prototype）。
|
||||
// 當你試圖存取一個物件上不存在的屬性時，直譯器（interpreter）會嘗試查找它的原型。
|
||||
|
||||
// 某些 JS 實作允許你透過屬性 `__proto__` 存取原型。雖然這對於解釋原型很有幫助，
|
||||
// 但它不是標準的操作方式；稍後會介紹使用原型的標準方法。
|
||||
var myObj = {
|
||||
myString: "Hello world!"
|
||||
};
|
||||
var myPrototype = {
|
||||
meaningOfLife: 42,
|
||||
myFunc: function() {
|
||||
return this.myString.toLowerCase();
|
||||
}
|
||||
};
|
||||
|
||||
myObj.__proto__ = myPrototype;
|
||||
myObj.meaningOfLife; // = 42
|
||||
|
||||
// 函式照常運作。
|
||||
myObj.myFunc(); // = "hello world!"
|
||||
|
||||
// 當然，若您的屬性不在原型上，則會搜尋原型的原型，以此類推。
|
||||
myPrototype.__proto__ = {
|
||||
myBoolean: true
|
||||
};
|
||||
myObj.myBoolean; // = true
|
||||
|
||||
// 這裡沒有涉及任何複製；每個物件都儲存了一個指向其原型的參考。
|
||||
// 這意味著我們可以修改原型，而此修改將反映在任何地方。
|
||||
myPrototype.meaningOfLife = 43;
|
||||
myObj.meaningOfLife; // = 43
|
||||
|
||||
// for/in 陳述句允許循覽物件的屬性，沿著原型鏈向上查找，直到遇到 `null` 原型為止。
|
||||
for (var x in myObj){
|
||||
console.log(myObj[x]);
|
||||
}
|
||||
// 印出：
|
||||
// Hello world!
|
||||
// 43
|
||||
// [Function: myFunc]
|
||||
// true
|
||||
|
||||
// 若只考慮直接附加在物件本身而非其原型上的屬性，請使用 `hasOwnProperty()` 做檢查。
|
||||
for (var x in myObj){
|
||||
if (myObj.hasOwnProperty(x)){
|
||||
console.log(myObj[x]);
|
||||
}
|
||||
}
|
||||
// 印出：
|
||||
// Hello world!
|
||||
|
||||
// 我們提到 `__proto__` 是非標準用法，而且沒有標準的方法來修改現有物件的原型。
|
||||
// 然而，有兩種方法可以建立具有指定原型的新物件。
|
||||
|
||||
// 第一種方法是 `Object.create`。
|
||||
var myObj = Object.create(myPrototype);
|
||||
myObj.meaningOfLife; // = 43
|
||||
|
||||
// 第二種方法與建構函式有關，可在任何地方使用。建構函式有一個稱為 `prototype` 的屬性。
|
||||
// 這「不是」建構函式本身的原型；而是當使用該建構函式和 `new` 關鍵字建立新物件時，所賦予的原型。
|
||||
MyConstructor.prototype = {
|
||||
myNumber: 5,
|
||||
getMyNumber: function(){
|
||||
return this.myNumber;
|
||||
}
|
||||
};
|
||||
var myNewObj2 = new MyConstructor();
|
||||
myNewObj2.getMyNumber(); // = 5
|
||||
myNewObj2.myNumber = 6;
|
||||
myNewObj2.getMyNumber(); // = 6
|
||||
|
||||
// 內建型別如字串和數字也有建構函式，可以建立等效的包裝物件（wrapper object）。
|
||||
var myNumber = 12;
|
||||
var myNumberObj = new Number(12);
|
||||
myNumber == myNumberObj; // = true
|
||||
|
||||
// 然而，它們並非嚴格相等。
|
||||
typeof myNumber; // = 'number'
|
||||
typeof myNumberObj; // = 'object'
|
||||
myNumber === myNumberObj; // = false
|
||||
if (0){
|
||||
// 這段程式碼不會執行，因為 0 是偽值。
|
||||
}
|
||||
if (new Number(0)){
|
||||
// 這段程式碼將會執行，因為包裝過的數字是物件，而物件皆為真值。
|
||||
}
|
||||
|
||||
// 然而，包裝物件和常見的內建型別共享一個原型，所以你實際上可以為字串擴充功能，例如：
|
||||
String.prototype.firstCharacter = function(){
|
||||
return this.charAt(0);
|
||||
};
|
||||
"abc".firstCharacter(); // = "a"
|
||||
|
||||
// 此技巧常被用於「填充」（polyfilling），即在舊版的 JavaScript 中
|
||||
// 實作新版 JavaScript 才有的功能，以便它們可以在較舊的環境（例如過時的瀏覽器）中使用。
|
||||
|
||||
// 舉例來說，方才提到的 `Object.create` 並非在舊瀏覽器上使用，
|
||||
// 但我們仍然可以透過這個 polyfill 來補足其功能：
|
||||
if (Object.create === undefined){ // 若此方法存在，則不覆蓋
|
||||
Object.create = function(proto){
|
||||
// 製作一個具有正確原型的暫時建構函式
|
||||
var Constructor = function(){};
|
||||
Constructor.prototype = proto;
|
||||
// 然後使用它來建立一個具有適當原型的新物件
|
||||
return new Constructor();
|
||||
};
|
||||
}
|
||||
|
||||
// ES6 語法
|
||||
|
||||
// `let` 關鍵字讓您在語彙作用域（lexical scope）中定義變數，
|
||||
// 而不像 `var` 關鍵字那樣在函式作用域（function scope）中定義。
|
||||
let name = "Billy";
|
||||
|
||||
// 以 `let` 關鍵字定義的變數，可以賦予新值。
|
||||
name = "William";
|
||||
|
||||
// `const` 關鍵字如同 `let` 可在語彙作用域中定義變數，差別在於歐，一旦賦值後就不能更改其值。
|
||||
const pi = 3.14;
|
||||
|
||||
pi = 4.13; // 此操作並不合法。
|
||||
|
||||
// ES6 中有一種新的函式語法，稱為「lambda 語法」（lambda syntax）。
|
||||
// 這允許函式在語彙作用域中定義，如同 `const` 和 `let` 來定義變數。
|
||||
const isEven = (number) => {
|
||||
return number % 2 === 0;
|
||||
};
|
||||
|
||||
isEven(7); // 回傳 false 值
|
||||
|
||||
// 「等效」於以下傳統函式的宣告方式：
|
||||
function isEven(number) {
|
||||
return number % 2 === 0;
|
||||
};
|
||||
|
||||
// 前面特別強調「等效」一詞，是因為使用 lambda 語法定義的函式不能在定義之前被呼叫。
|
||||
// 以下爲錯誤示範：
|
||||
add(1, 8);
|
||||
|
||||
const add = (firstNumber, secondNumber) => {
|
||||
return firstNumber + secondNumber;
|
||||
};
|
||||
```
|
||||
|
||||
## 延伸閱讀
|
||||
|
||||
[Mozilla 開發者網路（Mozilla Developer Network）][1] 為 JavaScript 詳細的文件，主要針對瀏覽器環境。此外，它是一個維基百科，當你學到更多時，你可以透過分享自己的知識來幫助他人。
|
||||
|
||||
MDN 的 [重新介紹 JavaScript][2] 一文中，提到關於本文之外的更多細節。本文聚焦於 JavaScript 語言本身；若您想學習更多關於如何在網頁中使用 JavaScript，可以從閱讀 [文件物件模型][3] 開始。
|
||||
|
||||
[Learn Javascript by Example and with Challenges][4] 是另一個參考網站，其包含線上的實戰練習。
|
||||
|
||||
[JavaScript Garden][5] 是一份深入探討這門語言所有反直覺部分的指南。
|
||||
|
||||
[JavaScript 大全][6] 是一本經典的指南和參考書。
|
||||
|
||||
[精通 Javascript][8] 由 Marijn Haverbeke 所著，是一本優秀的 JS 書籍/電子書，附帶終端機指令
|
||||
|
||||
[Javascript: The Right Way][10] 是一本指南，旨在向新入門的開發者介紹 JavaScript，並幫助有經驗的開發者學習更多關於其最佳實踐的知識。
|
||||
|
||||
[現代 JavaScript 教學][11] 為現代的 JavaScript 教學網站，涵蓋了基礎知識（核心語言和瀏覽器操作）以及進階主題，並提供簡明扼要的解釋。
|
||||
|
||||
除了本文的直接貢獻者外，部分內容改編自本站 Louie Dinh 的 Python 教學，以及 MDN 的 [重新介紹 JavaScript][2]。
|
||||
|
||||
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript
|
||||
[2]: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Language_overview
|
||||
[3]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model
|
||||
[4]: http://www.learneroo.com/modules/64/nodes/350
|
||||
[5]: https://shamansir.github.io/JavaScript-Garden/zhtw/
|
||||
[6]: https://www.tenlong.com.tw/products/9789865027322
|
||||
[8]: https://www.tenlong.com.tw/products/9789865029890?list_name=srh
|
||||
[10]: http://jstherightway.org/
|
||||
[11]: https://javascriptinfo.dev.org.tw
|
||||
286
zh-tw/typescript-tw.html.markdown
Normal file
286
zh-tw/typescript-tw.html.markdown
Normal file
@ -0,0 +1,286 @@
|
||||
---
|
||||
language: TypeScript
|
||||
contributors:
|
||||
- ["Philippe Vlérick", "https://github.com/pvlerick"]
|
||||
- ["Kiwimoe", "https://github.com/kiwimoe"]
|
||||
translators:
|
||||
- ["Woody Chang", "https://github.com/kazettique"]
|
||||
filename: learntypescript-zh-tw.ts
|
||||
lang: zh-tw
|
||||
---
|
||||
|
||||
TypeScript 是為開發大型 JavaScript 應用程式而設計的語言。它為 JavaScript 導入某些程式語言常見的一些概念，諸如：類別（class）、模組（module）、介面（interface）、泛型（generic type）和靜態型別（static type）。TypeScript 是 JavaScript 的「超集」（superset）：意即建立在 JavaScript 的基礎上，所有 JavaScript 語法皆可在 TypeScript 中使用。因此，TypeScript 可以無縫導入到任何 JavaScript 專案中。TypeScript 編譯器最終會編譯成 JavaScript 程式碼。
|
||||
|
||||
本文將只專注於 TypeScript 的額外語法，其他請參考 [JavaScript 的指南](/docs/javascript-tw)
|
||||
|
||||
要測試 TypeScript 的編譯器，請前往 [Playground](https://www.typescriptlang.org/play)，在那裡你可以輸入程式碼，獲得自動完成（autocomplete）功能，並查看編譯過的 JavaScript 程式碼。
|
||||
|
||||
```ts
|
||||
// TS 基本型別有三種
|
||||
let isDone: boolean = false;
|
||||
let lines: number = 42;
|
||||
let name: string = "Anders";
|
||||
|
||||
// 當變數有賦值時，也可以省略型別定義
|
||||
let isDone = false;
|
||||
let lines = 42;
|
||||
let name = "Anders";
|
||||
|
||||
// 若無法確定型別，則可以定義為 `any`
|
||||
let notSure: any = 4;
|
||||
notSure = "maybe a string instead";
|
||||
notSure = false; // 布林值也屬於 `any` 型別
|
||||
|
||||
// 以 `const` 關鍵字定義常數
|
||||
const numLivesForCat = 9;
|
||||
numLivesForCat = 1; // 報錯，常數初始化之後，無法指定新值
|
||||
|
||||
// 關於集合類型的資料，有型別化陣列（typed array）和泛型陣列（generic array）
|
||||
let list: number[] = [1, 2, 3];
|
||||
// 或使用泛型陣列類型
|
||||
let list: Array<number> = [1, 2, 3];
|
||||
|
||||
// 列舉型別：
|
||||
enum Color { Red, Green, Blue };
|
||||
let c: Color = Color.Green;
|
||||
console.log(Color[c]); // "Green"
|
||||
|
||||
// `void` 用於函式不回傳任何值的特殊情況
|
||||
function bigHorribleAlert(): void {
|
||||
alert("I'm a little annoying box!");
|
||||
}
|
||||
|
||||
// 函式是一等公民，支援 lambda「胖箭頭」 `=>` 語法，並使用型別推斷
|
||||
|
||||
// 以下幾種函式寫法是等效的，編譯器會生成相同的 JavaScript 程式碼
|
||||
// 一般的函式
|
||||
let f1 = function (i: number): number { return i * i; }
|
||||
// 自動推斷回傳型別
|
||||
let f2 = function (i: number) { return i * i; }
|
||||
// 使用胖箭頭語法
|
||||
let f3 = (i: number): number => { return i * i; }
|
||||
// 胖箭頭語法（自動推斷回傳型別）
|
||||
let f4 = (i: number) => { return i * i; }
|
||||
// 胖箭頭語法（自動推斷回傳型別、省略函式的括號與 `return` 關鍵字）
|
||||
let f5 = (i: number) => i * i;
|
||||
|
||||
// 函式的參數也可以同時定義多種型別的連集
|
||||
function f6(i: string | number): void {
|
||||
console.log("The value was " + i);
|
||||
}
|
||||
|
||||
// 介面是結構化的，任何擁有這些屬性的物件都要符合該介面的定義
|
||||
interface Person {
|
||||
name: string;
|
||||
// 以問號（`?`）來表示選填的屬性
|
||||
age?: number;
|
||||
// 當然也可以包含函式
|
||||
move(): void;
|
||||
}
|
||||
|
||||
// 實作 `Person` 介面的物件
|
||||
// 可被視為一個 `Person` 物件，因為它具有 `name` 和 `move` 屬性
|
||||
let p: Person = { name: "Bobby", move: () => { } };
|
||||
// 包含選填屬性的物件：
|
||||
let validPerson: Person = { name: "Bobby", age: 42, move: () => { } };
|
||||
// 此物件非 `Person` 物件，因為 `age` 屬性非數字
|
||||
let invalidPerson: Person = { name: "Bobby", age: true };
|
||||
|
||||
// 介面也可以描述一個函式的型別
|
||||
interface SearchFunc {
|
||||
(source: string, subString: string): boolean;
|
||||
}
|
||||
// 函式的型別定義著重於各個參數以及回傳值的型別，而函式名稱並不重要
|
||||
let mySearch: SearchFunc;
|
||||
mySearch = function (src: string, sub: string) {
|
||||
return src.search(sub) != -1;
|
||||
}
|
||||
|
||||
// 類別的屬性，其存取權限預設為公開（public）
|
||||
class Point {
|
||||
// 定義屬性
|
||||
x: number;
|
||||
|
||||
// 在建構函式種使用 `public`、`private` 關鍵字，會實例化的時候自動生成屬性
|
||||
// 以此為例，`y` 如同 `x` 定義其屬性，並於實例化時賦值，但寫法更為簡潔，同時支援預設值
|
||||
constructor(x: number, public y: number = 0) {
|
||||
this.x = x;
|
||||
}
|
||||
|
||||
// 函式，在類別中，又稱為方法（method）
|
||||
dist(): number {
|
||||
return Math.sqrt(this.x * this.x + this.y * this.y);
|
||||
}
|
||||
|
||||
// 靜態成員（static member）
|
||||
static origin = new Point(0, 0);
|
||||
}
|
||||
|
||||
// 類別可以被明確標記為實作某個介面。
|
||||
// 任何缺少的屬性或方法都會在編譯時引發錯誤。
|
||||
class PointPerson implements Person {
|
||||
name: string
|
||||
move() {}
|
||||
}
|
||||
|
||||
let p1 = new Point(10, 20);
|
||||
let p2 = new Point(25); // y 值將預設為 0
|
||||
|
||||
// 類別的繼承
|
||||
class Point3D extends Point {
|
||||
constructor(x: number, y: number, public z: number = 0) {
|
||||
super(x, y); // 必須明確呼叫父類別的建構函式，使用 `super` 關鍵字
|
||||
}
|
||||
|
||||
// 複寫父類別的方法
|
||||
dist(): number {
|
||||
let d = super.dist();
|
||||
return Math.sqrt(d * d + this.z * this.z);
|
||||
}
|
||||
}
|
||||
|
||||
// 模組，以 `.` 語法存取子模組
|
||||
module Geometry {
|
||||
export class Square {
|
||||
constructor(public sideLength: number = 0) {
|
||||
}
|
||||
area() {
|
||||
return Math.pow(this.sideLength, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let s1 = new Geometry.Square(5);
|
||||
|
||||
// 引用模組，可以在本地使用別名命名並使用之
|
||||
import G = Geometry;
|
||||
|
||||
let s2 = new G.Square(10);
|
||||
|
||||
// 泛用型別，泛型（generic type）
|
||||
// 在類別使用泛型
|
||||
class Tuple<T1, T2> {
|
||||
constructor(public item1: T1, public item2: T2) {
|
||||
}
|
||||
}
|
||||
|
||||
// 在介面使用泛型
|
||||
interface Pair<T> {
|
||||
item1: T;
|
||||
item2: T;
|
||||
}
|
||||
|
||||
// 在函式使用泛型
|
||||
let pairToTuple = function <T>(p: Pair<T>) {
|
||||
return new Tuple(p.item1, p.item2);
|
||||
};
|
||||
|
||||
let tuple = pairToTuple({ item1: "hello", item2: "world" });
|
||||
|
||||
// 引用型別定義檔：
|
||||
/// <reference path="jquery.d.ts" />
|
||||
|
||||
// 樣板字串（template string）（使用反引號「`」的字串）
|
||||
// 以樣板字串進行字串內插（interpolation）
|
||||
let name = 'Tyrone';
|
||||
let greeting = `Hi ${name}, how are you?`
|
||||
// 多行的樣板字串
|
||||
let multiline = `This is an example
|
||||
of a multiline string`;
|
||||
|
||||
// 唯讀存取子：TypeScript 3.1 的新語法
|
||||
interface Person {
|
||||
readonly name: string;
|
||||
readonly age: number;
|
||||
}
|
||||
|
||||
var p1: Person = { name: "Tyrone", age: 42 };
|
||||
p1.age = 25; // 錯誤，`p1.age` 為唯讀屬性
|
||||
|
||||
var p2 = { name: "John", age: 60 };
|
||||
var p3: Person = p2; // 正確，`p2` 的唯讀別名
|
||||
p3.age = 35; // 錯誤，`p3.age` 為唯讀屬性
|
||||
p2.age = 45; // 正確，但因為 `p3` 參照可 `p2`，因此 `p3.age` 將會被修改
|
||||
|
||||
class Car {
|
||||
readonly make: string;
|
||||
readonly model: string;
|
||||
readonly year = 2018;
|
||||
|
||||
constructor() {
|
||||
this.make = "Unknown Make"; // 唯讀屬性在建構函式被允許賦值
|
||||
this.model = "Unknown Model"; // 唯讀屬性在建構函式被允許賦值
|
||||
}
|
||||
}
|
||||
|
||||
let numbers: Array<number> = [0, 1, 2, 3, 4];
|
||||
let moreNumbers: ReadonlyArray<number> = numbers;
|
||||
moreNumbers[5] = 5; // 錯誤，陣列的成員為唯讀
|
||||
moreNumbers.push(5); // 錯誤，無 `push` 方法（因為 `push` 方法會改變陣列的值）
|
||||
moreNumbers.length = 3; // 錯誤，`length` 為唯讀
|
||||
numbers = moreNumbers; // 錯誤，修改陣列的方法並不存在於唯讀陣列
|
||||
|
||||
// 可以使用聯合型別（union type）來定義不同的資料型別
|
||||
type State =
|
||||
| { type: "loading" }
|
||||
| { type: "success", value: number }
|
||||
| { type: "error", message: string };
|
||||
|
||||
declare const state: State;
|
||||
if (state.type === "success") {
|
||||
console.log(state.value);
|
||||
} else if (state.type === "error") {
|
||||
console.error(state.message);
|
||||
}
|
||||
|
||||
// 樣板實字（template literal）型別
|
||||
// 可以用來建立複雜的字串型別
|
||||
type OrderSize = "regular" | "large";
|
||||
type OrderItem = "Espresso" | "Cappuccino";
|
||||
type Order = `A ${OrderSize} ${OrderItem}`;
|
||||
|
||||
let order1: Order = "A regular Cappuccino";
|
||||
let order2: Order = "A large Espresso";
|
||||
let order3: Order = "A small Espresso"; // 錯誤
|
||||
|
||||
// 迭代器（iterator）與產生器（generator）
|
||||
|
||||
// for..of 陳述式
|
||||
// 循覽物件的每個成員「值」（value）
|
||||
let arrayOfAnyType = [1, "string", false];
|
||||
for (const val of arrayOfAnyType) {
|
||||
console.log(val); // 1, "string", false
|
||||
}
|
||||
|
||||
let list = [4, 5, 6];
|
||||
for (const i of list) {
|
||||
console.log(i); // 4, 5, 6
|
||||
}
|
||||
|
||||
// for..in 陳述式
|
||||
// 循覽物件的每個成員的「鍵」（key）
|
||||
for (const i in list) {
|
||||
console.log(i); // 0, 1, 2
|
||||
}
|
||||
|
||||
// 型別斷言（assertion）
|
||||
let foo = {} // 建立一個名為 `foo` 的空物件
|
||||
foo.bar = 123 // 錯誤，`bar` 屬性並不存在於 `{}`
|
||||
foo.baz = 'hello world' // 錯誤：`baz` 屬性並不存在於 `{}`
|
||||
|
||||
// 因為 `foo` 的推斷型別是 `{}`（一個無任何屬性的物件），所以不允許新增 `bar`、`baz` 及其他任何名稱的屬性。然而，通過型別斷言，以下程式碼將能夠通過 TS 的檢查：
|
||||
interface Foo {
|
||||
bar: number;
|
||||
baz: string;
|
||||
}
|
||||
|
||||
let foo = {} as Foo; // 這裡使用型別斷言
|
||||
foo.bar = 123;
|
||||
foo.baz = 'hello world'
|
||||
```
|
||||
|
||||
## 延伸閱讀
|
||||
|
||||
* [TypeScript官網](https://www.typescriptlang.org/)
|
||||
* [TypeScript原始碼](https://github.com/microsoft/TypeScript)
|
||||
* [Learn TypeScript](https://learntypescript.dev/)
|
||||
Loading…
Reference in New Issue
Block a user