推荐给前端小白的简洁风代码写法

原创
2021/08/18 09:53
阅读数 149

先抛出两个问题,检查下是否是前端新手,本文所讲是纯原生JavaScript语法,不涉及任何框架。

问题1,阅读如下代码,当a等于undefinednullfalsetrue、"abc"时,b和c的值是多少?

const b = a ?? "hello";
const c = a || "hello";

问题2,阅读如下代码,最终输出a的值是多少?

a = 1;
a = ++a;
console.info(a);

以上两个问题如果非常了解的话,大概率说明已经入门了。

if、else的优化

如果实例不为空则执行方法,如下写法

//不简洁的写法
if (obj) {
    obj.test();
}
//简化1
obj && obj.test && obj.test();
//还可以进一步简化
obj?.test();

同样的,访问一个复杂对象的一个成员变量,如下写法:

//不优雅的写法
let a;
if (obj && obj.child1 && obj.child1.a) {
    a = obj.child1.a;
}
//同样的,使用?号操作符进行简化,一行代码搞定
let a = obj?.child1?.a;

 

根据条件判断赋值

// 不简洁的写法
let a;
if(value) {
    a = value;
} else {
    a = defaultValue;
}
// 简化1,基本的语法,几乎所有编程语言都会
a = value ? value : defaultValue;
// 简化2,对应开头的问题1,??和||什么区别呢?
a = value || defaultValue;

解答下问题1的疑问,??和||运算符的区别,||是将前面的值转换成boolean后,如果是true则取其前面的值,否则取后面的值。而双问号则为:前面的值为null、undefined,则取后面的值,否则都取前面的值。也就是说,如果value等false的时候想让a等false,那么就用??运算符。

回调函数转Promise风格

先看如下代码:

//有些人可能会这样写js方法,如下test2要在test1回调成功后执行
function test1 (arg1, callback1, errorCallback) {}
function test2 (arg1, callback1, errorCallback) {}
//然后使用的时候,就可能会演变成这样
test1("abc", (resp1) => {
            //回调成功后执行test2
            test2("cde", resp2 => {
                    console.info('test2执行完成', resp2);
                }, error => console.log(error));
        }, (errorMsg) => {
            console.error(errorMsg);
});

上面的代码看起来很垃圾,非常不简洁,不易读,上面只是列举了两层,如果还有test3、test4岂不是很恐怖,这便是回调地狱。

那么如何解决回调地狱呢?

首先,不传入callback,而是返回Promise,本文不对Promise做过多的解释,只抛出名词,可自行查阅资料;

然后在then中处理结果和执行下一个方法,最后catch异常,finally中做最后的收尾工作。

对象赋值操作

不多说了,直接写代码实例了

let obj1 = {a: 2, b: 4}
//轻量级clone,注意这种方式不会拷贝原型,啥是原型(prototype)?答:自行查阅资料
let obj2 = {...obj1};
//clone并增加新属性,或覆盖旧属性
let obj3 = {...obj1, a: 6, c: "hello"};

上述代码,...运算符对数组同样适用。

重量级的clone要考虑其原型和其子成员的原型,通常会引用第三方的库,自己实现比较复杂。

数组操作,简化for循环

let array = [4,2,6,9,1,3,7]
//过滤 + 排序,如下代码会过滤掉1和2,并对剩下的进行排序
const result = array.filter(a => a > 2).sort((a, b) => a - b);

//使用map映射成另一种类型的数据,如下转换为A类的实例数组
const aList = array.map(a => new A(a));

//流式操作,最后遍历处理
array.filter(a => a > 2).map(a => new A(a)).forEach(a => {
    //处理A的实例
});

 

好了,先说这么多吧,我也只是个业余前端,主要搞后端Java的。我的开源作品中也有涉及前端,欢迎访问:GitHub推荐Java进程启动器—Jarboot 其中jarboot-ui模块是前端部分,使用了React技术。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部