ES6面試題詳解

一、箭頭函數

箭頭函數是ES6中新增的語法，是一種更為簡潔的函數寫法，適用於匿名函數的定義，也可以代替一些回調函數的使用。箭頭函數不能夠被用作構造函數，也不能夠使用arguments對象。

箭頭函數的語法如下：

const add = (a, b) => {
  return a + b;
};

箭頭函數也可以像下面這樣省略花括弧和return：

const add = (a, b) => a + b;

箭頭函數沒有自己的this，它的this只會指向定義時所在的對象，而不是執行時所在的對象。這使得箭頭函數非常適用於嵌套函數中，避免this指向出現問題。

下面的代碼演示了箭頭函數的使用：

const obj = {
  name: 'Alice',
  age: 20,
  sayHello: function() {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
    }, 1000);
  }
};

obj.sayHello(); // 輸出：Hello, my name is Alice, I'm 20 years old.

二、const和let

const和let是ES6中新增的兩個關鍵字，用來聲明變數。其中const用於聲明常量，一旦值被賦予，就不能夠再次修改。而let用於聲明可變的變數，它類似於var，但有一個重要的區別：let聲明的變數只在定義所在的塊級作用域內有效，而var聲明的變數則是函數作用域的。

下面的代碼演示了const和let的使用：

const name = 'Alice';
name = 'Bob'; // 報錯：Assignment to constant variable.

function testVar() {
  var i = 0;
  if (true) {
    var i = 1;
  }
  console.log(i); // 輸出：1
}

function testLet() {
  let i = 0;
  if (true) {
    let i = 1;
  }
  console.log(i); // 輸出：0
}

三、解構賦值

解構賦值是ES6中新增的一種語法，可以從數組或對象中提取值，然後賦給變數，更方便地進行數據操作。解構賦值可以用於數組、對象、函數參數等多個方面。

下面的代碼演示了解構賦值的使用：

// 數組解構賦值
const arr = [1, 2];
const [x, y] = arr;
console.log(x, y); // 輸出：1 2

// 對象解構賦值
const obj = {
  name: 'Alice',
  age: 20
};
const { name, age } = obj;
console.log(name, age); // 輸出：Alice 20

// 函數參數解構賦值
function test({ name, age }) {
  console.log(name, age); // 輸出：Alice 20
}
test(obj);

四、模板字元串

模板字元串是ES6中新增的一種語法，用來更方便地處理字元串。模板字元串使用反引號（`）包圍，可以在其中使用${}來引用變數或表達式。模板字元串還支持多行字元串的書寫。

下面的代碼演示了模板字元串的使用：

const name = 'Alice';
const age = 20;

console.log(`My name is ${name}, I'm ${age} years old.`);

const text = `This is a
multi-line
string.`;
console.log(text);

五、默認參數值和剩餘參數

ES6新增了函數的默認參數值和剩餘參數特性，使得函數的編寫更加靈活。默認參數值可以為函數提供一個默認值，如果函數調用時不傳入參數，則使用默認的參數值。剩餘參數可以將函數傳入的所有參數合併成一個數組，方便進行操作。

下面的代碼演示了默認參數值和剩餘參數的使用：

// 默認參數值
function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}
greet(); // 輸出：Hello, World!
greet('Alice'); // 輸出：Hello, Alice!

// 剩餘參數
function sum(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}
console.log(sum(1, 2, 3)); // 輸出：6

六、展開運算符

展開運算符是ES6中的一個新特性，它可以將數組、對象、字元串等轉換為用逗號分隔的參數序列。展開運算符可以用於函數調用、數組的拼接、對象的合併等多個場景。

下面的代碼演示了展開運算符的使用：

// 數組展開
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // 輸出：[1, 2, 3, 4]

// 對象合併
const obj1 = { name: 'Alice' };
const obj2 = { age: 20 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // 輸出：{ name: 'Alice', age: 20 }

七、類和繼承

ES6引入了class和extends關鍵字，使得面向對象的編程更加簡潔和易用。class定義一個類，可以定義constructor、方法和靜態方法；extends用來繼承一個類，可以覆蓋父類的方法。

下面的代碼演示了類和繼承的使用：

// 定義一個類
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
  static sayHi() {
    console.log('Hi.');
  }
}

// 繼承一個類
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old, I'm in grade ${this.grade}.`);
  }
}

// 調用靜態方法
Person.sayHi();

// 創建一個對象
const person = new Person('Alice', 20);
person.sayHello();

// 創建一個繼承自Person的對象
const student = new Student('Bob', 18, 3);
student.sayHello();

八、Promise和async/await

ES6引入了Promise，是一種用於非同步編程的新模型，可以有效地避免回調地獄的問題。ES8又引入了async/await，是一種更為簡潔和易讀的非同步編程方法。

Promise的基本用法如下：

const promise = new Promise((resolve, reject) => {
  // 非同步代碼
  if (success) {
    resolve(result); // 成功狀態
  } else {
    reject(error); // 失敗狀態
  }
});

promise.then(result => {
  // 處理成功狀態
}).catch(error => {
  // 處理失敗狀態
});

async/await是Promise的語法糖，代碼更加簡潔和易讀：

async function getData() {
  try {
    const result = await fetch(url);
    // 處理結果
  } catch (error) {
    // 處理錯誤
  }
}