DAY 20
2
Modern Web

## OR 的短路概念

OR 運算子 (`||`) 在一般的理解中，就是當「」的概念在使用：

``````const hasVIPcard = false;
const money = 1500;
if (money > 1000 || hasVIPcard) {
console.log('尊榮會員');
}
``````

``````const isUserHasVipCard = () => {
console.log('是否有 VIP card？');
return false;
};
const money = 1500;
if (money > 1000 || isUserHasVipCard()) {
console.log('尊榮會員');
}
``````

``````尊榮會員
``````

### OR 短路取值

``````const fruit = 'orange' || 'apple';
const fruit2 = '' || 'apple';

console.log(fruit);
console.log(fruit2);
``````

``````orange
apple
``````

### OR 語法整理

`const result = a || b`

``````let result;
if (a) {
result = a;
} else {
result = b;
}
``````

`const result = a || b || c`

``````let result;
if (a) {
result = a;
} else if (b) {
result = b;
} else {
result = c;
}
``````

### OR 用來給預設值/初始值

``````const arr = [
{ name: 'washing machine', price: 8000 },
{ name: 'TV' },
{ name: 'laptop', price: 25000 },
];

arr.reduce((sum, item) => {
const price = item.price || 0;
return sum + price;
}, 0);
``````

``````33000
``````

### OR 用來階層篩選

1. 要優先放上 VIP 商品
2. 如果沒有 VIP 商品，就改放萬元以上的商品
3. 若真的都沒有，就拿第一個商品來放
``````const arr = [
{ name: 'washing machine', price: 8000, vip: false },
{ name: 'TV', price: 13500, vip: false },
{ name: 'laptop', price: 25000, vip: false },
];

arr.filter(item => item.vip)[0] ||
arr.filter(item => item.price > 10000)[0] ||
arr[0];

``````

``````TV
``````

### 注意 falsy value

``````const fruitList = [] || ['apple', 'orange', 'banana'];
``````

``````[]
``````

## And 的短路概念

And 運算子 (`&&`) 在一般的理解中，就是當「而且」的概念在使用：

``````const hasVIPcard = true;
const money = 500;
if (money > 1000 && hasVIPcard) {
console.log('尊榮又有錢的會員');
}
``````

``````const isUserHasVipCard = () => {
console.log('是否有 VIP card？');
return true;
};
const money = 500;
if (money > 1000 && isUserHasVipCard()) {
console.log('尊榮又有錢的會員');
}
``````

``````
``````

### And 短路取值

``````const fruit = 'orange' && 'apple';
const fruit2 = '' && 'apple';

console.log(fruit);
console.log(fruit2);
``````

``````apple

``````

### AND 語法整理

`const result = a && b`

``````let result;
if (!a) {
result = a;
} else {
result = b;
}
``````

`const result = a && b && c`

``````let result;
if (!a) {
result = a;
} else if (!b) {
result = b;
} else {
result = c;
}
``````

### AND 用來確認 property path

``````const personList = [
{
height: 173,
weight: 63,
car: {
color: 'white',
price: 500000
}
},
{
height: 163,
weight: 55
}
];

personList.forEach(person => {
const carPrice = person.car.price;
console.log(carPrice);
});
``````

``````500000
Uncaught TypeError: Cannot read property 'price' of undefined
``````

``````const personList = [
{
height: 173,
weight: 63,
car: {
color: 'white',
price: 500000
}
},
{
height: 163,
weight: 55
}
];

personList.forEach(person => {
const carPrice = person && person.car && person.car.price;
if (carPrice) {
console.log(carPrice);
}
});
``````

``````500000
``````

## 參考資料

### 1 則留言

1
TD
iT邦新手 4 級 ‧ 2021-10-11 23:02:45

ycchiuuuu iT邦新手 5 級 ‧ 2021-10-12 12:21:37 檢舉
``````const customerCity = customer.details?.address?.city;
``````