雨巷 (rainto.top)

Javascript简写技巧

笔记 / 

分享下Javascript常用的简写技巧，写出更优雅的代码。

  1. 三元运算符
js
let result;
if (condition) {
  result = true
} else {
  result = false
}

const result = condition ? true : false
  1. 空值合并
js
const name = user.name !== null && user.name !== undefined ? user.name : 'default;'

const name = user.name ?? 'default'
  1. 可选链操作符
js
const street = user && user.address && user.address.street

const street = user?.address?.street
  1. 数组去重

Set 是 ES6 引入的一种新的数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。

js
function unique(arr) {
  return arr.filter((item, index) => {
    arr.indexOf(item) === index
  })
}

const unique = arr => [...new Set(arr)]
  1. 快速向下取整

由于位非操作会保留数字的符号位并将其他位取反，再执行一次位非操作就会回复原来的数值。（因为位运算只处理整数部分） 虽然在性能上可能略微优于使用Math.floor()，但不直观

js
const floor = Math.floor(4.9)

const floor = ~~4.9 // ~4.9 = -5
const floor = 4.9 | 0 // 4 不推荐
  1. 合并对象
js
const merged = Object.assign({}, obj1, obj2)

const merged = { ...obj1, ...obj2 }
  1. 短路求值
js
if(condition){
  doSomething()
}

condition && doSomething()
  1. 默认参数
js
function greet(name) {
  name = name || 'Guest'
  console.log(name)
}

const greet = (name = 'Guest') => console.log(name)
  1. 结构赋值
js
const first = arr[0]
const secound = arr[1]

const [first, secound] = arr
  1. 字符串转数字
js
const num=parseInt('123')

const num=+'456'
  1. 多重条件判断
js
if(value===1||value===2||value===3){
  // ...
}

if([1,2,3].includes(value)){
  // ...
}
  1. 快速幂运算
js
Math.pow(2, 3)

2 ** 3 // 8
  1. 数组映射
js
const numbers = [1, 2, 3]
const doubled = numbers.mao((num) => {
  return num * 2
})

const doubled=numbers.map(num=>num*2)
  1. 交换变量值
js
let temp = a
a = b
b = temp

[a, b] = [b, a]
  1. 动态对象属性
js
const obj = {}
obj[dynamic + 'name'] = value

const obj = { [`${dynamic}name`]: value }