ES6 常見語法糖

5 min readApr 9, 2023

在 ES6 中新增了許多語法糖與新增語法，這兩者是不同的！語法糖單純只是精簡了過去 JavaScript 語法，新增語法則是會改變程式的運作方式，例如箭頭函式就是新增的語法，這將會導致 this 的指向有所不同。

下面就來介紹 ES6 新增常見語法糖:

函式的縮寫

//傳統物件函式寫法
const obj = {
  myName: '物件',
  fn: function() {
    return this.myName;
  }
}

//使用語法糖後把多的 function 拿掉了
const obj = {
  myName: '物件',
  fn() {
    return this.myName;
  }
}

物件內的變數

如果今天我們要帶入的一個變數，裡面的變數名稱跟另一個變數名稱是一樣的，那就可以直接用同一個名字就好，下面兩個輸出的 console.log(people.person) 結果是相同的。

//傳統的寫法
const person = {
  name: '小明'
};

const people = {
  person:person
}

//ES6 的縮寫，輸出結果會是一樣的。
const person = {
  name: '小明'
};

const people = {
  person
}
console.log(people.person)

ES6 陣列的展開

如果有兩個陣列想要合併在一起，過去會使用 concat 將兩個陣列合併為一個陣列，例如下圖左是傳統的做法，新的 ES6 會使用 … 的方式去做合併，兩者個結果都會輸出 [‘小明’, ‘杰倫’, ‘阿姨’, ‘老媽’, ‘老爸’] 這一個陣列。

const groupA = ['小明', '杰倫', '阿姨'];
const groupB = ['老媽', '老爸'];

//傳統使用 concat 去合併兩個陣列
const groupAll = groupA.concat(groupB);
console.log(groupAll)

const groupA = ['小明', '杰倫', '阿姨'];
const groupB = ['老媽', '老爸'];

//ES6 使用．．． 就可以將兩個陣列做合併
const groupAll = [...groupA,...groupB];

console.log(groupAll)

物件的擴展

如果今天我們有一組物件，在物件內想要引用其他的物件在 ES6 中同樣可以使用 … 的方法來引入其他物件，到另一個物件之中，方法如下：

我們新增一個 new_methods 希望把 methods 引入其中，就可以使用 …methods 的方法把它引入到 new_methods 物件中。

onst methods = {
  fn1() {
    console.log(1);
  },
  fn2() {
    console.log(1);
  },
}

const new_methods = {
  ...methods,
  fn3(){
    console.log(1)
  }
}
console.log(new_methods);
//會輸出 {fn1: ƒ, fn2: ƒ, fn3: ƒ}

轉成純陣列使用

下面這一段語法，使用 querySelectorAll(‘ li ’) 會把頁面中所有的 li 都抓出來，形成一個陣列，但我稱作這種叫做偽陣列，因為他少了許多傳統陣列的操作方法所以，這邊主要的目的是把他變成真正的陣列，讓她也有 map 、filter 等等的方法。

const doms = document.querySelectorAll('li');

console.log(doms); //輸出是一的偽陣列沒有更多的陣列操作方法

const doms = document.querySelectorAll('li');
const newdoms = [...doms];

console.log(newdoms); //輸出純陣列，原本的陣列方法都有了！

加入預設值的方法

下面是一個需要帶入兩個參數做相加的簡單韓式，如果今天輸出少帶 b 這個參數，這樣輸出則是 NaN 。

function sum(a,2) {
  return a + b;
}
console.log(sum(1)); //少帶一個參數輸出為 NaN

在傳統的 JavaScript 中我們會寫簡單的判斷給他一個預設值如下圖，當沒有輸入第二個參數，就會預設 b 是 2 輸出結果就會等於 3 。

function sum(a, b) { 
//以前會在這邊寫判斷，如果沒有 b 就給 b=2
  if(!b) { b = 2 }
  return a + b;
}
console.log(sum(1));

使用 ES6 後我們只要再參數後面加上 = 多少的預設值即可，這樣的程式碼就會簡化很多。

// ES6 簡單多了直接給 b=2 就完成給參數預設值了
function sum(a, b = 2) {
  return a + b;
}
console.log(sum(1));

以上就是整理 JavaScript 常見的 ES6 縮寫方法，當然還有許多新增的語法糖，如果以上有錯誤的地方，歡迎留言或私訊互相交流，謝謝大家。