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 循環(huán)

for?(let?i?=?0;?i?}

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. 解構(gòu)賦值

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.默認參數(shù)值

早期的做法

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.箭頭函數(shù)的簡寫

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.函數(shù)必須有參數(shù)值

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.有條件的函數(shù)調(diào)用

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))?//?常規(guī)寫法
console.log(~~val)?//?簡寫

18.Math.pow ?簡寫

Math.pow(2,?3)?//?8
//?簡寫
2?**?3?//?8

19.將字符串轉(zhuǎn)換為數(shù)字

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.可選的鏈運算符（即將發(fā)布?）

現(xiàn)在有一個關(guān)于ECMAScript的新提議，值得了解。

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

如果 zip是undefined ，則不會引發(fā)錯誤。

該語法還支持函數(shù)和構(gòu)造函數(shù)調(diào)用

let?address?=?getAddressByZip.?(12345)

如果getAddressByZip是調(diào)用它的函數(shù)，否則，表達式將以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

學(xué)習(xí)交流

• 關(guān)注公眾號【前端宇宙】,每日獲取好文推薦
• 添加微信,入群交流