1峭咒、單線 If-Else
在 JavaScript 中，可以使用三元條件運(yùn)算符來(lái)壓縮 if-else 語(yǔ)句完疫。
例如：

const age = 10;
let group;

// LONG VERSION
if (age >= 18) {
  group = "Adult";
} else {
  group = "Child";
}

// SHORTHAND VERSION
group = age > 18 ? "Adult" : "Child";

這個(gè)簡(jiǎn)寫是為了使代碼更簡(jiǎn)潔舀瓢。只有當(dāng)它清楚地使表達(dá)更容易理解時(shí)才使用它黔衡。

2消约、空合并

空合并運(yùn)算符 ?? 如果左側(cè)為空，則返回右側(cè)员帮。否則，它返回左邊的值导饲。這很有用捞高，因?yàn)樗÷粤巳唛L(zhǎng)的 if 檢查。

空合并的語(yǔ)法是：

someValue ?? defaultValue

例如：

let someValue;

// LONGER EXPRESSION
if(someValue){
  console.log(someValue)
} else {
  console.log("Nothing found")
}

//SHORTHAND
console.log(someValue ?? "Nothing found")

輸出：

Nothing found
Nothing found

3渣锦、可選鏈

在 JavaScript 中硝岗，你可以使用點(diǎn)表示法訪問(wèn)對(duì)象的屬性和方法。

例如：

fruit.color

但是袋毙，如果你嘗試訪問(wèn)未定義對(duì)象的屬性型檀，你將看到錯(cuò)誤。為避免這種情況听盖，你需要確保在訪問(wèn)其屬性之前定義該對(duì)象：

const color = fruit && fruit.color;

但這看起來(lái)并不甜胀溺。你可以通過(guò)在點(diǎn)符號(hào)前添加一個(gè)問(wèn)號(hào)來(lái)使用可選鏈接，如下所示：

const color = fruit?.color;

讓我們看一個(gè)真實(shí) JS 對(duì)象的例子：

const student = {
  name: "Ann",
  age: 22,
  address: {
    state: "California"
  },
};

// LONG FORM
console.log(student && student.address && student.address.ZIPCode);

// SHORTHAND
console.log(student?.address?.ZIPCode);

輸出：

undefined
undefined

4皆看、將任何值轉(zhuǎn)換為布爾值

在 JavaScript 中仓坞，你可以將任何內(nèi)容轉(zhuǎn)換為布爾值。這是因?yàn)檠鳎诘讓游薨＃琂avaScript 中的一切要么是“True”，要么是“False”毛雇。

要將任何內(nèi)容轉(zhuǎn)換為布爾值嫉称，請(qǐng)使用雙感嘆號(hào) !!。

例如：

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

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

5灵疮、傳播

你可以使用擴(kuò)展運(yùn)算符 ... 將一個(gè)數(shù)組的元素?cái)U(kuò)展到另一個(gè)數(shù)組中织阅。

例如，讓我們使用擴(kuò)展運(yùn)算符將兩個(gè)數(shù)字?jǐn)?shù)組合并在一起：

const nums1 = [1, 2, 3];
const nums2 = [4, 5, 6];

// LONG FORM
let newArray = nums1.concat(nums2);

// SHORTHAND
newArray = [...nums1, ...nums2];

在向數(shù)組添加元素時(shí)始藕，你還可以將 .push() 方法替換為擴(kuò)展運(yùn)算符蒲稳。

例如：

let numbers = [1, 2, 3];

// LONGER FORM
numbers.push(4);
numbers.push(5);

// SHORTHAND
numbers = [...numbers, 4, 5];

6、 使用擴(kuò)展運(yùn)算符進(jìn)行解構(gòu)

你可以使用擴(kuò)展運(yùn)算符 ... 來(lái)解構(gòu)對(duì)象的剩余值伍派。

為了演示江耀，讓我們創(chuàng)建一個(gè)學(xué)生對(duì)象。讓我們將 name 和 age 屬性分配給變量诉植，并將剩余的屬性分配給第三個(gè)變量：

const student = {
  name: "Matt",
  age: 23,
  city: "Helsinki",
  state: "Finland",
};

// LONGER FORM
const name = student.name;
const age = student.age;
const address = { city: student.city, state: student.state };

// SHORTHAND
const { name, age, ...address } = student;

7祥国、從數(shù)組中刪除重復(fù)項(xiàng)

你可以通過(guò)將數(shù)組轉(zhuǎn)換為集合，然后將集合中的值添加回?cái)?shù)組來(lái)刪除數(shù)組的重復(fù)項(xiàng)。

這是有效的舌稀，因?yàn)榧鲜俏ㄒ坏捻?xiàng)目集合啊犬。

換句話說(shuō)，一個(gè)集合中不能有兩個(gè)相同的值壁查。因此觉至，將數(shù)組轉(zhuǎn)換為集合會(huì)刪除引擎蓋下的重復(fù)項(xiàng)。

例如：

const nums = [1,1,1,1,3,4,5]
const uniqueNums = [...new Set(nums)];

這是實(shí)現(xiàn)其效果的另一種方法：

const nums = [1,1,1,1,3,4,5]
const uniqueNums = Array.from(new Set(nums))

順便說(shuō)一句睡腿，如果你需要一組獨(dú)特的物品语御，為什么不使用 set 呢？

8席怪、短路評(píng)估中的 && 運(yùn)算符

