“This is the 15th day of my participation in the August Gwen Challenge.

This article focuses on some JavaScript coding techniques that are commonly used at work. Keep it in your mind!

First, we recommend a vscode plugin, quokka.js, which is a debugging code wizard. The plugin is used to execute JavaScript or TypeScript code immediately as you type it

Arrow function

Shorthand rule:

  1. You only have one argument, so you don’t have to write the parentheses
  2. There is only one return value. Curly braces and return can be omitted
let arr=[1.2.3]

arr.filter((item) = >{
    return item >1
})

// There is only one argument, the parentheses can be left out
arr.filter(item= >{
    return item>1
})
// Only one value is returned. Curly braces and return can be omitted
arr.filter(item= >item>1)
Copy the code

Master the common operation methods of arrays

Having common array methods in mind and not looking at the API while writing can improve your coding efficiency, since these methods are used every day

  • every
  • some
  • filter
  • map
  • forEach
  • find
  • findIndex
  • reduce
  • includes

Master common string manipulation functions

  • trim
  • startsWidth
  • includes
let str="Hello JueJue "
// contains substrings
console.log(str.includes("Hello"))
// start with a substring
console.log(str.startsWith("Hello"))
// remove closing Spaces
console.log(str.trim())
Copy the code

Extended operator

Very useful yo, the following two use scenarios: to deconstruct an array

// Array decrement
function removeRepeat(arr){
    return  [...new Set(arr)]
}
// Find the maximum value of the array
Math.max(... arr)Math.min(... arr)Copy the code

Deconstruct the object

//react is used to pass in multiple attributes at once
let props={name:'Ben'.age:10.sex:0}
const greeting=<Greeting {. props} / >

// Combine objects using object.assign instead
let defaultParams={
    pageSize:1.pageNumber:10.sort:1
}

letreqParams={ ... defaultParams,phone:'15196255885'
}
Copy the code

Object shorthand

The key of the object has the same name as the value of the object

let id,age,sex

let person={
    id,
    age,
    sex
}
Copy the code

Deconstruction assignment

  • Used of function parameters
  • Used to deconstruct objects

We could use a little less code

Class Spirit{constructor({x=0,y=0,w=10,h=10,rotate=0}){this.x=x this.y=y this.w=w this.h=h this.rotate= 0} } draw(){ const {x,y,w,h,rotate}=this console.log("draw -> x,y,w,h,rotate", x,y,w,h,rotate) } }Copy the code

Master the method of data type conversion

JS people generally do not have a type concept, for the distinction between Number and String is not very sensitive, in fact, JS data type is quite important, do not pay attention to it may be wrong, so I hope you remember the following method

The Number and String types interconvert

I generally like to use constructor transforms

Number('001')  / / - > 1
String('1')   / / - > 1
Copy the code

Keep n decimal places

function cutNumber(value,n=2){// Keep 2 decimal places by default
    return Number(value).toFixed(n)
}
Copy the code