都重生了谁还写一大坨的 JavaScript 代码啊

”啊啊啊！他心脏骤停了！快打120啊。“

”他怎么在工位上倒下了，这下公司得赔多少钱啊。“

”好像是工作压力太大了，这么多年得996模式谁扛得住啊。“

”发现的太晚了，人肯定没救了，你别过去，等救护车过来吧。“

……

我…死了吗？

脑袋想灌了铅一样昏沉，我缓缓睁开了双眼，一道刺目的蓝光照射过来，让我瞬间又闭上了眼睛。耳边隐隐约约能听到啪啪的键盘敲击声。

我抬起头，看了一眼电脑屏幕。

”代…代码？“

办公室里，零散坐着七八个程序员，都在聚精会神地看着电脑中的代码，绞尽脑汁为了实现一些奇葩需求写着业务代码。办公室中秃头领导透过玻璃扫视着办公室中的每一个程序员。

这是什么情况？我不是死了吗？

坑爹啊，怎么死了还要继续写代码，嚓。

这地府的人生算是又完了。

我先看了一眼电脑的时间，”2017年11月8号 21点19分！“，不对劲，我又确定了一眼时间再看了一下电脑中的项目，这不是六年前的项目吗。

我这是…重生了？还重生到了六年前？

这个时期是我刚毕业那年的第一家公司，这时的我还是个啥也不会的小前端。别说是完整的项目，我就连简单的业务需求代码都要在百度上找半天。专科毕业，能力偏低，能找到工作也是因为面试官是同县的老乡给了我一个就业机会。其实是有能力的人要的工资太高公司不舍得出钱，只能招我这个便宜货。

既然重生了，而且重生到六年前，那就让自己重活一次吧。这一次，我势必要在互联网就业环境大动荡之前入职国企，身居高位，安心养老。什么义务加班、凌晨发版、在家远程支持、996福报、24小时开机待命、拖欠薪资、N+1告别职场通通滚开啊。

好，现在先回顾一下自己刚入行时写的项目代码吧。

……果然，我见同事代码如屎，料同事见我亦如此。

JavaScript代码简写的技巧有很多，像ES6那些基础的简写语法、数组排序、过滤的方法或者是三目运算符代替if else那些我觉得是基础，就没有提及，本文只是列举部分比较常见的用法。

|| 或 ?? 运算符

function(obj) {
  let a;
  if (
    obj === 0 || 
    obj === "" || 
    obj === false || 
    obj === null || 
    obj === undefined ||
    isNaN(obj)
  ) {
     a = {}
   } else {
     a = obj;
  }
}

像这样的一段 if-else 代码，我们可以使用 || 或 ?? 运算符进行简化

逻辑或操作符 ||，这里要注意的是 0 和 '' 也会认为是false
如果 前面的值是 0 '' false null undefined NaN 其中的任意一种，则直接返回后面的值

function(obj) {
  let a = obj || {}
}

空值合并操作符 ?? 如果没有定义左侧返回右侧。如果是，则返回左侧。
这种方法非常实用，有时候仅仅只是想判断一个字段有没有值，而不是把 空字符串 或者 0 也当做 false 处理

// 原代码
function (obj) {
  let a;
  if (
    obj === null || 
    obj === undefined
  ) {
     a = {}
   } else {
     a = obj;
  }
}
// 简写后
function(obj) {
  let a = obj ?? {}
}

// 原代码
if (value !== null && value !== undefined && value !== '') { ... }
// 简写后
if ((value ?? '')  !==  '') { ... }

可选链操作符 (?.)

咱们在写业务代码的时候，如果访问到未定义的属性就会报错导致代码崩溃。在使用了可选链操作符之后，访问未定义的属性就会返回 undefined 而不是控制台的报错

const data = [{
  id:  0001,
  goodsInfo: {
    goodsName: '速效救心丸',
    goodsCode: '01',
    spec: '规格'
  }],
  fn() {
    console.log('Fucking Crazy Thursday V Me 50!')
  }
}
// 原判断逻辑，不够优雅
if (data && data.length && data[0].goodsInfo && data[0].goodsInfo.goodsName) { ... }

// 使用可选链操作符简写，简洁明了
if (data?.[0]?.goodsInfo?.goodsName) { ... }

