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

红太狼 2022-12-03 13:25 135阅读 0赞

废话不多话，在本文中，列出了一些比较常用或者实用的的 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

### 学习交流 ###

*  关注公众号【前端宇宙】,每日获取好文推荐
 *  添加微信,入群交流

![format_png][]

“在看和转发”就是最大的支持

[format_png]: /images/20221123/85a248fa2cbc4a8cb40be72f68729d53.png