2021 High-frequency and practical JavaScript snippets

【Related learning recommendations:javascript video tutorial】

No more nonsense. In this article, I list some commonly used or practical JavaScript code snippets. I hope it will be helpful to you.

1. Ternary operator

let someThingTrue = true if(someThingTrue){ handleTrue() }else{ handleFalse() } ****** 以下是简短版本 ****** let someThingTrue = true someThingTrue ? handleTrue() : handleFalse()复制代码

2. Short circuitoroperation

const defaultValue = "SomeDefaultValue" let someValueNotSureOfItsExistance = null let expectingSomeValue = someValueNotSureOfItsExistance || defaultValue console.log(expectingSomeValue) // SomeDefaultValue复制代码

3. Condition is established

let someValue = true if (someValue) { console.log('条件成立!') }复制代码

4.forLoop

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. Value to object mapping

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. Template literal

let name = '前端小智' let age = 20 var someStringConcatenateSomeVariable = `我是 ${name}，今年 ${age} 岁` console.log(someStringConcatenateSomeVariable)复制代码

9. Destructuring assignment

import { observable, action, runInAction } from 'mobx';复制代码

10. Multi-line string

let multiLineString = `some string\n with multi-line of\n characters\n` console.log(multiLineString)复制代码

11.Array.find abbreviation

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.Default parameter value

Early approach

function area(h, w) { if (!h) { h = 1; } if (!w) { w = 1; } return h * w }复制代码

ES6 future approach

function area(h = 1, w = 1) { return h * w }复制代码

13.Abbreviation of arrow function

let sayHello = (name) => { return `你好，${name}` } console.log(sayHello('前端小智'))复制代码

The abbreviation is as follows:

let sayHello = name => `你好，${name}` console.log(sayHello('前端小智'))复制代码

14. Implicit return

let someFuncThatReturnSomeValue = (value) => { return value + value } console.log( someFuncThatReturnSomeValue('前端小智'))复制代码

The abbreviation is as follows:

let someFuncThatReturnSomeValue = (value) => ( value + value ) console.log(someFuncThatReturnSomeValue('前端小智'))复制代码

15. The function must have parameter values

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

to look like this Rewrite:

mustHaveCheck = () => { throw new Error('Missing parameter!') } methodShoudHaveParam = (param = mustHaveCheck()) => { return param }复制代码

16. charAt() abbreviation

'SampleString'.charAt(0) // S // 简写 'SampleString'[0]复制代码

17. Conditional function call

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() }复制代码

Short form:

(checkValue === 3 ? fn1 : fn2)()复制代码

17. Math.Floor abbreviation

let val = '123.95' console.log(Math.floor(val)) // 常规写法 console.log(~~val) // 简写复制代码

18.Math.pow abbreviation

Math.pow(2, 3) // 8 // 简写 2 ** 3 // 8复制代码

19.Convert string to number

const num1 = parseInt('100') // 简写 console.log(+"100") console.log(+"100.2")复制代码

20.&& operation

let value = 1; if (value === 1) console.log('Value is one') //OR In short value && console.log('Value is one')复制代码

21. toString abbreviation

let someNumber = 123 console.log(someNumber.toString()) // "123" // 简写 console.log(`${someNumber}`) // "123"复制代码

22. Optional chain operator (coming soon

The above is the detailed content of 2021 High-frequency and practical JavaScript snippets. For more information, please follow other related articles on the PHP Chinese website!