资讯专栏INFORMATION COLUMN

每日 30 秒 ⏱ 优雅三连击

Rocture / 1877人阅读

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

昨天一个同学在 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));
一起成长
在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。

如果您想让更多人看到文章可以点个 点赞

如果您想激励小二可以到 Github 给个 小星星

如果您想与小二更多交流添加微信 m353839115

本文原稿来自 PushMeTop

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109231.html

相关文章

  • 每日 30 ⏱ 该不该优雅

    showImg(https://segmentfault.com/img/remote/1460000018734296?w=900&h=500); 简介 可读性、性能、Spread、Reduce 在 优雅三连击 中有同学提到了 可读性 这个关键词,就小二个人的观点 在某个范围内使用比较常用到的小技巧,可以提升一定的可读性,文中提到的短路运算在初始化变量是提升可读性的,并且在很多提倡优化if 语句...

    JohnLui 评论0 收藏0
  • 每日 30 优雅初始化数组

    showImg(https://segmentfault.com/img/remote/1460000018709740?w=900&h=500); 简介 数组、初始化、快速生成数组、内存泄露 有时候会需要对数组进行一些初始化,最常用到的便是 for 循环: let num = []; for (let i = 0; i < 10; i++) { // 做一些其他操作 // 或者返...

    pcChao 评论0 收藏0
  • 每日 30 优雅插入数组

    showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/insert-item-inside-an-array/poster.png); 简介

    genefy 评论0 收藏0
  • 每日 30 ⏱ 函数参数骚操作

    showImg(https://segmentfault.com/img/remote/1460000018667432?w=900&h=500); 前言 函数、参数、解构、优雅、可读性、技巧 不管是调用第三方库或者是项目自身的函数,开发过程中总少不了函数。可以说函数是解放代码的第一生产力,有的同学会说了那你把类放在那里了。其实用函数和数据一样可以模拟出来类,类更多的是对函数的归集和复用进行扩充升...

    MonoLog 评论0 收藏0
  • 每日 30 ⏱ 谁敢与我一战

    showImg(https://segmentfault.com/img/remote/1460000018771037?w=900&h=500); 简介 benchmark、基准测试、jsPerf 在 优雅插入数组 一文中大家最多的评论就是 能不能加个基准测试。小二不是不喜欢加基准测试而是现在硬件设备的性能越来越快了,有时候一些操作不是性能问题的主要原因,当然这不是我们不写出好代码的理由。 书写...

    Dionysus_go 评论0 收藏0

发表评论

0条评论

Rocture

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<