JavaScript 自學筆記28

1. 不適合使用箭頭函數arrow function的幾種情況

(1). 不適合在Event Handlers中使用

• 由於箭頭函數arrow function沒有屬於自己的this值，所以this引用的是全局對象。在瀏覽器範圍中，全局對象是window，而window并沒有value這個屬性。所以，如果使用this.value只能得到undefined值。

如：<input type="text" id="name" placeholder="Enter your name">

<div id="sayHi"></div>

let sayHi = document.querySelector('#sayHi');

let aName = document.querySelector('#name');

aName.addEventListener('keyup', () => { sayHi.textContent = 'Hi, ' + this.value }); // Hi, undefined

(2). 不適合在對象方法中使用

• 與 (1) 的情況相類似，不再贅述。

如：let cat = {

name: 'lulu',

greeting: () => 'Hi, ' + this.name;

};

console.log(cat.greeting()); // TypeError: Cannot read properties of undefined (reading 'name')

(3). 不適合在原型方法中使用

• 與 (1) 的情況相類似，不再贅述。

(4). 不適合在使用arguments對象的函數中使用

• 因爲箭頭函數中沒有arguments對象，所以不適用所有需要使用arguments對象的函數。

2. 剩餘參數 rest parameters

• ES6提供了一種新的參數，即剩餘參數。它以前綴三個點 ... 表示。剩餘參數以數組的形式表示不確定數量的參數。

(1). 語法：function fn (a, b, ...args) { //statements; }

• 注意：剩餘參數必須放在參數列的最後，否則會報錯。

如：function addNumbers(a, b, c) {

console.log(a + b + c);

};

let nums = [3, 4, 5];

addNumbers(...nums); // 12

又如：function addNumbers(a, ...b, c) {

console.log(a);

}; // SyntaxError

• 與fileter()搭配使用：

如：function keepNumbers(...nums){

return nums.filter(function (aNum) {

 return typeof aNum === 'number';

})};

const nums = keepNumbers(1, '2', 3);

console.log(nums); // [1, 3]

(2). 在箭頭函數中使用剩餘參數

如：const keepNumbers = (...nums) => {

return nums.filter(function (aNum) {

return typeof aNum === 'number';

})};

const nums = keepNumbers(1, '2', 3);

console.log(nums); // [1, 3]

(3). 在動態函數中使用剩餘函數

如：const display = new Function('...args', 'console.log(args)');

display(1, '2', 3); // [1, "2", 3]