常用的JavaScript编程风格

摘要:工作中好的编程风格会更友好,不好的编程风格会让队友难受,变量的声明:使用let和const代替var(var存在变量提升等副作用),声明常量使用const

工作中好的编程风格会更友好,不好的编程风格会让队友难受


变量的声明

使用let和const代替var(var存在变量提升等副作用),声明常量使用const  

// bad
var name = 'zero'
// good
let name = 'zero'
// bad
var MAX = 100
// good
const MAX = 100


命名规范

使用小驼峰命名,变量名可读性好  

// bad
let l_name = 'zero'
// good
let lastName = 'zero'


使用变量说明

不要出现让人觉得晦涩难懂的变量  

// bad
if (time < 120) {
    todo()
}
// good
const MINUTES_IN_TWO_HOUR = 120;
if (time < MINUTES_IN_TWO_HOUR) {
    todo()
}


不要重复命名

当一个对象名有意义的时候,对象里面的key的命名不需要重复对象名  

// bad
let Student = {
    studentName = 'zero',
    studentAge = 18
}
// good
let Student = {
    name = 'zero'
    age = 18
}


字符串命名

静态字符串使用单引号,动态字符串使用反引号  

// bad
let name = "zero"
let myName = 'my name is ' + name
// good
let name = 'zero'
let myName = `my name is ${name}`


使用解构赋值

使用数组或者对象给变量赋值的时候,使用解构赋值  

let arr = [1, 2, 3, 4]
let obj = {
    name:'zero',
    age:18
}
// bad
let first = arr[0]
let second = arr[1]
let name = obj.name
let age = obj.age
// good
let [first, second] = arr
let {name,age} = obj


使用Object.assign

当给对象赋多个值得时候,使用Object.assign  

let obj = {}
// bad
obj.name = 'zero'
obj.age = 18
// good
Object.assign(obj,{
    name:'zero',
    age:18
})


函数参数

函数参数较多的情况,使用对象进行传参  

// bad
function Student(name,age,sex){
    //...
}
// good
let studentConfig = {
    name:'zero',
    age:18,
    sex:'man'
}
function Student(studentConfig){
    //...
}


封装判断条件

判断条件过多的情况可以封装成一个函数  

// bad
if(a===1 && b===2){
    //...
}
// good
function isTure(a,b){
    return a===1 && b===2
}
if(isTrue(a,b)){
    //...
}


其他
1.使用函数的默认传参来避免对函数参数的判断
2.函数名要表达出函数是干什么的,比如 isEmail(),让人一看就知道是判断email的,而且返回值是布尔类型
3.对于数组,少用for循环,Array.forEach,Array.every,Array.some,Array.map,Array.filter基本可以满足for循环想得到的效果
以上就是平时比较常见的编程风格,还有很多没列出来,更多的请参考编程风格  


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_2868