发表于： 2019-11-25 23:21:29
1 967
今天完成的事：
js常用小技巧整理
明天计划的事：
复习
遇到的问题：
复习
收获：
1、处理多重条件
function test(a) {
if (a === 'apple' || b === 'orange' || c === 'strawbery') {
console.log('lalalala')
}
}
在想要匹配更多数据的情况下，一直使用||来扩展，明显很冗长。使用数组的includes方法来重写：
function test(a) {
let fruits = ['apple', 'orange', 'strawbery']
if (fruits.includes(a)) {
console.log('lalalala')
}}
2、少写嵌套，尽早返回
以下函数实现：如果没有提供水果，返回错误。
如果水果颜色为红色，打印出颜色。如果水果为红色且数量大于10，就打印出“good”
function test (fruit, quantity) {
const redfruits = ['apple', 'orange', 'strawbery']
if (fruit) {
if (redfruits.includes(fruit)) {
console.log('red')
if (quantity > 10) {
console.log('good')
}
}
} else {
throw new Error ('No fruit')
}}
以上这种写法if嵌套很多层，我们可以确定一个原则就是，一但发现无效条件，就尽早返回,不要太多嵌套，还要找半天else在哪
function test (fruit, quantity) {
const redfruits = ['apple', 'orange', 'strawbery']
if (!fruit) throw new Error ('No fruit')
if (!redfruits.includes(fruit)) return
console.log('red')
if (quantity > 10) {
console.log('good')
}}
可以优化如上写法，尽早返回，设置条件反转，即当某个条件不满足时就不再执行后续逻辑。当然也不是要始终都追求最少嵌套，太精简对阅读代码的人会增加思考时间。
以上可以再写一个可读性更好的：
function test (fruit, quantity) {
const redfruits = ['apple', 'orange', 'strawbery']
if (!fruit) throw new Error ('No fruit')
if (redfruits.includes(fruit)) {
console.log('red')
if (quantity > 10) {
console.log('good')
}
}}
3、使用数组every/some方法来处理全部/部分满足条件逻辑
例子：检查所有的水果是否都是红色，不是就返回
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
]function test () {
let isAllRed = true
for (let f of fruits) {
if (!isAllRed) break
isAllRed = (f.color === 'red')
}
console.log(isAllRed) // false}
以上写法可以改写：
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
]function test () {
const isAllRed = fruits.every(f => f.color === 'red')
console.log(isAllRed) // false}
如果想检查至少有一个水果是满足红色的，就使用some方法：
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
]function test () {
const isAllRed = fruits.some(f => f.color === 'red')
console.log(isAllRed) // false}
4、筛选不同颜色的水果
下面会用四种写法来实现，可以直观比较写法的简洁程度：
switch写法：
function test (color) {
switch (color) {
case 'red':
return ['apple', 'strawberry']
case 'yellow':
return ['banana', 'pineapple']
case 'purple':
return ['grape', 'plum']
default:
return []
}}
对象方法：
const fruitColor = {
red: ['apple', 'strawberry']
yellow: ['banana', 'pineapple']
purple: ['grape', 'plum']}function test (color) {
return fruitColor[color] || []}
使用Map方法：
const fruitColor = new Map().set('red', ['apple', 'strawberry']).set('yellow', ['banana', 'pineapple']).set('purple', ['grape', 'plum'])
function test (color) {
return fruitColor.get(color) || []}
使用数组的filter方法：
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'strawberry', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'pineapple', color: 'yellow' },
{ name: 'grape', color: 'purple' },
{ name: 'plum', color: 'purple' }]function test (color) {
return fruits.filter(f => f.color === color)}
5 、使用函数的默认参数来赋予默认值
function test (fruit, quantity) {
if (!fruit) return
const q = quantity || 1
console.log(`we have ${q}${fruit}`)}
test('banana') // we have 1 banana
test('apple', 2) // we have 2 apple
以下我们可以通过改写，去除对q的定义，可以通过默认参数，不用特意写||来实现如果没有传quantity就取1
function test (fruit, quantity = 1) {
if(!fruit) return
console.log(`we have ${quantity}${fruit}`)}test('banana')test('apple', 2)
同理，fruit也可以定义默认值：function test(fruit = 'unknown', test=1)
6、if(fruit & fruit.name)的替换写法
if(fruit & fruit.name)判断对象是否存在，存在情况下取name属性的写法，是常用的写法。现在我们使用解构赋值的方式来替换：
function test(fruit) {
// 如果有值，则打印出来
if (fruit && fruit.name) {
console.log (fruit.name);
} else {
console.log('unknown');
}}//测试结果
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple
替换写法：
// 解构fruit对象，只得到name属性,并为其赋予一个{}空值，用于传入undefined的情况
function test({name} = {}) {
console.log(name || 'unknown')}
test(undefined) // unknown
test({}) //unknown
test({name: 'apple', color: 'red'})
返回列表
评论