你是否使用 if 檢查來(lái)查看表達(dá)式的計(jì)算結(jié)果是否為真应闯？

你可以使用短路 && 運(yùn)算符對(duì)速記進(jìn)行相同的操作。

例如：

var ready = true;

function say(){
  console.log("Hi");
}

// LONGER EXPRESSION
if(ready){
  say();
}

// SHORTHAND
ready && say();

輸出：

Yeah
Yeah

9挂捻、將值嵌入到字符串中

你可以通過(guò)將字符串包裝在反引號(hào)內(nèi)并使用 ${} 將變量嵌入到字符串中碉纺。

例如：

const age = 41;
const chen = `I'm ${age} years old`;

// result: I'm 41 years old

這些字符串有時(shí)被稱為“類固醇字符串”。

10刻撒、對(duì)象屬性分配

如果你希望對(duì)象鍵與值具有相同的名稱骨田，則可以省略對(duì)象文字。

例如：

const name = "Chen", city = "Beijing", age = 20, sex= "male";

// LONGER EXPRESSION
let person = {
  name: name,
  city: city,
  age: age,
  sex: sex
};

// SHORTHAND
person = { name, city, age, sex };

11疫赎、默認(rèn)值

在 JavaScript 中盛撑，你可以擁有一個(gè)帶有默認(rèn)參數(shù)值的函數(shù)。

通過(guò)這種方式捧搞，你可以在提供或不提供參數(shù)值的情況下調(diào)用該函數(shù)抵卫。

讓我們看一個(gè)例子：

// LONGER EXPRESSION
function pick(fruit) {
  if(fruit === undefined){
    console.log("I just picked up a banana");
  } else {
    console.log(`I just picked up a ${fruit}`);
  }
}

// SHORTHAND
function pick(fruit="banana") {
  console.log(`I just picked up a ${fruit}`)
}

pick("apple");  // -> I picked up a apple
pick();             // -> I picked up a banana

12、一行聲明變量

你可以將變量聲明合并為一行胎撇，而不是每個(gè)聲明使用一行介粘。

例如：

// LONGER FORM
let name;
let age;
let favoriteFood = "sala";

// SHORTHAND
let name, age, favoriteFood = "sala";

13、對(duì)象值作為數(shù)組

使用 Object.values() 方法將一個(gè)對(duì)象的所有值收集到一個(gè)數(shù)組中晚树。

例如：

const info = { name: "Chen", country: "China", age: 35 };

// LONGER FORM
let data = [];
for (let key in info) {
  data.push(info[key]);
}

// SHORTHAND
const data = Object.values(info);

14姻采、在數(shù)組中查找元素

使用內(nèi)置的 find() 方法查找與特定條件匹配的元素。

例如：

const fruits = [
  { type: "Banana", color: "Yellow" },
  { type: "Apple", color: "Green" }
];

// LONGER FORM
let yellowFruit;
for (let i = 0; i < fruits.length; ++i) {
  if (fruits[i].color === "Yellow") {
    yellowFruit = fruits[i];
  }
}

// SHORTHAND
yellowFruit = fruits.find((fruit) => fruit.color === "Yellow");
```
15爵憎、檢查數(shù)組中的項(xiàng)

你可以使用 includes() 方法慨亲，而不是使用 indexOf() 方法來(lái)檢查元素是否在數(shù)組中。

例如：
```
let numbers = [1, 2, 3];

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

// SHORTHAND/CLEANER APPROACH
const hasNumber1 = numbers.includes(1)     // -> True
```
16宝鼓、多條件檢查

使用 includes() 方法避免條件鏈刑棵。

例如：
```
const num = 1;

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

// SHORTHAND
if([1,2,3].includes(num)){
  console.log("Hi");
}
```
17、用一行代碼分配多個(gè)值

你可以使用解構(gòu)在一行代碼中分配多個(gè)值愚铡。

例如：
```
let num1, num2;

// LONGER FORM
num1 = 10;
num2 = 100;

// SHORTHAND
[num1, num2] = [10, 100];
```
這也適用于對(duì)象：

student = {
  name: "Chen",
  age: 29,
};

// LONGER FORM
let name = student.name;
let age = student.age;

// SHORTHAND
let { name, age } = student;
```
18蛉签、在沒(méi)有第三個(gè)變量的情況下交換兩個(gè)變量

使用解構(gòu)從數(shù)組中提取值胡陪。這可以應(yīng)用于在沒(méi)有第三個(gè)的情況下交換兩個(gè)變量。

例如：
```
let x = 1;
let y = 2;

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

// SHORTHAND
[x, y] = [y, x];
```
19碍舍、 Math.pow() 簡(jiǎn)寫

你可以不使用 Math.pow() 函數(shù)來(lái)將數(shù)字求冪柠座，而是使用 ** 運(yùn)算符作為速記：
```
// LONGER FORM
Math.pow(4,2); // 16
Math.pow(2,3); // 8

// SHORTHAND
4**2 // 16
2**3 // 8
```
20、 Math.floor() 簡(jiǎn)寫

你可以使用 ~~ 運(yùn)算符作為簡(jiǎn)寫片橡，而不是使用 Math.floor() 函數(shù)來(lái)向下舍入數(shù)字：
```
// LONG FORM
Math.floor(5.25) // -> 5.0

// SHORTHAND
~~5.25 // -> 5.0
```