我要评论净化代码方法
1. IF语句简化
假设我们有下面的代码
if(value === 'duck' || value === 'dog' || value === 'cat') {
// ...
}
我们可以这样解决
let options = ['duck', 'dog', 'cat' ]
if (options.includes(value)) {
//....
}
将判断条件过长的条件判断放到一个变量中存储，比看臃肿的表达式要舒服的多
2. 使用默认参数和解构赋值
- 在JavaScript中我们总需要检查 null/undefined 值和指定默认值
function test (fruit, num) {
if (!fruit) return
const n = num || 1
console.log(`we have ${n} 个 ${fruit}`)
}
test('banner') // we have 1 个 banner
tset('banner', 10) // we have 10 个 banner
事实上，我们可以通过声明默认的函数参数来消除变量n
function test (fruit, num = 1) {
if (!fruit) return
console.log(`we have ${num} 个 ${fruit}`)
}
test('banner') // we have 1 个 banner
tset('banner', 10) // we have 10 个 banner
// 注意：每一个声明都有自己默认参数，例：我们也可以给fruit设置一个默认值 function test (fruit = 'apple', num = 1)
// 如果 fruit是一个对象
function testObj ({name} = {}) { // 从对象中解构出name
console.log(name || 'unKnown')
}
test() // unKnown
test({name: 'banner', color: 'red'}) // banner
- 在javaScript中，我们可以对object 和 array 进行解构赋值。
// Object 对象解构赋值
let obj = { name: 'zs', age: 18 }
let {name, age} = obj
console.log(name) // 'zs'
console.log(age) // 18
// array 数组解构赋值
let arr = [ 1, 2, 3, 4, 5 ]
let [one , two] = arr
console.log(one) // 1
console.log(two) // 2
3. 少嵌套，早返回
假设我们有下面的代码
function test (fruit, num) {
const redFruit = ['apple', 'strawberry', 'cherry', 'cranberries']
if (fruit) {
if (redFruit.includes(fruit)) {
console.log('red')
if (num > 10) {
console.log('多个红色水果')
}
}
} else {
throw new Error('没有水果')
}
}
test(null) // error: 没有水果
test('apple') // red
test('apple', 20) // red, 多个红色水果
以上代码：
- 1个if/eles语句筛出无效的条件语句
- 3层嵌套的语句（条件1，2和3）
及早返回使得我们的代码更加易读：
- 通过及早return，我们减少了一层嵌套语句，尤其当你有很长的if语句(想象你需要滚动到很长才能知道有else语句)
function tset (fruit, num) {
const redFruit = ['apple', 'strawberry', 'cherry', 'cranberries']
if (!fruit) throw new Error('没有水果')
if (redFruit.includes(fruit)) {
console.log('red')
if (num > 10) {
console.log('很多红色水果')
}
}
}
// 针对上面的例子，我们可以通过倒置判断条件和及早的return来进一步减少if嵌套
function test (fruit, num) {
const redFruit = ['apple', 'strawberry', 'cherry', 'cranberries']
if (!fruit) throw new Error('没有水果')
if (!redFruit.includes(fruit)) return;
if (num > 10) {
console.log('很多红色水果')
}
}
4. 其他
- 命名规范
- 保持代码的干净整洁：多余代码或多余注释
- 代码风格：代码缩进，使用单引号、双引号等
本文地址：https://blog.csdn.net/S_B_Girl/article/details/110198540
您可能感兴趣的文章:
- vue init初始化项目后 npm run dev报错 10% building modules 1/1 modules 0 activeevents
- axios 处理 302 状态码的解决方法
- [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/feature
- react-native 在新版Xcode（10+）中运行出现的问题： node_modules/react-native/third-party/glog-0.3.4 , C compiler cannot create executables
- 使用puppeteer爬取网站并抓出404无效链接
- 【angular2+typeScript+ng-zorro】Carousel 走马灯的左右方向控件实现
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论