小狐狸事務所: TensorFlow.js 學習筆記 (二) : Javascript ES6 的新語法 (中)

由於篇幅太長了, 將 ES6 新語法測試拆分成三部分, 這是第二部分.

本系列之前的文章參考 :

# Tensorflow.js 學習筆記 (一) : Javascript ES6 的新語法 (上)

參考書籍 :

# Javascript 函數活用範例速查辭典 (博碩 2015, 山田祥寬)

# Javascript Tensorflow.js 人工智慧教本 (碁峰 2020, 陳會安)

4. 解構指定 (destructing assignment) :

所謂解構指定就是指定敘述可以一次對多個變數賦值, Python 就有這個方便語法, 又稱為多重指定 (multiple assignment), 例如 :

a, b, c=1, True, "Hello"

這敘述可以同時將 1 指派給 a, True 指派給 b, "Hello" 指派給 c. 有了這語法, 在 Python 要將兩個變數交換就很簡單, 不需要透過一個中間變數暫存, 只要一條敘述就解決 :

x, y=y, x

Javascript 在 ES6 也添加了這項功能, 其語法為 :

let [x1. x2. x3, ...]=[a1, a2, a3, ...]

等號兩邊個數不一定要相同, 若左邊比右邊少, 則右邊多出來的會被丟棄 (不會有語法錯誤); 反之, 若左邊的比右邊多, 則左邊多出來的變數其值為 undefined. 若要避免出現 undefined, 可在左邊的變數設定預設值, 例如 :

let [x, y=0, z='a']=[1, 2] //x=1, y=2, z='a'

也可以用逗號將對應的變數跳過去不承接, 例如 :

let [x, , z]=[1, 2, 3] //x=1, z= 3, 其中 2 無變數承接

如果兩變數要交換, 語法如下 :

[x, y]=[y, x]

例如 :

測試 4-1 : 變數的解構指定 [看原始碼]

<!doctype html>

<html>

<head>

</head>

<body>

let [a, b, c, d]=[1, 2, 3, 4];

document.write("[a, b, c, d]=[1, 2, 3, 4]" + "<br>");

document.write("a=" + a + "<br>"); //a=1

document.write("b=" + b + "<br>"); //b=2

document.write("c=" + c + "<br>"); //c=3

document.write("d=" + d + "<br>"); //d=4

[a, b, c, d]=[d, c, b, a];

document.write("[a, b, c, d]=[d, c, d, a]" + "<br>");

document.write("a=" + a + "<br>"); //a=4

document.write("b=" + b + "<br>"); //b=3

document.write("c=" + c + "<br>"); //c=2

document.write("d=" + d + "<br>"); //d=1

[a, b=0, c='a', d]=[1, 2]; //設定預設值

document.write("[a, b=0, c='a', d]=[1, 2]" + "<br>");

document.write("a=" + a + "<br>"); //a=1

document.write("b=" + b + "<br>"); //b=2 (有指定, 不使用預設值)

document.write("c=" + c + "<br>"); //c='a' (無指定, 使用預設值)

document.write("d=" + d + "<br>"); //d=undefined (沒有預設值, 多出來的變數)

</script>

</body>

</html>

結果如下 :

[a, b, c, d]=[1, 2, 3, 4]
a=1
b=2
c=3
d=4
[a, b, c, d]=[d, c, d, a]
a=4
b=3
c=2
d=1
[a, b=0, c='a', d]=[1, 2]
a=1
b=2
c=a
d=undefined

解構指定也可以用在字串, 將字串解構指定給多個變數時, 字串將以字元為單位拆解依序指定給左方的多個變數, 例如 :

測試 4-2 : 字串的解構指定 [看原始碼]

<!doctype html>

<html>

<head>

</head>

<body>

let [a, b, c, d, e, f, g]="Hello World";

document.write("[a, b, c, d, e, f, g]='Hello World'" + "<br>");

document.write("a=" + a + "<br>");

document.write("b=" + b + "<br>");

document.write("c=" + c + "<br>");

document.write("d=" + d + "<br>");

document.write("e=" + e + "<br>");

document.write("f=" + f + "<br>");

document.write("g=" + g + "<br>");

[a, , c, , e, , g]="Hello World";

document.write("[a, , c, , e, , g]='Hello World'" + "<br>");

document.write("a=" + a + "<br>");

document.write("c=" + c + "<br>");

document.write("e=" + e + "<br>");

document.write("g=" + g + "<br>");

</script>

</body>

</html>

此例中第二次解構指定跳過了 b, d, f 變數不予承接, 結果如下 :

[a, b, c, d, e, f, g]='Hello World'
a=H
b=e
c=l
d=l
e=o
f=
g=W
[a, , c, , e, , g]='Hello World'
a=H
c=l
e=o
g=W

5. 樣板字串內插 :

