怎麼使用 JavaScript 編寫更好的條件語句

4.默認參數和解構。
當使用 javascript 工作時，我們總是需要檢查 null/undefined 值並賦默認值，否則可能編譯失敗。
function printvegetableswithquantity(vegetable,quantity = 1) {
// if quantity has no value,assign 1。
if (!vegetable) return;
console.log(we have ${quantity} ${vegetable}!);
}
//results
printvegetableswithquantity('cabbage');// we have 1 cabbage
printvegetableswithquantity('potato',2);// we have 2 potato
如果 vegetable 是一個對象呢？我們能賦一個默認參數嗎？
function printvegetablename(vegetable) {
if (vegetable &&vegetable.name) {
console.log (vegetable.name);
} else {
console.log('unknown');
}
}
printvegetablename(undefined);// unknown
printvegetablename({});// unknown
printvegetablename({ name:'cabbage',quantity:2 });// cabbage
在上面的例子中，如果vegetable 存在，我們想要列印 vegetable name,否則列印"unknown"
我們能通過使用默認參數和解構來避免條件語句 if (vegetable &&vegetable.name) {}
// destructing - get name property only
// assign default empty object {}
function printvegetablename({name} = {}) {
console.log (name || 'unknown');
}
printvegetablename(undefined);// unknown
printvegetablename({ });// unknown
printvegetablename({ name:'cabbage',quantity:2 });// cabbage
因為我們只需要 name 屬性，所以我們可以使用 { name } 解構參數，然後我們就能在代碼中使用 name 作為變量，而不是 vegetable.name
我們還賦了一個空對象 {} 作為默認值，因為當執行 printvegetablename(undefined) 時會得到一個錯誤：不能從 undefined 或 null 解構屬性 name，因為在 undefined 中沒有 name 屬性。
5.用 array.every &array.some 匹配全部/部分內容。
我們能使用數組方法減少代碼行。查看下面的代碼，我們想要檢查是否所有的水果都是紅色的：
const fruits = [。
{ name:'apple',color:'red'}
{ name:'banana',color:'yellow'}
{ name:'grape',color:'purple'}
];
function test() {
let isallred = true;
// condition:all fruits must be red
for (let f of fruits) {
if (!isallred) break;
isallred = (f.color == 'red');
}
console.log(isallred);// false
}
這代碼太長了！我們能用 array.every 來減少代碼行數：
const fruits = [。
{ name:'apple',color:'red'}
{ name:'banana',color:'yellow'}
{ name:'grape',color:'purple'}
];
function test() {
// condition:short way,all fruits must be red
const isallred = fruits.every(f =>f.color == 'red');
console.log(isallred);// false
}
相似地，如果我們想測試是否有任何紅色的水果，我們能用一行 array.some 來實現它。
const fruits = [。
{ name:'apple',color:'red'}
{ name:'banana',color:'yellow'}
{ name:'grape',color:'purple'}
];
function test() {
// condition:if any fruit is red
const isanyred = fruits.some(f =>f.color == 'red');
console.log(isanyred);// true
}
6.使用可選鏈和空值合併。
這有兩個為編寫更清晰的條件語句而即將成為 javascript 增強的功能。當寫這篇文章時，它們還沒有被完全支持，你需要使用 babel 來編譯。
可選鏈允許我們沒有明確檢查中間節點是否存在地處理 tree-like 結構，空值合併和可選鏈組合起來工作得很好，以確保為不存在的值賦一個默認值。
這有一個例子：
const car = {
model:'fiesta'
manufacturer:{
name:'ford'
address:{
street:'some street name'
number:'5555'
state:'usa'
}
}
}
// to get the car model
const model = car &&car.model || 'default model';
// to get the manufacturer street
const street = car &&car.manufacturer &&car.manufacturer.address &&
car.manufacturer.address.street || 'default street';
// request an un-existing property
const phonenumber = car &&car.manufacturer &&car.manufacturer.address
&&car.manufacturer.phonenumber;
console.log(model) // 'fiesta'
console.log(street) // 'some street name'
console.log(phonenumber) // undefined
所以，如果我們想要列印是否車輛生產商來自美國，代碼將看起來像這樣：
const ismanufacturerfromusa = () =>{
if(car &&car.manufacturer &&car.manufacturer.address &&
car.manufacturer.address.state === 'usa') {
console.log('true');
}
}
checkcarmanufacturerstate() // 'true'
你能清晰地看到當有一個更複雜的對象結構時，這能變得多亂。有一些第三方的庫有它們自己的函數，像 lodash 或 idx。例如 lodash 有 _.get 方法。然而，javascript 語言本身被引入這個特性是非常酷的。
這展示了這些新特性如何工作：
// to get the car model
const model = car?.model??'default model';
// to get the manufacturer street
const street = car?.manufacturer?.address?.street??'default street';
// to check if the car manufacturer is from the usa
const ismanufacturerfromusa = () =>{
if(car?.manufacturer?.address?.state === 'usa') {
console.log('true');
}
}
這看起來很美觀並容易維護。它已經到 tc39 stage 3 階段，讓我們等待它獲得批准，然後我們就能無處不在地看到這難以置信的語法的使用。
總結。
讓我們為了編寫更清晰、易維護的代碼，學習並嘗試新的技巧和技術，因為在幾個月後，長長的條件看起來像搬石頭砸自己的腳。
感謝大家的閱讀。