data.fn?.() // Fucking Crazy Thursday V Me 50!
data.foo?.() // undefined

如上面代码所示，可选链操作符除了可以访问对象中的属性，在数组和函数调用也可使用。

逻辑空赋值运算符 (??=)

逻辑空赋值运算符(x ??= y)仅在 x 是 null 或 undefined 时才对其赋值。

let goodsInfo = {
  name: '速效救心丸',
  price: 999
}

if (goodsInfo.price === null || goodsInfo.price === undefined) {
  goodsInfo.price = 299;
}

// 简写后的优雅
goodsInfo.price ??= 299;

指数运算符(**)

在JS中通常使用Math.pow() 的方法获取一个数字的幂。ECMAScript 2016(ES7)中有个幂运算符 ( ** )，幂运算符返回第一个操作数做底数，第二个操作数做指数的乘方。

Math.pow(2, 3); // 8 
2 ** 3; // 8 

// 它还可以这么玩
2 ** 3 ** 2     // 512
2 ** (3 ** 2)   // 512
(2 ** 3) ** 2   // 64

Infinity ** -Infinity; // 0
(-2) ** (0.2);         // NaN

扩展操作符（…）

// 这种类似的代码应该见过吧
const data = {
	id: 1,
	code: '01',
	name: 'fkc'
}
const res = {
	status: 0,
	spec: 'g'
}

const resData = {
	id: data.id,
	code: data.code,
	name: data.name,
	status: res.status,
	spec: res.spec
}

// 使用拓展操作符简写
const resData = { ...data, ...res }

除了对象，数组合并也可以使用拓展操作符来简写

let arr1 = ['k', 'f', 'c'];
 
let arr2 = arr1.concat(['v', 'me', '50']); // ['k', 'f', 'c', 'v', 'me', '50']
 
 // 使用拓展操作符
let arr2 = [...arr1, 'v', 'me', '50']; // ['k', 'f', 'c', 'v', 'me', '50']

逗号运算符(,)

这里只说一下函数 return 的时候用逗号运算符简化代码的技巧，其他用法请直接点击查看官方文档。

// 简化前
const result = arr => {
  arr.push('a')
  return arr
}
console.log(result([1,2])) // 输出：[1, 2, 'a']

这段代码需要返回修改后的数组，不能直接return arr.push('a')，因为push的返回值是修改后数组的长度，这时候可以用逗号运算符简化成一行代码。

// 简化后
const result = arr => (arr.push('a'), arr)
console.log(result([1,2])) // 输出：[1, 2, 'a']

解构赋值

在 JavaScript 中，碰到了变量交换问题像以前在学校中老师教的是声明第三个变量的方式来实现。其实可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个。

let a = 1, b = 2;
let c = null;
c = a;
a = b;
b = c;

// 解构赋值
[a, b] = [b, a];

除了上面这种情况，当我们需要同时声明多个变量赋值的时候也可以这样写

let a = 'k';
let b = 'f';
let c =  'c';
// 等价于
let [a, b, c] = ['k', 'f', 'c'];

然后像我们在项目中 map 的使用频率是非常高的，常见的场景就是使用 map 从接口返回的数据中取到需要的字段。

// 接口返回数据
res = [{
  id: 1,
  name: '速效救心丸',
  price: 999,
  spec: '20/板'
}, {
  id: 2,
  name: '吮指原味鸡',
  price: 9.9,
  spec: '8/份'
}]

const data = res.map((item, index) => {
  return { id: item.id, name: item.name }
})

// 解构赋值获取
const data = res.map(({id, name}) => ({id, name}))

// 当然这个不用解构赋值也可以写的跟简单一点
const data = res.map(e => ({id: e.id, name: e.name}))

多值判断

这个经常在项目中能碰到这种情况，根据数据的状态值做判断写不同的逻辑代码

if (status === 1 || status === 3 || status === 5) { ... }
 
// 使用indexOf简写
if ([1, 3, 5].indexOf(status) >= 0) { ... }
 
// 使用includes简写
if ([1, 3, 5].includes(value)) { ... }

结语

本文中只是列举了一些平时比较常见的小技巧，确实能提高自己的编码技巧。希望本文能够帮助到正在从事前端工作的开发者，通过这篇文章对自己的编码能力更加得心应手。