【相關(guān)學(xué)習(xí)推薦：javascript視頻教程】

廢話不多話，在本文中，列出了一些比較常用或者實用的的 JavaScript 代碼片段，希望對你們有所幫助。

1.三元運算符

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

****** 以下是簡短版本 ******

let someThingTrue = true
someThingTrue ?  handleTrue() : handleFalse()復(fù)制代碼

2.短路或運算

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

console.log(expectingSomeValue) // SomeDefaultValue復(fù)制代碼

3. 條件成立

let someValue = true
if (someValue) {
  console.log('條件成立!')
}復(fù)制代碼

4. for 循環(huán)

for (let i = 0; i < 1e2; i++) { // 代替 i<100 是不是有點酷
}復(fù)制代碼

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)
}復(fù)制代碼

5. 值到對象的映射

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

console.log(obj) // {x: "x", y: "y"}復(fù)制代碼

6. Object.entries()

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

*** 輸出 ***
[ [ 'producer', '大遷世界' ], [ 'name', '前端小智' ], [ 'rating', 9 ] ]復(fù)制代碼

7. Object.values()

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

*** 輸出 ***

[ '大遷世界', '前端小智', 9 ]復(fù)制代碼

8. 模板字面量

let name = '前端小智'
let age = 20
var someStringConcatenateSomeVariable = `我是 ${name}，今年 ${age} 歲`
console.log(someStringConcatenateSomeVariable)復(fù)制代碼

9. 解構(gòu)賦值

import { observable, action, runInAction } from 'mobx';復(fù)制代碼

10.多行字符串

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

console.log(multiLineString)復(fù)制代碼

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' }復(fù)制代碼

12.默認(rèn)參數(shù)值

早期的做法

function area(h, w) {
  if (!h) {
    h = 1;
  }
  if (!w) {
    w = 1;
  }
  return h * w
}復(fù)制代碼

ES6 以后的做法

function area(h = 1, w = 1) {
  return h * w
}復(fù)制代碼

13.箭頭函數(shù)的簡寫

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

console.log(sayHello('前端小智'))復(fù)制代碼

簡寫如下：

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

console.log(sayHello('前端小智'))復(fù)制代碼

14.隱式返回

let someFuncThatReturnSomeValue = (value) => {
  return value + value
}
console.log(
someFuncThatReturnSomeValue('前端小智'))復(fù)制代碼

簡寫如下：

let someFuncThatReturnSomeValue = (value) => (
  value + value
)
console.log(someFuncThatReturnSomeValue('前端小智'))復(fù)制代碼

15.函數(shù)必須有參數(shù)值

function mustHavePatamMethod(param) {
  if (param === undefined) {
    throw new Error('Hey You must Put some param!');
  }
  return param;
}復(fù)制代碼

以像這樣重寫:

mustHaveCheck = () => {
  throw new Error('Missing parameter!')
}
methodShoudHaveParam = (param = mustHaveCheck()) => {
  return param
}復(fù)制代碼

16.charAt() 簡寫

'SampleString'.charAt(0) // S
// 簡寫
'SampleString'[0]復(fù)制代碼

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()
}復(fù)制代碼

簡短的寫法：

(checkValue === 3 ? fn1 : fn2)()復(fù)制代碼

17.Math.Floor 簡寫

let val = '123.95'

console.log(Math.floor(val)) // 常規(guī)寫法
console.log(~~val) // 簡寫復(fù)制代碼

18.Math.pow 簡寫

Math.pow(2, 3) // 8
// 簡寫
2 ** 3 // 8復(fù)制代碼

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

const num1 = parseInt('100')
// 簡寫
console.log(+"100")
console.log(+"100.2")復(fù)制代碼

20.&& 運算

let value = 1;
if (value === 1)
  console.log('Value is one')
//OR In short 
value && console.log('Value is one')復(fù)制代碼

21.toString 簡寫

let someNumber = 123
console.log(someNumber.toString()) // "123"
// 簡寫
console.log(`${someNumber}`) // "123"復(fù)制代碼

22.可選的鏈運算符（即將發(fā)布

總結(jié)

以上是生活随笔為你收集整理的2020高频实用的 JavaScript 片段的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。