Python 有很好用的字串內插功能, 可在字串中嵌入變數或運算式達到動態更改字串局部內容的功能. ES6 也支援這種功能, 這種字串外面不是用單引號或雙引號括起來, 而是使用反引號 (即 Tab 鍵上方那個按鍵), 變數或運算式使用 ${variable|expression} 方式嵌入字串中, 例如 :

let msg=`Hello ${name} !`

這種字串又稱為樣版字面值 (template literals) 或樣版字串 (template string).

例如 :

測試 5-1 : 將變數或運算式嵌入樣版字串中 [看原始碼]

<!doctype html>

<html>

<head>

</head>

<body>

let name="Tony";

let msg=`Hello ${name} !` //嵌入變數

document.write(msg + "<br>");

let [a, b, c, d]=[1, 2, 3, 4];

msg=`Math.max(1, 2, 3, 4)=${Math.max(a, b, c, d)}`; //嵌入運算式

document.write(msg + "<br>");

</script>

</body>

</html>

結果如下 :

Hello Tony !
Math.max(1, 2, 3, 4)=4

6. 展開運算子 :

ES6 新增了三個連續點號 ... 的運算子稱為展開運算子 (spread operator), 它可用在陣列或字串上, 其用途如下 :

展開陣列元素
複製, 串接, 合併陣列
將字串之字元展開變成陣列
展開陣列元素後傳入函式做為位置參數

例如 :

測試 6-1 : 在陣列或字串上使用展開運算子 (輸出至網頁) [看原始碼]

<!doctype html>

<html>

<head>

</head>

<body>

let arr1=[1, 2, 3, 4, 5];

document.write(arr1 + "<br>"); //直接輸出陣列內容

document.write(...arr1 + "<br>"); //輸出展開後的陣列內容

let arr2=[...arr1]; //複製陣列 arr1 為 arr2=arr1.concat()

document.write(...arr2 + "<br>");

let arr3=[11, 12, ...arr1, 13, 14]; //展開後插入到其他陣列中

document.write(...arr3 + "<br>");

let arr4=[...arr1, ...arr2]; //串接兩個陣列=arr1.concat(arr2)

document.write(...arr4 + "<br>");

let arr5=[[1, 2, 3], [4, 5, 6]]; //二維陣列

let arr6=[...arr5]; //複製二維陣列

document.write(arr6 + "<br>");

document.write(...arr6 + "<br>"); //展開二維陣列

let str="你在說哈囉嗎?";

let arr7=[...str]; //展開字串中的每一字元

document.write(...arr7 + "<br>");

</script>

</body>

</html>

此例演示了展開運算子在陣列與字串上的操作, 高維陣列一樣可展開, 結果如下 :

1,2,3,4,5
1,2,3,4,5
1,2,3,4,5
11,12,1,2,3,4,5,13,14
1,2,3,4,5,1,2,3,4,5
你,在,說,哈,囉,嗎,?

輸出在網頁上結果看起來似乎有展開跟沒展開一樣, 輸出到控制台就可看出差異, 例如 :

測試 6-2 : 在陣列或字串上使用展開運算子 (輸出至控制台) [看原始碼]

<!doctype html>

<html>

<head>

</head>

<body>

let arr1=[1, 2, 3, 4, 5];

console.log(arr1);

document.write(...arr1 + "<br>");

let arr2=[...arr1];

console.log(...arr2);

let arr3=[11, 12, ...arr1, 13, 14];

console.log(...arr3);

let arr4=[...arr1, ...arr2];

console.log(...arr4);

let arr5=[[1, 2, 3], [4, 5, 6]];

let arr6=[...arr5];

console.log(arr6);

console.log(...arr6);

let str="你在說哈囉嗎?";

let arr7=[...str];

console.log(...arr7);

</script>

</body>

</html>

此例與上例差別僅在於輸出到控制台 (console) 而已, 結果如下 :

可見二維陣列直接輸出與展開後再輸出是不一樣的, 點前面的箭頭可顯示其差異 :

展開運算子也可以用來將陣列元素展開後傳入函式做為位置參數, 例如 :

測試 6-3 : 展開陣列元素後當作參數傳給函式 [看原始碼]

<!doctype html>

<html>

<head>

</head>

<body>

function get_sum(a, b, c) {

return a + b + c;

}

let arr=[1, 2, 3];

let sum=get_sum(...arr); //將陣列元素展開後傳入函式中

document.write("sum=" + sum + "<br>");

</script>

</body>

</html>

結果如下 :

sum=6

小狐狸事務所

2021年8月28日星期六

TensorFlow.js 學習筆記 (二) : Javascript ES6 的新語法 (中)

沒有留言:

張貼留言

2021年8月28日 星期六

TensorFlow.js 學習筆記 (二) : Javascript ES6 的新語法 (中)

沒有留言:

張貼留言

2021年8月28日星期六