关于javascript:22-高频实用的-JavaScript-片段-2020年

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

点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

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

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://medium.com/javascript…

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。