怎么使用 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 阶段，让我们等待它获得批准，然后我们就能无处不在地看到这难以置信的语法的使用。
总结。
让我们为了编写更清晰、易维护的代码，学习并尝试新的技巧和技术，因为在几个月后，长长的条件看起来像搬石头砸自己的脚。
感谢大家的阅读。

在任何编程语言中，代码需要根据不同的条件在给定的输入中做不同的决定和执行相应的动作。
例如，在一个游戏中，如果玩家生命点为0，游戏结束。在天气应用中，如果在早上被查看，显示一个日出图片，如果是晚上，则显示星星和月亮。在这篇文章中，我们将探索javascript中所谓的条件语句如何工作。
如果你使用javascript工作，你将写很多包含条件调用的代码。条件调用可能初学很简单，但是还有比写一对对if/else更多的东西。这里有些编写更好更清晰的条件代码的有用提示。
数组方法 array.includes提前退出 / 提前返回用对象字面量或map替代switch语句默认参数和解构用 array.every &array.some 匹配全部/部分内容使用可选链和空值合并1.数组方法 array.includes
使用 array.includes 进行多条件选择。
例如：
function printanimals(animal) {
if (animal === 'dog'|| animal === 'cat') {
console.log(i have a ${animal});
}
}
console.log(printanimals('dog'));// i have a dog
上面的代码看起来很好因为我们只检查了两个动物。然而，我们不确定用户输入。如果我们要检查任何其他动物呢？如果我们通过添加更多“或”语句来扩展，代码将变得难以维护和不清晰。
解决方案:
我们可以通过使用 array.includes 来重写上面的条件。
function printanimals(animal) {
const animals = ['dog','cat','hamster','turtle'];
if (animals.includes(animal)) {
console.log(i have a ${animal});
}
}
console.log(printanimals('hamster'));// i have a hamster
这里，我们创建来一个动物数组，所以条件语句可以和代码的其余部分抽象分离出来。现在，如果我们想要检查任何其他动物，我们只需要添加一个新的数组项。
我们也能在这个函数作用域外部使用这个动物数组变量来在代码中的其他任意地方重用它。这是一个编写更清晰、易理解和维护的代码的方法，不是吗？
2.提前退出 / 提前返回。
这是一个精简你的代码的非常酷的技巧。我记得当我开始专业工作时，我在第一天学习使用提前退出来编写条件。
让我们在之前的例子上添加更多的条件。用包含确定属性的对象替代简单字符串的动物。
现在的需求是：
如果没有动物，抛出一个异常打印动物类型打印动物名字打印动物性别const printanimaldetails = animal =>{
let result;// declare a variable to store the final value
// condition 1:check if animal has a value
if (animal) {
// condition 2:check if animal has a type property
if (animal.type) {
// condition 3:check if animal has a name property
if (animal.name) {
// condition 4:check if animal has a gender property
if (animal.gender) {
result = ${animal.name} is a ${animal.gender} ${animal.type};;
} else {
result = "no animal gender";
}
} else {
result = "no animal name";
}
} else {
result = "no animal type";
}
} else {
result = "no animal";
}
return result;
};
console.log(printanimaldetails());// 'no animal'
console.log(printanimaldetails({ type:"dog",gender:"female"}));// 'no animal name'
console.log(printanimaldetails({ type:"dog",name:"lucy"}));// 'no animal gender'
console.log(
printanimaldetails({ type:"dog",name:"lucy",gender:"female"})
);// 'lucy is a female dog'
你觉得上面的代码怎么样。
它工作得很好，但是代码很长并且维护困难。如果不使用lint工具，找出闭合花括号在哪都会浪费很多时间。