JavaScript：淺談ES6常見縮寫

🌟 ES6 語法糖：不會影響運作，邏輯與當前 JS 一致

物件內的函式

javascript

const obj = {
  hello: function() {
    return "hello world";
  }
}
obj.hello()

顯示如下

javascript

hello world

ES6 縮寫(去除 funtion)

javascript

const obj = {
  hello() {
    return "hello world";
  }
}
obj.hello()

顯示如下

javascript

hello world

物件內變數

javascript

const A = 100
const B = {"A": A}

顯示如下

javascript

{A:100}

ES6 縮寫(將同名變數僅寫一個)

javascript

const A = 100
const C = {A}

顯示如下

json

{A:100}

這樣的效果跟原本{"A": A}一樣

物件展開-陣列相加

javascript

const groupA = ['A', 'B', 'C'];
const groupB = ['D', 'E'];
const groupAll = groupA.concat(groupB);

顯示如下

text

['A', 'B', 'C', 'D', 'E']

ES6 陣列相加縮寫

能夠透過...的方式代表陣列展開的形式

javascript

const groupA = ['A', 'B', 'C'];
const groupB = ['D', 'E'];
const groupAll = [...groupA, ...groupB]

顯示如下

javascript

['A', 'B', 'C', 'D', 'E']

ES6 物件展開

新增一個物件包含新方法，同時加入原有的方法

javascript

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

const newmethod = {
  test(){
    console.log("test")
  },
  ...methods
}
newmethod.fn1()

物件內的函式

ES6 縮寫(去除 funtion)

物件內變數

ES6 縮寫(將同名變數僅寫一個)

物件展開-陣列相加

ES6 陣列相加縮寫

ES6 物件展開

留言