1、單行 If-Else 語句

const age = 12;
let ageGroup;


// LONG FORM
if (age > 18) {
  ageGroup = "An adult";
} else {
  ageGroup = "A child";
}


// SHORTHAND
ageGroup = age > 18 ? "An adult" : "A child";

2、從陣列中刪除重複項

在 JavaScript 中，Set 是一個集合，它允許你僅儲存唯一值。這意味著刪除任何重複的值。

因此，要從陣列中刪除重複項，你可以將其轉換為集合，然後再轉換回陣列

const
 
 numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]

1)、new Set(numbers)從數字列表中建立一個集合。建立集合會自動刪除所有重複值。

2）、展開運算子...將任何可迭代物件轉換為陣列。這意味著將集合轉換回陣列。[...new Set(numbers)]

3.空值合併操作符（??）

只有當左側為null和undefined時，才會返回右側的數空值合併操作符（??）是一個邏輯操作符，當左側的運算元為null或者undefined時，返回其右側運算元，否則返回左側運算元。

|| 和 ??

var a = obj || {}   相當於

function(obj){
var a;
if(
obj === 0 || 
obj === "" || 
obj === false || 
obj === null || 
obj === undefined
){
a = {}
} else {
a = obj;
}
}

function(obj){ var a = obj ?? {} }  相當於  function(obj){ var a; if( obj === null || obj === undefined ){ a = {} } else { a = obj; } }

4、防止崩潰的可選鏈

如果訪問未定義的屬性，則會產生錯誤。這就是可選鏈的用武之地。

在未定義屬性時使用可選鏈運算子，undefined將返回而不是錯誤。這可以防止你的程式碼崩潰。

const student = {
  name: "Matt",
  age: 27,
  address: {
    state: "New York"
  },
};


// LONG FORM
console.log(student && student.address && student.address.ZIPCode); // Doesn't exist - Returns undefined


// SHORTHAND
console.log(student?.address?.ZIPCode); // Doesn't exist - Returns undefined

5、在沒有第三個變數的情況下交換兩個變數

在 JavaScript 中，你可以使用解構從陣列中拆分值。這可以應用於交換兩個變數而無需第三個：

解構賦值

let x = 1;
let y = 2;


// LONGER FORM
let temp = x;
x = y;
y = temp;


// SHORTHAND
[x, y] = [y, x];

6、！！ 將任何值轉換為布林值

！是轉成布林值後取反

!null=true
 
!undefined=true
 
!''=true
 
!100=false
 
!'abc'=false

在 JavaScript 中，你可以使用 !! 在 JS 中將任何內容轉換為布林值。

!!true    // true
!!2       // true
!![]      // true
!!"Test"  // true


!!false   // false
!!0       // false
!!""      // false

7、 使用 && 進行短路評估

不必用if語句檢查某事是否為真，你可以使用&&運算子：

var isReady = true;


function doSomething(){
  console.log("Yay!");
}


// LONGER FORM
if(isReady){
  doSomething();
}


// SHORTHAND
isReady && doSomething();

8、檢查一個專案是否存在於陣列中

你可以使用 includes() 方法，而不是使用 indexOf() 方法來檢查元素是否在陣列中。這使你的意圖非常明確：

let numbers = [1, 2, 3];


// LONGER FORM
const hasNumber1 = numbers.indexOf(1) > -1 // -> True


// SHORTHAND/CLEANER APPROACH
const hasNumber1 = numbers.includes(1)     // -> True

9、壓縮多個條件

避免使用長|| 檢查多個條件鏈，你可以使用你剛剛在上一個技巧中學到的東西——即，使用 includes() 方法：

const num = 1;


// LONGER FORM
if(num == 1 || num == 2 || num == 3){
  console.log("Yay");
}


// SHORTHAND
if([1,2,3].includes(num)){
  console.log("Yay");
}

10、Math.floor() 簡寫

四捨五入Math.floor()並不是什麼新鮮事。但是你知道你也可以使用~~運算子嗎？

// LONG FORM
Math.floor(5.25) // -> 5.0


// SHORTHAND
~~5.25 // -> 5.0