本篇笔记不定期更新
一、IF语句简化
假设我们有下面的代码
- 1. 使用includes简化if判断
if(value === 'duck' || value === 'dog' || value === 'cat') {
// ...
}
我们可以这样解决
let options = ['duck', 'dog', 'cat' ]
if (options.includes(value)) {
//....
}
将判断条件过长的条件判断放到一个变量中存储,比看臃肿的表达式要舒服的多
- 2. 通过条件判断给变量赋值布尔值
let b
if (a === 'a') {
b = true
} else {
b = flase
}
// 简写
b = a === 'a' // 代码简单明了
- 3. 简单的条件判断使用三元运算
let b
if (a === 'a') {
b = 1
} else {
b = 2
}
// 三元运算
b = a === 'a' ? 1 : 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
三、少嵌套,早返回
假设我们有下面的代码
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('很多红色水果')
}
}
四、 减少遍历,快速获取对象的属性名和属性值
- 使用Object.keys快速获取对象的属性名
- 使用Object.valuse快速获取对象的属性值
let obj = {
name: 'zs',
age: 18
}
// 方法一:遍历对象
let keys = []
let values = []
for (key in obj) {
keys.push(key) // keys: ['name', 'age']
values.push(obj[key]) // valuse:['zs', 18]
}
// 方法二:使用Objcet.keys和Object.valuse
let keys = Object.keys(obj) // ['name', 'age']
let values = Object.values(obj) // ['zs', 18]
五、字符串拼接使用${}
let person = {
name: 'zs',
age: 18
}
// 字符串拼接使用'+'号
function say (person) {
console.log('大家好,我叫' + person.name + ',今年' + person.age + '岁')
}
// 字符串拼接使用${}, 显而易见清晰多了
function say(person) {
console.log(`大家好,我叫${person.name},今年${person.age}岁`)
}
// 还可以结合解构赋值一起使用
function say({name, age}}) {
console.log(`大家好,我叫${name},今年${age}岁`)
}
六、在数组中查找最大值和最小值
let arr = [1,2,3,4,5,9]
// 可遍历数组获取,但是使用Math对象方法和展开运算符(...)简洁明了
Math.max(...arr) // 9
Math.min(...arr) // 1
七、null / undefined 检查
let a
if (a !== null || a !== undefined || a !== '') {
let b = a
} else {
let b = ''
}
// 简写
let b = a || ''
八、给多个变量赋值
let a, b, c
a = 1
b = 2
c = 3
// 简写
let [a, b, c] = [1,2,3]
// console.log(a) ⇒ 1
九、其他
- 命名规范
- 保持代码的干净整洁:多余代码或多余注释
- 代码风格:代码缩进,使用单引号、双引号等