当我们写JavaScript代码时,经常会用到到条件判断处理,这里有5个技巧能使你写出更好、更简洁的条件语句。
让我们来看一下的例子:
// conditionfunction test(fruit) {
if (fruit == 'apple' || fruit == 'strawberry') {
console.log('red');
}}
一眼看去,以上的例子貌似没有什么问题。但是,如果我们加入更多的红色水果,比如车厘子(cherry)和蔓越橘(cranberries)?那就要使用||写更多的条件判断了。
为了解决以上问题,我们可以使用Array.includes来重写以上的条件判断。看以下例子:
function test(fruit) {
// extract conditions to array
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (redFruits.includes(fruit)) {
console.log('red');
}}
将这些“红色水果”(条件)提取到数组里面,这样写就会看起来很简洁了。
下面我们增加两个条件判断来扩展下上一个例子:
function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
// condition 1: fruit must has value
if (fruit) {
// condition 2: must be red
if (redFruits.includes(fruit)) {
console.log('red');
// condition 3: must be big quantity
if (quantity > 10) {
console.log('big quantity');
}
}
} else {
throw new Error('No fruit!');
}
}
// test results
test(null); // error: No fruits
test('apple'); // print: red
test('apple', 20); // print: red, big quantity
看着以上的代码,发现以下的问题:
/_ return early when invalid conditions found _/
function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
// condition 1: throw error early
if (!fruit) throw new Error('No fruit!');
// condition 2: must be red
if (redFruits.includes(fruit)) {
console.log('red');
// condition 3: must be big quantity
if (quantity > 10) {
console.log('big quantity');
}
}
}
通过这种写法,可以减少一层嵌套。当if语句很长的时候,这种写法就比较好。(试想一下,你需要滚动到很底部才能看到else语言,这样不酷)。
我们也可以用相反的条件判断和尽早返回来减少if语句嵌套,看以下第二个条件是如何处理的。
/_ return early when invalid conditions found _/
function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (!fruit) throw new Error('No fruit!'); // condition 1: throw error early
if (!redFruits.includes(fruit)) return; // condition 2: stop when fruit is not red
console.log('red');
// condition 3: must be big quantity
if (quantity > 10) {
console.log('big quantity');
}
}
通过在第二个条件里取反的条件来判断,现在的代码释放了一个嵌套。当我们要写很长的逻辑以及想停止更一步的过程时,这种方法很凑效。
但是,这样写并不是硬性的,要看具体的场景。有时候,你要问下自己,这样的写法(没有嵌套)是否比之前那种(在条件2嵌套)更好或者更具可读性。
对我来说,我只会远离之前的那种写法(在条件2嵌套),注意有以下两个原因:
因此,始终旨在减少嵌套和及时及早返回(return),但是不要过度去这样做。如果感兴趣可以查看以下的一篇相关文章和在StackOverflow的关于这主题的更多讨论:
我猜以下的代码你看起来应该很熟悉了,我们仍然需要在执行JavaScript时检查空值(undefined或null)。
function test(fruit, quantity) {
if (!fruit) return;
const q = quantity || 1; // if quantity not provided, default to one
console.log(`We have ${q} ${fruit}!`);
}
//test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!
事实上,我们可以消除变量p来分配函数默认参数。看以下例子:
function test(fruit, quantity = 1) { // if quantity not provided, default to one
if (!fruit) return;
console.log(`We have ${quantity} ${fruit}!`);
}
//test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!
是不是看起来很简单,很直观?请记住,每个参数都有自己的默认函数参数。例如,我们也可以为fruit分配默认值(即以上代码的第一个参数):
function test(fruit = 'unknown', quantity = 1)
另外一个问题来了:如果fruit参数是Object类型怎么办?我们可以指定默认值吗?
function test(fruit) {
// printing fruit name if value provided
if (fruit && fruit.name) {
console.log (fruit.name);
} else {
console.log('unknown');
}
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple
看看上面的例子,我们想要打印出fruit的名称如果值存在的话,否则打印出“unknow”。我们可以通过检查默认函数参数和对象解构来避免fruit&&fruit.name这个条件。看看以下例子:
// destructing - get name property only
// assign default empty object {}
function test({name} = {}) {
console.log (name || 'unknown');
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple
由于我们只需要fruit对象的name属性,可以使用{name}来解构对象,然后我们可以在代码中使用name作为变量代替fruit.name。
我们还将分配空对象{}作为默认参数。如果不这样做的话,在执行test(undefined)这行代码时就会报错:无法解析’undefined’或’null’的属性name,因为undefined没有name这个属性。
如果你不介意使用第三方库,有几个方法可以减少空值检查。
以下是使用Lodash的例子:
// Include lodash library, you will get _
function test(fruit) {
console.log(__.get(fruit, 'name', 'unknown'); // get property name, if not available, assign default value 'unknown'
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple
你可以在这里执行这个demo。另外,如果你热衷于使用函数式编程(FP),你可能会选择用Lodash fp,Lodash的函数式版本(方法改为get或getOr)。
我们来看看以下例子:
function test(color) {
// use switch case to find fruits in color
switch (color) {
case 'red':
return ['apple', 'strawberry'];
case 'yellow':
return ['banana', 'pineapple'];
case 'purple':
return ['grape', 'plum'];
default:
return [];
}
}
//test results
test(null); // []
test('yellow'); // ['banana', 'pineapple']
以上的代码看起来貌似没什么错误,但是我发现代码十分杂乱。其实可以用字面量对象更清晰的语法来实现相同的结果。例如:
// use object literal to find fruits in color
const fruitColor = {
red: ['apple', 'strawberry'],
yellow: ['banana', 'pineapple'],
purple: ['grape', 'plum']
};
function test(color) {
return fruitColor[color] || [];
}
或者,你也可以用Map来实现同样的结果,例如:
// use Map to find fruits in color
const fruitColor = new Map()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']);
function test(color) {
return fruitColor.get(color) || [];
}
Map是自ES6开始才可用的对象类型,可以用来存储键值对。
最后一个技巧是关于利用新的(其实不是很新了)JavaScript数组方法来减少代码函数。看看下面的代码,我们想所有的水果是否都是红色的。
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
}
让我们一起生成更多可读代码。 我希望你能在本文中学到一些新东西。
就这样。 写代码快乐!
运用条件运算符将你的 if 语句缩短为一行代码,运用条件语句,比如 if,当 if 语句满足的情况下,允许我们执行指定一些代码块...
就是在每个浏览器中上边两个中只能使用一个的话一定得记得把IE9考虑进来,因为它也是能识别条件注释的(感觉IE9就是IE向现代高级浏览器过渡的东西,CSS3只支持一部分,但是之前IE专有的一些问题照样存在)
为了判断浏览器是否支持css3的一些新属性样式,当不兼容该样式的时候,我们可以更优雅的降级处理。这就需要使用到css3的条件判断功能:在css中支持@supports标记、或者在js中使用CSS.supports函数,来检测浏览器是否支持css3的新属性。
在js中的条件判断,主要用于不同的条件执行不同的动作,实际开发中,我们如何实现js条件判断语句优化的呢?1、一个条件推荐用if else或者三元运算,2、当2个条件是用if...elseif...else...3、三个条件及以上时候推荐用switch
语句是js中最重要的成分。本文想介绍的是if判断语句和switch条件分支语句,如果不加入break会默认从满足条件一直向下执行.最后的default就是相当于if条件语句中的else,switch语句用的是全等判断,大家一定要注意一下
在Vue进行前端开发中,条件判断主要用于根据不同的条件来决定显示或隐藏,或者进行视图之间的切换,本文以一个简单的小例子简述v-if的常见用法,仅供学习分享使用
当你的程序依赖正确的响应顺序,但响应的顺序又无法保证时,可能会导致意外的结果,这就是竞态条件。方案1:每次操作完成之前,阻止新的操作;方案2:每次发送请求时,丢掉上一个请求的响应
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!