22+ 高频实用的 JavaScript 片段（2020年）

废话不多话，在本文中，列出了一些比较常用或者实用的的 JavaScript 代码片段，希望对你们有所帮助。

1.三元运算符

`let someThingTrue = true
if(someThingTrue){
handleTrue()
}else{
handleFalse()
}

****** 以下是简短版本 ******

let someThingTrue = true
someThingTrue ? handleTrue() : handleFalse()

2.短路`或`运算

`const defaultValue = "SomeDefaultValue"
let someValueNotSureOfItsExistance = null
let expectingSomeValue = someValueNotSureOfItsExistance || defaultValue

console.log(expectingSomeValue) // SomeDefaultValue

3. 条件成立

let someValue = true if (someValue) { console.log('条件成立!') }

4. `for` 循环

for (let i = 0; i < 1e2; i++) { // 代替 i<100 是不是有点酷 }

let someValues = [1, 2, 4] for (let val in someValues) { console.log(val) } let obj = { 'key1': 'value1', 'key2': 'value2', 'key3': 'value3' } for (let key in obj) { console.log(key) }

5. 值到对象的映射

`let x='x',y='y'
let obj = {x,y}

console.log(obj) // {x: "x", y: "y"}

6. Object.entries()

`const credits = {
  producer: '大迁世界',
  name: '前端小智',
  rating: 9
}
const arr = Object.entries(credits)
console.log(arr)

*** 输出 ***
[ [ 'producer', '大迁世界' ], [ 'name', '前端小智' ], [ 'rating', 9 ] ]

7. Object.values()

`const credits = {
  producer: '大迁世界',
  name: '前端小智',
  rating: 9
}
const arr = Object.values(credits)
console.log(arr)

*** 输出 ***

[ '大迁世界', '前端小智', 9 ]
`

8. 模板字面量

let name = '前端小智' let age = 20 var someStringConcatenateSomeVariable = `我是 ${name}，今年 ${age} 岁` console.log(someStringConcatenateSomeVariable)

9. 解构赋值

import { observable, action, runInAction } from 'mobx';

10.多行字符串

``let multiLineString = some string\n with multi-line of\n characters\n

console.log(multiLineString)
``

11.Array.find 简写

`const pets = [{
    type: 'Dog',
    name: 'Max'
  },
  {
    type: 'Cat',
    name: 'Karl'
  },
  {
    type: 'Dog',
    name: 'Tommy'
  }
]
pet = pets.find(pet => pet.type === 'Dog' && pet.name === 'Tommy')

console.log(pet) // { type: 'Dog', name: 'Tommy' }
`

12.默认参数值

早期的做法

function area(h, w) { if (!h) { h = 1; } if (!w) { w = 1; } return h * w }

ES6 以后的做法

function area(h = 1, w = 1) { return h * w }

13.箭头函数的简写

``let sayHello = (name) => {
return 你好，${name}
}

console.log(sayHello('前端小智'))
``

简写如下：

``let sayHello = name => 你好，${name}

console.log(sayHello('前端小智'))
``

14.隐式返回

let someFuncThatReturnSomeValue = (value) => { return value + value } console.log( someFuncThatReturnSomeValue('前端小智'))

简写如下：

let someFuncThatReturnSomeValue = (value) => ( value + value ) console.log(someFuncThatReturnSomeValue('前端小智'))

15.函数必须有参数值

function mustHavePatamMethod(param) { if (param === undefined) { throw new Error('Hey You must Put some param!'); } return param; }

以像这样重写:

mustHaveCheck = () => { throw new Error('Missing parameter!') } methodShoudHaveParam = (param = mustHaveCheck()) => { return param }

16.charAt() 简写

'SampleString'.charAt(0) // S // 简写 'SampleString'[0]

17.有条件的函数调用

`function fn1() {
console.log('I am Function 1')
}

function fn2() {
  console.log('I am Function 2')
}
/*
长的写法
*/
let checkValue = 3;
if (checkValue === 3) {
  fn1()
} else {
  fn2()
}
`

简短的写法：

(checkValue === 3 ? fn1 : fn2)()

17.Math.Floor 简写

`let val = '123.95'

console.log(Math.floor(val)) // 常规写法
console.log(~~val) // 简写
`

18.Math.pow 简写

Math.pow(2, 3) // 8 // 简写 2 ** 3 // 8

19.将字符串转换为数字

const num1 = parseInt('100') // 简写 console.log(+"100") console.log(+"100.2")

20.&& 运算

let value = 1; if (value === 1) console.log('Value is one') //OR In short value && console.log('Value is one')

21.toString 简写

let someNumber = 123 console.log(someNumber.toString()) // "123" // 简写 console.log(`${someNumber}`) // "123"

22.可选的链运算符（即将发布🍻）

现在有一个关于ECMAScript的新提议，值得了解。

let someUser = { name: 'Jack' } let zip = someUser?.address?.zip //可选链接，像 Swift

如果 zip是undefined ，则不会引发错误。

该语法还支持函数和构造函数调用

let address = getAddressByZip.?(12345)

如果getAddressByZip是调用它的函数，否则，表达式将以undefined的形式计算。

23. 使用对象的方式来替换 switch 语法

let fruit = 'banana'; let drink; switch (fruit) { case 'banana': drink = 'banana juice'; break; case 'papaya': drink = 'papaya juice'; break; default: drink = 'Unknown juice!' } console.log(drink) // banana juice

作者：xor 译者：前端小智来源：medium

原文：https://medium.com/javascript-in-plain-english/some-js-shortcuts-82bc2f56146e