詳解ES6 JavaScript

ES6 JavaScript是JavaScript的一個重要版本，在2015年發佈後，廣受歡迎。ES6為JavaScript帶來了許多新特性和功能，這篇文章將從多個方面闡述這些特性和功能。

一、箭頭函數

ES6 JavaScript引入了箭頭函數，箭頭函數簡化了函數的寫法。以前寫代碼時，常使用匿名函數把一個函數傳遞給另一個函數，現在使用箭頭函數可以更清晰地表達意圖。

//ES5
var add = function(a, b) {
  return a + b;
};
console.log(add(2,3)); // 5

//ES6
const add = (a, b) => {
  return a + b;
};
console.log(add(2,3)); // 5

箭頭函數不需要使用function關鍵字定義，而是使用=>定義。如果函數體只有一行語句，可以省略花括號 { } 和 return。

二、類

ES6引入了類的概念，可以用更面向對象的方式編寫代碼。ES6的類不僅可以使用構造函數定義屬性和方法，還可以使用extends和super進行繼承。

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

在以上代碼中，Animal類是一個基類，Dog類通過extends Animal實現繼承。使用super可以訪問父類的屬性和方法。

三、解構賦值

解構賦值是一種從數組或對象中提取值並賦值給變量的方式，ES6引入了解構賦值的語法。

//數組解構賦值
const [a, b] = [1, 2];
console.log(a); //1
console.log(b); //2

//對象解構賦值
const {name, age} = {name:'Tom', age:18};
console.log(name); //Tom
console.log(age); //18

可以看出，使用解構賦值可以更簡潔地從數組和對象中提取值。

四、模板字符串

ES6引入了模板字符串，可以通過使用反引號 “ 和 ${} 來更方便地創建字符串。

const name = 'Tom';
const age = 18;
const str = `My name is ${name}, I am ${age} years old.`;
console.log(str); // My name is Tom, I am 18 years old.

可以看出，使用模板字符串可以更方便地拼接字符串，並且可以包含變量和表達式。

五、默認參數

ES6支持給函數參數設置默認值，可以在不傳遞參數或傳遞null或undefined時使用默認值。

const add = (a, b=2) => {
  return a + b;
};
console.log(add(2)); // 4
console.log(add(2,3)); // 5

在以上代碼中，b設置了默認值2，當沒有傳遞第二個參數或傳遞null或undefined時，使用默認值2。

六、Promise

ES6引入了Promise，它是一種異步編程的解決方案，可以幫助我們更簡單地處理異步操作。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('done');
  }, 1000);
});

promise.then(res => {
  console.log(res); // done
});

在以上代碼中，我們創建了一個Promise對象，並在1秒後resolve它。我們可以使用then方法，在Promise對象被resolve時執行回調函數。

七、擴展運算符

擴展運算符是一種在可迭代對象、數組字面量、對象字面量和函數調用參數中擴展表達式的方法。它使用三個點 (…)。

//數組擴展
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr = [...arr1, ...arr2];
console.log(arr); // [1, 2, 3, 4, 5, 6]

//對象擴展
const obj1 = {a:1, b:2};
const obj2 = {c:3, d:4};
const obj = {...obj1, ...obj2};
console.log(obj); // {a:1, b:2, c:3, d:4}

可以看出，使用擴展運算符可以更方便地合併數組和對象。

八、結構化綁定

ES6引入了一種名為解構綁定或結構化綁定的特性，它可以更方便地從對象中提取屬性，並將它們綁定到變量上。

//對象結構化綁定
const {name, age} = {name:'Tom', age:18};
console.log(name); //Tom
console.log(age); //18

//數組結構化綁定
const [a, b] = [1, 2];
console.log(a); //1
console.log(b); //2

使用結構化綁定可以更方便地從數組和對象中提取值，並將它們綁定到變量上。