每日 30 秒 ⏱ 优雅三连击

简介

短路运算、逗号运算、简化条件语句、初始化小技巧

昨天一个同窗在 URL 大爆炸 问了我一个问题：这是什么写法 (data[key] = value, data)。平时在写文章的时候会把这些技巧稍微提示一下，认为你们都知道这些技巧，引发了小二的自我检讨。

但愿你们能够一块儿成长，都不掉队。

可能不少人都了解这些方法了,若是懂的同窗就温故知新，不懂的同窗我们迎头追上。因为是我的经常使用技巧可能并非最好的，若是有知道的同窗也能够提出来一块儿成长。

短路运算

只有当第一个运算数的值没法肯定逻辑运算的结果时，会按照顺序对剩下运算数进行求值。一块儿回忆初中常背的一句口诀：一真即真,一假即假。

一真即真

一真即真 指的是 || 或运算符，当一个值为真并中止对后面的判断。

默认值

function test(name) {
    name = name || 'Bar' ;
    console.log(name)
}

// 输出 Bar
console.log(test());
复制代码

固然也能够用 ES6 的 spread 语法来完成默认值，关于更多函数参数技巧能够查看 函数骚操做。不支持 ES6 时等须要默认值操做时，||一个值得使用的小技巧。

简化条件语句

在开发是时候，偶尔会遇到只有一行代码的条件语句：

if(!name) {
    initName()
}
复制代码

不知道同窗会不会和我同样会以为这样写很差看，这里能够利用 || 来简化代码：

name || initName()
复制代码

一假即假

一假即假 指的是 && 或运算符，当一个值为假时则会中止判断，为真时则会一直判断下去。

默认值

在取一些对象属性的时候，对象属性有可能为 null 或者 undefind 则会出现错误：

const data = {
    name: 'xiaoer',
    age: 18,
    company: null
}

// 抛出错误: Uncaught TypeError: Cannot read property 'name' of null
console.log(data.company.name)
复制代码

在这里 && 搭配 || 使用能够写出更实用的默认值操做：

const data = {
    name: 'xiaoer',
    age: 18,
    company: null
}

const name = data.company && data.company.name || 'no name';
复制代码

简化条件语句

在开发是时候，偶尔会遇到只有一行代码的条件语句：

// 假设后端返回的用户数据为 data
const data = {
    name: 'xiaoer',
    age: 18,
    company: null
}

if (data.company && data.company.name) {
    initCompany();
}
复制代码

&& 和 || 同样也能够用来简化条件语句：

data.company && data.company.name && initCompany();
复制代码

逗号运算符

for 循环

在使用 for 循环的时候，可能不止须要迭代一个参数，能够利用逗号表达式：

脚本

let i = 0, j = 0, times = 5;

for (let i = 0, j = 0; i < times; i++, j++, j++){
    console.log(i, j);
}
复制代码

输出

i:0, j:0
i:1, j:2
i:2, j:4
i:3, j:6
i:4, j:8
复制代码

语句赋值

有时候会须要一次声明多个变量：

const a = 0,
    b = 1,
    c = 2;

// 输出 a, b, c
console.log(a, b, c);

// 下面操做都会报错
// 证实确实都是 const 常量
a = 2;
b = 1;
c = 1;
复制代码

简化语句

在写一些简短的函数时经常写成下面这样：

const ins = (x) => {
    x++;
    return x;
}

[{count: 1}].map((x) => {
    x.count++;
    return x;
})
复制代码

若是须要进行的操做不少却是须要写得详细方便他人阅读，并且开发并非一我的。若是是这种一点点操做的时候，能够利用逗号运算符来简化：

const ins = (x) => (x++, x)

[{count: 1}].map((x) => (x.count++, x));
复制代码

交换数据

在不增长变量的状况下如何调换a和b的值。

let a = 1, b = 2;
a=[b, b=a][0]
复制代码

固然也能够用 es6 的 spread 新语法作到：

let a = 1, b = 2;
[a, b]=[b, a]
复制代码

这里谢谢 徐永飞 和 老贼同窗 的补充。

其余

• 小二周末要去看 演唱会 顺便和朋友、同事聚一聚，提早更新几篇文章并非断更哦。
• 函数参数骚操做 增长了 强制参数 相关内容，能够回去补更。
  • 原文连接：函数参数骚操做
  • 更新部分连接：函数参数骚操做 - 新增长内容
• 调试黑魔法 增长了 字符串妙用 相关内容，能够回去补更。
  • 原文连接： 调试黑魔法
  • 更新部分连接：调试黑魔法 - 新增长内容

一块儿成长

在困惑的城市里总少不了并肩同行的 伙伴 让咱们一块儿成长。

• 若是您想让更多人看到文章能够点个 点赞。
• 若是您想激励小二能够到 Github 给个 小星星。
• 若是您想与小二更多交流添加微信 m353839115。

本文原稿来自 PushMeTop