組件實作 : Demo
關於 JavaScript 的故事其實是這樣的:「JavaScript 誕生於 1995 年的景網通訊(Netscape Communications),原本的 JavaSciprt 存在於 Netscape 的瀏覽器內運行,直到 2010 年左右 Chrome、Firefox、IE、Safari 開始崛起,Netscape 逐漸式微,瀏覽器這時進入了混亂時期,此時有一間名為 ECMA 的公司 ,這間公司跳出來制定一套瀏覽器標準,此標準被命名為 ECMAScript,相關標準的命名方式,例如 ES5 就是指 ECMAScript 5,而 ECMAScript 6 就會是指 ES6,因為 ES6 的誕生在 2015 年,所以,ES6 也被稱為 ES2015」。
關於 JavaScript 的歷史故事還挺有趣的,可以參考這篇【1】
往後的 ECMAScript 在 ES6 之後幾乎是每年更新一個版本,根據 Wiki 上的資訊顯示【2】,直到目前為止,最後的更新為 ECMAScript 2020(ES2022),第 13 版。這裡先介紹 ES6 的相關語法【3】。
你或許會有一個疑惑,明明 ECMAScript 更新到了 ES13,但是為什麼時常被拿出來討論的卻會是 ES6 呢?其實是因為 ES6 的更新對於 JavaScript 來說,是一種劃時代的大躍進,很多重要的語法,例如 let、const、Arrow Function 都是在這時候出現的,所以,ES6 是最常被拿出來討論版本,其重要性不言而喻。最後,這裡整理一個表格,可用來簡單了解 JS ES6 多了些什麼功能。那就往下看吧~
語法 | 說明 | 用途 |
---|---|---|
let | 變數 | 解決變數 var 的 提升問題。 |
const | 常數 | 使用在像是 ? =3.14 這類型固定常數。 |
Arrow Function | 箭頭函式 | 簡化 Function 的寫法。 |
For/of | 一種 Loop | 取得陣列或字串的各別內容。 |
Map object | 陣列(arrray) 的 map() 方法 | 遍歷陣列元素,元素傳入指定 Function,最後返回值組成新陣列。 |
Set object | 集合物件 | 在物件中存放值。 |
Classes | class 用法 | class 裡面會加入一個constructor()。 |
Promises | 非同步多執行緒 | 取代原生 JavaScript 的語法。 |
Symbol | 獨一無二的值 | 效果類似 CSS 的!important,可用來取代某些變數。 |
Default Parameter Values | 允許 Function 自帶參數 | Function 可以添加預設的參數。例如,function fnParameter(x, y = 10, z = "55") {}: |
Parameter Rest | …args | 函式內參數個數不確定,可用「… 變數名稱」取代不定數量的參數。 |
String.includes() | 判別是否有相同單字 | 字串中有相同單字,則回傳 True,否則回傳 False。 |
String.startsWith() | 判別字首是否為相同單字 | 字首有相同單字,則回傳 True,否則回傳 False。 |
String.endsWith() | 判別字尾是否為相同單字 | 字尾有相同單字,則回傳 True,否則回傳 False。 |
Array.from() | 字串轉成陣列 | 轉陣列是以字元完單位。 |
Array keys() | 取得陣列的所有索引值 | 可以使用 For/of 個別印出索引值。 |
Array find() | 陣列中查找,找到時,返回內容 | 找到相同單字時,會回傳該陣列內容,find 找到第一個就會結束查找。 |
Array findIndex() | 陣列中查找,找到時,返回內容的索引值 | 功能與 Array find() 相似,只是回傳內容為陣列的索引值。 |
let
與var
最大的差別在於,let 不能夠重複的宣告變數,意思為相同變數名稱不能重複定義數值,否則編輯器會有錯誤訊息。
JavaScript:
let x = "Anthony Edward Stark";
let x = 0; //Error
顯示結果:(錯誤訊息)
Uncaught SyntaxError: Identifier 'x' has already been declared
at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-fa6765f9-ae82-248a-66a9-72f4a958487d:3
let
不能夠同時使用同一個變數當作宣告,否則會出現錯誤訊息。
const
可用來固定某變數的數值,也就是說,當變數的值被修改後,程式執行時就會有錯誤訊息,以下則使用PI = 3.141592653589793
來做測試。
JavaScript:
// const
const PI = 3.141592653589793;
PI = 3.14; // Error
console.log(PI);
顯示結果:(錯誤訊息)
Uncaught TypeError: Assignment to constant variable.
at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-0b2c7564-cef9-e139-277b-7b4539a431c6:3
可以很明顯的看到錯誤訊息「
TypeError: Assignment to constant variable.
」,當PI
的值被修改成3.14
後,程式會報錯。
箭頭函式也可說是懶人的救星,因為 function 字數太多,讓程式碼看起來太過冗長,也要打很多字,覺得很煩,於是用括號來取代 function 的箭頭函式就是要用來簡化程式碼,相關的用法如下。
原始寫法。
JavaScript:
var theArrow = function (a, b) {
return a * b;
};
console.log(theArrow(5, 6));
顯示結果:
30
最基本的箭頭函式可以用小括號
改寫,如下程式碼。
JavaScript:
let theArrow = (a, b) => a * b;
console.log(theArrow(5, 6));
顯示結果:
30
可以看到顯示結果都一樣。把 function 和 return 省略後,箭頭函式從原本的 4 行變成 2 行。再來介紹一個簡短寫法:假設現在只有使用一個變數a
,並且只有執行簡單的運算,例如 a = a + 10,現在能把小括號
也一起給省略,程式碼如下。
JavaScript:
var theArrow = a => a + 10;
console.log(theArrow(7));
顯示結果:
17
小括號能夠省略的時機,就是在函式裡的參數只有 1 個
的時候可以省略。另外,這裡變數用 var 只是因為方便,你也可以用 let 來替換。當我們知道 Arrow Function 的基本用法後,可能需要額外知道 this 在 Arrow Function 內的用法,這邊先不介紹 this,因為我有可能會誤導?直接附上參考資料。
參考資料:
可以直接針對陣列
或是字串
內部取出字元
來使用。
JavaScript:
// For/of Loop
let str = "The best language is JavaScript.";
let text = "";
for (let x of str) {
text += x + "-";
}
console.log(text);
顯示結果:
"T-h-e- -b-e-s-t- -l-a-n-g-u-a-g-e- -i-s- -J-a-v-a-S-c-r-i-p-t-.-"
Map 其實就是針對陣列內容各別做處理
。最後會回傳一個新的陣列。
特性:
Map
返回值可以讓Key
不重複 。map()
返回值會是一個新的陣列。Key 指的是指陣列中的
[“Key” : Value]
。
JavaScript:
//Map
const animal = new Map([
["cat", 1000],
["Dog", 1500],
["Bird", 500],
["cat", 1800],
["cat", 1000]
]);
console.log(animal.get("cat"));
for (let x of animal) {
console.log(x);
}
顯示結果:
1000
// [object Array] (2)
["cat",1000]
// [object Array] (2)
["Dog",1500]
// [object Array] (2)
["Bird",500]
其他參考:
JavaScript 的集合寫法,可以對集合做各種設定,例如 add()
、has()
、delete()
等等。
JavaScript:
//Set
let setText = new Set();
setText.add("cat");
setText.add("dog");
setText.add("bird");
console.log(setText);
顯示結果:
// [object Set] (3)
{"cat","dog","bird"}
其他參考:
JavaScript 的 class 語法的寫法,通常在 class 裡面會加入一個constructor()
的 Function。
JavaScript:
// Classes(類)
class Student {
constructor(name, age, id) {
this.name = name;
this.age = age;
this.id = id;
}
}
let student1 = new Student("Peter", 18, "N10001");
let student2 = new Student("Marry", 16, "N20001");
console.log(
student1.name + "'s age is " + student1.age + " ,id is " + student1.id
);
顯示結果:
"Peter's age is 18 ,id is N10001"
其他參考:
JavaScript 在處理資料時,採用的運作方式為單一執行緒(tread)
,也就是同步
,這裡的同步
是指一次只能做一件事情
,但是想要處理其它的程序,比方說想要讀取某個網站的資料,這時後使用同步的方式做處理效率太慢了,因此有了非同步
,也就是一次可以同時做好幾件事情
的方式來增加效率。而Promise
就是一種非同步方式,其實Promise
出現之前,JavaScript 本身已經有非同步的處理方式,但是語法結構設計不佳,因此才會有Promise
的用法出現,而下面的程式碼為Promise
呼叫 Random API 的 User 的範例。
HTML:
<h2>JavaScript Promise</h2>
<p id="demo"></p>
JavaScript:
// Promise
function fnDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
let thePromise = new Promise(function (theResolve, theReject) {
let req = new XMLHttpRequest();
req.open("GET", "https://random-data-api.com/api/v2/users");
req.onload = function () {
if (req.status == 200) {
theResolve(req.response);
} else {
theReject("File not Found");
}
};
req.send();
});
thePromise.then(
function (value) {
fnDisplayer(value);
},
function (error) {
fnDisplayer(error);
}
);
顯示結果:
其他參考:
Symbol 是 ES6 新增的資料型態,原本 JavaScript 的資料型態有六種(Boolean、Null、Undefined、Number、Object、String),而第 7 種 Symbol,可以理解成獨一無二的值
,其用法如下程式碼。
特色:
數據做運算、比較
。JavaScript:
// Symbol
const person = {
firstName: "Anya",
lastName: "Forger",
age: 5,
hairColor: "pink"
};
let lastname = Symbol("id");
person[lastname] = "Williams";
console.log(person.lastname); //undefined
console.log(person[lastname]); //Williams
顯示結果:
undefined
"Williams"
可以看到person.lastname
顯示為undefined
,這代表 Symbol 已經有了作用,Symbol 成功的替代person.lastname,
這也就代表,我們可以在不去變動原有程式的情況下,使用 Symbol 去設定一個名稱(也就是 id)和要賦予的值(也就是 "Williams"),然後就可以替換掉原來的 key 和 value ,此功能有點像是 CSS 的!important
強制替換的感覺。
其他參考:
可以直接在 function 中帶入參數值,舉例來說,可以在fnParameter
中帶入y = 10
和z = "55"
,以及x
帶入7
, 回傳出來的值會是三個數值相加,也就是"1755"
,程式碼如下。
JavaScript:
// Default Parameter Values
function fnParameter(x, y = 10, z = "55") {
// y、Z 為 function 自帶參數
return x + y + z;
}
console.log(fnParameter(7));
顯示結果:
"1755"
若 Function 有有多個參數需要被帶入,也就是沒有固定參數的個數,可以使用…args
這種寫法來取代多個參數。
// Function Rest Parameter
function fnParameterRest(...args) {
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
console.log(fnParameterRest(7, 8, 11, 25, 66));
顯示結果:
117
有三個方法可使用,分別為:
String.includes()
String.startsWith()
String.endsWith()
String.includes()
指的是一個字串中包含某個單字,若比對相同,回傳值則為true
,否則為false
。
JavaScript:
let theText = "Keep on going never give up.";
console.log(theText.includes("never")); //true
console.log(theText.includes("world")); //false
顯示結果:
true
false
接著是,兩個可以放在一起比較的東西。
String.startsWith()
指的是字串開頭為某個單字,若比對相同,回傳值則為true
,否則為false
。
String.endsWith()
指的是字串結尾為某個單字,若比對相同,回傳值則為true
,否則為false
。
JavaScript:
let theText = "Keep on going never give up.";
console.log(theText.startsWith("Keep")); //true
console.log(theText.startsWith("never")); //false
console.log(theText.endsWith("Keep")); //false
console.log(theText.endsWith(".")); //true
顯示結果:
true
false
false
true
其他參考:
Array 可以使用下列方法:
Array.from()
Array keys()
Array find()
Array findIndex()
Array.from()
是將字串轉成陣列的方法。注意它是將字串分割成字元來處理。
JavaScript:
const theArr = Array.from("Keep on going never give up.");
console.log(theArr);
顯示結果:
// [object Array] (28)
["K","e","e","p"," ","o","n"," ","g","o","i","n","g"," ","n","e","v","e","r"," ","g","i","v","e"," ","u","p","."]
Array keys()
是用來取出陣列元素索引值的方法。可留意空字串也算是一個索引。
JavaScript:
// Array keys()
const students = ["Tony", "Harry", "Snorlax", "Uta", ""];
const keys = students.keys();
for (let x of keys) {
console.log(x);
}
顯示結果:
0
1
2
3
4
Array find()
的用途找尋陣列中符合條件的值。找到一筆符合的值便會結束查詢,並且回傳查到的值。
JavaScript:
// Array find()
const numbers = [4, 9, 16, -5, 29];
let first = numbers.find(fnFind);
console.log("First number over 18 is " + first);
function fnFind(value, index, array) {
return value > 18;
}
顯示結果:
"First number over 18 is 29"
Array findIndex()
的用法跟Array find()
相似,差別在於findIndex()
取得值是索引值
,你可以與find()
直接比較,它們使用相同的判斷方式,也就是說,索引值 4 的值為 29。
JavaScript:
// Array findIndex()
const theNumber = [4, 9, 16, -5, 29];
let theFirst = theNumber.findIndex(fnFindIndex);
function fnFindIndex(value, index, array) {
return value > 18;
}
console.log("First number over 18 is " + theFirst);
顯示結果:
"First number over 18 is 4"
JavaScript ES6 有很多方法(語法糖)可使用,因為東西有點多,可能沒辦法全部的細節都梳理過一遍,對於這一點感到些許的小遺憾。不過,我在每個主要語法的底下,都有附上額外的參考資料,若是文章中有我寫的不夠清楚地方,可以直接參考資料來補足語法的相關概念。
本篇還有一些方法尚未介紹,像是數學相關的語法,以及重要的 Modules【4】【5】,找時間再補上吧...