国际完美世界下载,已完结小说排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

22+高頻實(shí)用的JavaScript片段（2020年）

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

公司主營業(yè)務(wù)：網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出茂名免費(fèi)做網(wǎng)站回饋大家。

1.三元運(yùn)算符

 
 
 
 
  
  
  
  let someThingTrue = true   
  
  
  if(someThingTrue){   
  
  
      handleTrue()   
  
  
  }else{   
  
  
      handleFalse()   
  
  
  }   
  
  
     
  
  
  ****** 以下是簡短版本 ******   
  
  
     
  
  
  let someThingTrue = true   
  
  
  someThingTrue ?  handleTrue() : handleFalse()

2.短路或運(yùn)算

 
 
 
 
  
  
  
  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 < 1e2; i++) { // 代替 i<100 是不是有點(diǎn)酷   
  
  
  }   
  
  
  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.默認(rèn)參數(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.&& 運(yùn)算

 
 
 
 
  
  
  
  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.可選的鏈運(yùn)算符(即將發(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ù)，否則，表達(dá)式將以undefined的形式計(jì)算。

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

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。

網(wǎng)站名稱：22+高頻實(shí)用的JavaScript片段（2020年）
網(wǎng)頁路徑：http://fisionsoft.com.cn/article/coegoee.html

新聞中心

其他資訊