开发中应该这样写你的js代码

本文强调了编程中变量、函数及ES6使用的最佳实践,包括变量的合理运用与命名、函数的清晰命名与单一职责原则、优先采用函数式编程及ES6特性等,旨在提升代码质量和可读性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.变量相关
    1.1 不要滥用变量,尤其是定义了变量,但是后面没有使用(可能一段时间以后自己都不知道定义这个是为甚)
    1.2 数据只用一次或者不使用就没必要安装到变量中
    1.3 变量的命名:尽量做到见名知意
    1.4 特定的变量
        1.4.1 对参数不说明
        if(array.length < 9 ){
            // 为什么要小于9 
        }
        合适的做法,应该是对这个9做一下说明
        const MAX_INPUT_LENGTH = 9;
        if(array.length < MAX_INPUT_LENGTH){
            // 这样就一目了然,知道是不能超过输入的限制
        }
    1.5 变量的赋值
        1.5.1 对于求值获取的变量,要兜底,避免出现undefined导致程序出错;
              let name = data.name || "名称"
2.函数相关
    2.1 函数命名
        2.1.1 函数名称最好也是见名知意
        2.2.2 函数有返回值,譬如返回的是数组、整数、布尔值,最好是函数名称上加上;
            布尔值: is,should,can,has....
            数组  :getArray..
    2.2 函数传参
        对于函数传参要有说明,例如 
             initHeader(isShowHeader=true,title="标题") {
                console.log(isShowHeader);
                console.log(title);
            }
            这样就很清楚,要传递的参数是什么意思
    2.3 动作函数要以动词开头
        例如,sendPhotoToServer(),意图就很明显
    2.4 一个函数完成一个独立的功能,不要一个函数混杂多个功能;
        不然出现问题都不方便排查
    2.5 优先使用函数式编程
        2.5.1  尽量使用map,filter,find,some,any,forEach替代for循环
    2.6 函数中过得if...else,使用switch代替
3.尽量使用ES6
    3.1 尽量使用箭头函数
    3.2 字符串拼接尽量避免使用+符号,而是使用模板字符;例如
        let message = "nihao"+name+",现在是"+time
        使用模板字符
        let message = `nihao ${name},现在是 ${time}`;ps:注意符号哦
    3.3 使用解构赋值
        3.3.1 传统赋值如下 
            let data = {name:'jack',score:'20'};
            let name = data.name;
            let score = data.score;
            let cards = ['king','queen'];
            let firstCard = cards[0];
            let secondCard = cards[1];
            使用结构赋值
            const data = {name:'jack',score:'20'};
            const {name,score} = data;
            let cards = ['king','queen'];
            const [firstCard,secondCard] = cards;
    ok,暂时先到这里,后续继续增加;

分割线

过去我们可能会写这样的代码,检讨嵌套属性

let data
if(myObj && myObj.firstProp && myObj.firstProp.secondProp && myObj.firstProp.secondProp.actualData) data = myObj.firstProp.secondProp.actualData

可以换成

const data = myObj?.firstProp?.secondProp?.actualData

PS:要在babelrc中加入@babel/plugin-proposal-optional-chaining来启用它。

 



            
        

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值