2021 High-frequency and practical JavaScript snippets

coldplay.xixi
Release: 2021-01-04 11:40:01
forward
2061 people have browsed it

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()复制代码
Copy after login

2. Short circuitoroperation

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

3. Condition is established

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

4.forLoop

for (let i = 0; i < 1e2; i++) { // 代替 i<100 是不是有点酷 }复制代码
Copy after login
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) }复制代码
Copy after login

5. Value to object mapping

let x='x',y='y' let obj = {x,y} console.log(obj) // {x: "x", y: "y"}复制代码
Copy after login

6. Object.entries()

const credits = { producer: '大迁世界', name: '前端小智', rating: 9 } const arr = Object.entries(credits) console.log(arr) *** 输出 *** [ [ 'producer', '大迁世界' ], [ 'name', '前端小智' ], [ 'rating', 9 ] ]复制代码
Copy after login

7. Object.values()

const credits = { producer: '大迁世界', name: '前端小智', rating: 9 } const arr = Object.values(credits) console.log(arr) *** 输出 *** [ '大迁世界', '前端小智', 9 ]复制代码
Copy after login

8. Template literal

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

9. Destructuring assignment

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

10. Multi-line string

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

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' }复制代码
Copy after login

12.Default parameter value

Early approach

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

ES6 future approach

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

13.Abbreviation of arrow function

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

The abbreviation is as follows:

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

14. Implicit return

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

The abbreviation is as follows:

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

15. The function must have parameter values

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

to look like this Rewrite:

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

16. charAt() abbreviation

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

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

Short form:

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

17. Math.Floor abbreviation

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

18.Math.pow abbreviation

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

19.Convert string to number

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

20.&& operation

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

21. toString abbreviation

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

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!

Related labels:
source:juejin.im
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!