JS 常見縮寫

ES6 語法糖與新增語法

• 語法糖：即為縮寫，寫法更為簡潔，但不影響運作。
• 新增語法：寫法簡潔，但會影響作。 ex.箭頭函式

物件字面值 Object literals

針對原大括號定義物件提供縮寫方式。

1.物件內的函式

const obj={
  myName:"Winnie",
  fn:function(){
    return this.myName;
  }
}

物件中的函式可以縮寫如下，移除 :function

const obj = {
  myName : "Winnie",
  fn() { 
    return this.myName;
  }
}

2.物件內的變數

輸入的屬性名稱與值為同名時，可省略屬性名稱。

const person = {
  name : "Winnie"
}
function callSomeone(){
  console.log(this.name);
}
const people = {
  person : person,
  callSomeone : callSomeone
}

物件內的變數可縮寫如下，

const people = {
  person,
  callSomeone
}

展開

1.不同陣列合併

const groupStr = ["a","b","c"];
const groupNum = [1,2,3,4,5];
const groupAll = groupStr.concat(groupNum);

運用「…」展開手法可縮寫如下，

const groupAll = [...groupStr,...groupNum];

2.物件擴展

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

const methods = {
  fn1() {
    console.log("方法一");
  },
  fn2() {
    console.log("方法二");
  }
}
const newMethod = {
  fn(){
    console.log("新方法");
  },
  ...methods
}

3.轉成純陣列

將類陣列轉換回純陣列，即可取得完整的陣列方法。

const list = document.querySelectorAll("li");
//此處的 list 為「類陣列」
const newList =　[...list];

4.預設值

function sum(a,b) {
  return a+b;
}
console.log(sum(1,2)) //3
console.log(sum(1)) //NaN，因為b不存在

使用預設值手法修改如下，若 b 有傳入數值，則使用該數值；若 b 無傳入數值，則使用預設值0。

function sum(a,b=0) {
  return a+b;
}
console.log(sum(1,2)) //3
console.log(sum(1)) //2

---

學習來源：六角學院–Vue 3 實戰影音課程