JS中的箭頭函式-有解無憂

在JavaScript中，箭頭函式是一種簡化的函式語法，它在ES6（ECMAScript 2015）引入，箭頭函式的語法比傳統的function運算式更簡潔，同時還有一些特性，例如繼承外部作用域的this值，

箭頭函式的基本語法如下：

(param1, param2, ..., paramN) => { statements }
(param1, param2, ..., paramN) => expression

當箭頭函式只有一個引數時，可以省略括號：

param => { statements }
param => expression

當函式體只包含一個回傳值運算式時，可以省略花括號并直接回傳該運算式的值：

(param1, param2) => param1 + param2

需要注意的是，箭頭函式有以下特性：

1. 沒有自己的this值 ：箭頭函式內的this值繼承自包含它的函式作用域，這有助于解決一些this指向問題，
2. 沒有arguments對象：在箭頭函式內部，無法訪問傳統函式中的arguments物件，但你可以使用剩余引數（...rest）語法來獲取引數串列，
3. 不能用作建構式 ：箭頭函式不能用作建構式，因此不能使用new運算子實體化，
4. 沒有原型 ：箭頭函式沒有prototype屬性，因為它們不能作為建構式使用，

更多箭頭函式的用法

1. 鏈式呼叫：

箭頭函式的簡潔語法使得在鏈式呼叫中使用它們變得更加容易，例如，我們可以在陣列上使用多個陣列方法并將箭頭函式作為回呼函式：

const numbers = [1, 2, 3, 4, 5];

const doubledAndFiltered = numbers
  .map(num => num   2)
  .filter(num => num > 5);

console.log(doubledAndFiltered); // [6, 8, 10]

2. 事件處理程式：

箭頭函式可以方便地用作事件處理程式，因為它們繼承了外部作用域的 this 值，這樣就避免了使用 bind 來系結事件處理程式的需要，例如：

class Button {
  constructor() {
    this.buttonElement = document.createElement('button');
    this.buttonElement.textContent = 'Click me!';
    this.buttonElement.addEventListener('click', () => this.handleClick());
    document.body.appendChild(this.buttonElement);
  }

  handleClick() {
    console.log('Button clicked!');
  }
}

const button = new Button();

3. 在陣列方法中使用：

常見的陣列方法，如 filter 、 reduce 、 forEach 等，也可以與箭頭函式一起使用，以簡化代碼并使其更具可讀性：

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4]

const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // 15

numbers.forEach((num, index) => console.log( Index ${index}: ${num} ));

4. 立即呼叫的箭頭函式：

箭頭函式還可以作為立即呼叫函式運算式（IIFE）使用，這在某些場景下有助于限制變數的作用域：

const result = (() => {
  const localVar = 'I am only available within this IIFE';
  return localVar.toUpperCase();
})();

console.log(result); // 'I AM ONLY AVAILABLE WITHIN THIS IIFE'

5. 物件字面量和箭頭函式：

在箭頭函式中直接回傳物件字面量時，需要注意語法，由于大括號 {} 在箭頭函式中被解釋為代碼塊，而不是物件字面量，因此需要在物件字面量周圍添加額外的括號：

const getObject = () => ({ key: 'value' });

console.log(getObject()); // { key: 'value' }

6. 多行箭頭函式：

雖然箭頭函式通常用于簡潔的單行函式，但它們也可以用于多行函式，在這種情況下，需要使用大括號包裹函式體，并在需要回傳值時使用 return 關鍵字：

const addWithLogging = (a, b) => {
  console.log( Adding ${a} and ${b} );
  return a + b;
};

console.log(addWithLogging(3, 4)); // 輸出 "Adding 3 and 4"，然后輸出 7

7. 箭頭函式與解構引數：

箭頭函式可以與解構引數一起使用，可以更簡潔地處理物件或陣列，以下是一些示例：

// 物件解構
const users = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Charlie', age: 35 },
];

const getUserNames = users.map(({ name }) => name);
console.log(getUserNames); // 輸出：['Alice', 'Bob', 'Charlie']

// 陣列解構
const points = [
  [1, 2],
  [3, 4],
  [5, 6],
];

const getDistancesFromOrigin = points.map(([x, y]) => Math.sqrt(x   x + y   y));
console.log(getDistancesFromOrigin); // 輸出：[2.23606797749979, 5, 7.810249675906654]

8. 箭頭函式和 this ：

由于箭頭函式在其詞法作用域內捕獲 this 值，因此在某些情況下可能導致問題，例如，在物件方法中使用箭頭函式時，它不會獲取到物件的 this ，而是捕獲到外部作用域的 this ，為了解決這個問題，需要使用傳統的 function 宣告或運算式，

const obj = {
  value: 10,
  getValue: function() {
    // 正常的function運算式， this  指向obj
    return this.value;
  },
  getValueWithArrow: () => {
    // 箭頭函式， this  指向外部作用域（在這種情況下是全域物件或undefined）
    return this.value;
  },
};

console.log(obj.getValue()); // 輸出：10
console.log(obj.getValueWithArrow()); // 輸出：undefined（嚴格模式）或全域物件的value屬性

9. 箭頭函式作為高階函式的引數：

在處理高階函式時，箭頭函式非常有用，因為它們可以使代碼更簡潔，高階函式是接受一個或多個函式作為引數、回傳一個函式的函式，這里有一個使用箭頭函式的高階函式示例：

const add = a => b => a + b;

const add5 = add(5);
console.log(add5(3)); // 輸出：8

在上面的示例中， add 函式接受一個引數 a 并回傳一個新的函式，該函式接受另一個引數 b 并回傳 a + b 的結果，

10. 不要在所有場景中都使用箭頭函式：

盡管箭頭函式有很多優點，但并非所有場景都適用，以下是一些避免使用箭頭函式的情況：

- 在需要動態背景關系的函式（如事件處理程式）中，箭頭函式繼承了它們的詞法作用域，在這種情況下，可能需要使用 function 宣告或運算式，以便根據需要訪問當前背景關系，
- 當需要使用 arguments 物件時，箭頭函式不會創建它，在這種情況下，需要使用傳統的 function 宣告或運算式，

總之，箭頭函式的簡潔語法和特性使得它們在許多情況下都非常有用，還可以用在setTimeout、錯誤處理、Promise中等等，但是，在遇到 this 、 arguments 或其他相關問題時，有時可能需要使用傳統的 function 宣告或運算式來解決特定問題，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552249.html

標籤：JavaScript

上一篇：我做了一個 VSCode 插件版的 ChatGPT

下一篇：返回列表