Use the let/const

var“Variable promotion” occurs when a variable can be used before it is declared and has a value ofundefined. In my opinion, it is used when a declared variable is certain not to change later, even if there is not much difference in performanceconstThe code is much more readable.
constIn fact, it is not the value of the variable that is guaranteed to remain unchanged, but the data stored in the memory address to which the variable points.
The let variable points to a memory address that holds only a pointer to the actual data.

Deconstruction assignment

ES6The ability to extract values from arrays and objects and assign values to variables in a pattern is called Destructuring.
The benefit is that it solves the problem of accessing multiple nested object or array names, reducing the amount of code
supplementconstThe variable defined is not immutable data, but the stored reference address cannot be changed. Examples are as follows:

const person = { age: 22 }
person.age = 1
console.log(person.age) / / 1
Copy the code

See let and const for details

Declare multiple variables

// Declare variables
let age = 22;
let name = 'guodada';
let sex = 1;

// A better way (better)
let [age, name, sex] = [22.'hehe'.true]
console.log(age,name,sex) // 22, hehe, true
Copy the code

Used in objects

 const obj = {
    name: {
      firstName: 'Ming'.lastName: 'little red'}}// Extract variables
  const firstName = obj.name.firstName;
  const lastName = obj.name.lastName;

  // A better way (better)
  const {
    firstName,
    lastName
  } = obj.name;
Copy the code

Used in functions

  // Get the parameters in the parameter structure assignment, when the parameter is used
  function Destructuring({ name, age}){
    return {name, age} {name:name, age:age
  }

  const params = { name: 'guodada'.age:22 }
  Destructuring(params)
Copy the code

ES6 allows variables to be written directly to objects. The name of the property is the name of the variable and the value of the property is the value of the variable.

function f(x, y){
  return {x:x, y:y}
}

// better
function f(x, y){
  return {x, y};
}
f(1.2) // Object {x:1, y:2}
Copy the code

See you for moreDestruct assignment of variables

The use of extension characters

The ES6 extender can be used in many ways to make your code simpler and easier to understand. Here are some examples of common usage.

Usage in objects:

  let obj = {
    name: 'guodada'.age: 22.sex: 1
  }

  // Copy objects. Extension for shallow copy!!
  constcopy = { ... obj }Object. Assgin ({}, obj, {age: 18})
  constnewObj = { ... obj,age: 18 }

  // Combine structure assignment
  let{ sex, ... hehe } = objconsole.log(hehe) // hehe { name: 'guodata', age: 22}
Copy the code

Use in arrays

  const arr = [1.2.3];
  const arr2 = [4.5.6.4];

  // Copy the array. Extension for shallow copy!!
  const newArr = [...arr]; / /... [1,2,3] => equivalent to expanding array: 1,2,3

  // Merge arrays
  const conbineArr = [...arr, ...arr2];

  // combine the maximum function
  Math.max(... arr)// Implement array de-duplication with Set. Note: Arrays of objects such as JSON are not available;
  let arr3 = [...new Set(arr2)] / / (4 and 6)
Copy the code

The use of arrays

Use reduce instead`filter + map`

  const arr = [{
    sex: 1.age: 10
  }, {
    sex: 1.age: 19
  }, {
    sex: 0.age: 12
  }]

  const result = arr.reduce((list, item) = > {
    item.sex === 1 && list.push({
      sex: 'male'.age: item.age > 18 ? 'adult' : 'minor'
    })
    return list
  },[])
  console.log(result)
Copy the code

Basic usage

  const arr = [1.2.3.4];

  Array.isArray(arr) // Check whether it is an array

  arr.includes(2) // true determines whether the array contains an item

  arr.findIndex(d= > d === 3) // 2 Find the first member of the array that meets the criteria and return the array subscript

  arr.find(d= > d === 3) // 3 Find the first member of the array and return it. If not, return undefined

  // ES5 Filter Map forEach
  arr.every(d= > d > 2) // false Returns true if each item satisfies the condition

  arr.some(d= > d > 2) // true Returns true if one of the conditions is met
Copy the code

Find /findIndex: Finds the first member of the array that matches the criteria and then does not match.
Includes: Returns true/false, used more than indexOf

Common use of object to array:

const obj = { name: 'guodada' }
  
Object.keys(obj) // ['name']
Object.values(obj) // ['guodada']
Object.entries(obj) // [['name', 'guodada']]
Copy the code

`flat()`: Flat array, usually used to convert an array to a one-dimensional array.

const arr = [1.2[3.4]]

arr.flat() // [1, 2, 3, 4] flat array, default expansion one layer.

const arr2 = [1.2[3.4[5.6]]]

arr2.flat() // [1, 2, 3, 4, [5, 6]]
arr2.flat(2) // [1, 2, 3, 4, 5, 6] flat(3)
Copy the code

flatMap(): execute in arraymapMethod after executionflatI don’t use it very much. I can actually write itmapAfter writingflatIt’s a little bit more intuitive. Note compatibility issues!!

[2.3.4].flatMap(x= > [x, x * 2]) // [2, 4, 3, 6, 4, 8]
// 1. [2, 3, 4].map(d => [d, d * 2]) => [[2, 4], [3, 6], [4, 8]]
// 2. [[2, 4], [3, 6], [4, 8]].flat()
Copy the code

Additional implementation methods for flattening:

function flatten(arr) {
 return arr.reduce((list, item) = > list.concat(Array.isArray(item) ? flat(item) : item), [])
}
Copy the code

Js array depth deduplicates

 var arr = [
  {id: 1.name: "Zhou yu 1 '},
  {id: 3.name: 'Wang Zhaojun 1'},
  {id: 2.name: "Li bai 1 '},
  {id: 1.name: "Zhou yu 2 '},
  {id: 2.name: "Li bai 1 '},
  {id: 3.name: 'Wang Zhaojun 2'}];let newobj = {}; 
arr = arr.reduce((preVal, curVal) = > {
	newobj[curVal.name] ? ' ' : newobj[curVal.name] = preVal.push(curVal); 
	return preVal 
}, [])
console.log(arr)
Copy the code

Simple array de-duplication

 let arr = [1.2.3.4.5.2.4.3.0.0]

  function Uniq(arr = []) {
    return arr.reduce((t, v) = > t.includes(v) ? t : [...t, v], []);
  }
  console.log(Uniq(arr)) / / 1,2,3,4,5,0
Copy the code

Template string

Use a lot of attention is not compatible with IE!

const name = 'guodada'

const newStr = `welcome ${name}` // welcome guodada

// the same as
const newStr = 'welcome ' + name
Copy the code

Use async/await

async/awaitIn factgeneratorSyntax sugar, mainly used to solve asynchronous problems, specific online many articles have been introduced, here is not to do more explanation.

async function test() {
  const data = await axios.get('https://randomuser.me/api/')
  console.log(data)
}
/ / is equivalent to
function test() {
  axios.get('https://randomuser.me/api/').then(res= > console.log(res)) // Axios is also a promise object
}

/ / try/catch
async function test() {
  try {
    const data = await axios.get('https://randomuser.me/api/')
    console.log(data)
  } catch (err) {
    console.log(err)
  }
}
Copy the code

Ps is useful, but sometimes it is not suitable for situations, such as executing the next statement after await while pulling the list and user information need to be processed simultaneously. This is not what we want to see. Solutions are as follows:

/ / Promise. All
const [result1, result2, result3] = await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])
Copy the code

Portal: Async

Encapsulate code with class

It is mainly to remove the code logic, making it more palatable. At the same time, the class form makes the structure clearer, for example:

class MyForm {
  / * * *@func defaultLimit- Default form input restriction, return true * if value is null@param {Number} type- Represents the node of form type! *@param {String} value- The value to be verified *@return Boolean* * Verify the output based on the Type attribute * 10 ≤x≤50 integer x 2-1000 ≤x≤2000 integer x 3 1≤x integer x 4 0≤x≤10 */
  static defaultLimit(type, value) {
    const typeLimitMap = {
      1: /^(\d|[1-4]\d|50)$/g.2: / ^ -? (\ d {1, 3} | 1000) $| ^ (1 - | \ d {3} | 2000) $/.3: /^[1-9]\d*$/.4: value= > value <= 10 && value >= 0 // 0≤ x ≤ 10 can be a decimal
    }
    if(! typeLimitMap[type] || ! value)return true
    if (typeof typeLimitMap[type] === 'function') return typeLimitMap[type](value)
    else return typeLimitMap[type].test(value)
  }

  / * * *@func translateLimit- Conversion operator *@param {String} operator- Operator *@param {*} value- Matched value *@param {*} compareValue- Matched value *@return Boolean= '*' * 'eq' : 'ne' : 'indicates a' * 'gt' : '>' * 'lt' : '<' * 'ge' : 'or' * 'le' : ' 'or less * /
  static translateLimit(operator, value, compareValue) {
    const type = {
      eq: value === compareValue,
      ne: value ! == compareValue,gt: value > compareValue,
      lt: value < compareValue,
      ge: value >= compareValue,
      le: value <= compareValue
    }
    if (!Object.keys(type).includes(operator) || ! value || value ===The '-') return true
    return type[operator]
  }

  // ...
}

export default MyForm
Copy the code

Use:

import MyForm from './MyForm'

MyForm.defaultLimit(1.20)
Copy the code

static: static property, class can call directly;
constructor: is called when the class is instantiatednew MyForm()I didn’t use it here

Read the basic syntax of Class for more information

Optimize if/else statements

When the logic or | |, find true item stops processing, and returns the value of the item, otherwise performed, and returns the value of the last item.

When a logical am& & is found, processing is stopped and the value of the item is returned.

const a = 0 || null || 3 || 4
console.log(a) / / 3

const b = 3 && 4 && null && 0
console.log(b) // null
Copy the code

To reduce`if/else`Hellish call

const [age, name, sex] = [22.'guodada'.1]

if (age > 10) {
  if (name === 'guodada') {
    if (sex > 0) {
      console.log('all right')}}}// better use &&
if (age > 10 && name === 'guodada' && sex > 0) {
  console.log('all right')}// Or (too long is not recommended)
age > 10 && name === 'guodada' && sex > 0 && console.log('all right')
Copy the code

Mention the React pit, in Render

render(){
  const arr = []
  return arr.length && null
}
// Render 0!
// Boolean/undefind/null/NaN etc will not render. We can use it!! Forcing casts to Boolean solves this problem
return!!!!! arr.length &&null

// Use && to control the rendering of components
this.state.visible && <Modal />
Copy the code

use`Array.includes`To handle multiple conditions:

const ages = [18.20.12]

if (age === 18 || age === 12) {
  console.log('match')}// better
if ([18.12].includes(age)) {
  console.log('match')}Copy the code

Ternary operators can be used for less judgment logic:

const age = 22
const isAdult = age >= 18 ? true : false // Const isAdult = age > 18

const type = age >= 18 ? 'adult' : 'child'
Copy the code

Optimize switch/case statements

Switch /case is better structured than if/else code, but just like it can be quite verbose.

Here’s an example from our own actual project: Sometimes we might need to perform different re validation for different types of fields to prevent users from typing incorrectly. Such as

const [type, value] = [1.'20']
/** * Verify the output based on the type attribute * 10 ≤x≤50 integer * 2-1000 ≤x≤2000 integer * 3 1≤x integer */

function func1(type, value) {
  if (type === 1) {
    return /^(\d|[1-4]\d|50)$/.test(value)
  } else if (type === 2) {
    return / ^ -? (\ d {1, 3} | 1000) $| ^ (1 - | \ d {3} | 2000) $/.test(value)
  } else if (type === 3) {
    return /^[1-9]\d*$/.test(value)
  } else {
    return true
  }
}

func1(type, value)

/ / use the switch/case
function fun2(type, value) {
  switch (type) {
    case 1:
      return /^(\d|[1-4]\d|50)$/.test(value)
    case 2:
      return / ^ -? (\ d {1, 3} | 1000) $| ^ (1 - | \ d {3} | 2000) $/.test(value)
    case 3:
      return /^[1-9]\d*$/.test(value)
    default:
      return true
  }
}

func2(type, value)
Copy the code

How can we solve this problem subtly, as follows:

function func3(type, value) {
  const limitMap = {
    1: /^(\d|[1-4]\d|50)$/g.2: / ^ -? (\ d {1, 3} | 1000) $| ^ (1 - | \ d {3} | 2000) $/.3: /^[1-9]\d*$/
  }
  return limitMap[type].test(value)
}
Copy the code

Using objects to match property values reduces your code and makes your code look cleaner. You can also use a Map object to match.

function func4(type, value) {
  const mapArr = [
    [1./^(\d|[1-4]\d|50)$/g],
    [2./ ^ -? (\ d {1, 3} | 1000) $| ^ (1 - | \ d {3} | 2000) $/],
    [3./^[1-9]\d*$/]]const limitMap = new Map(mapArr)
  return limitMap.get(type).test(value)
}
Copy the code

MapIs a key-value pair of data structure objects, which match more strictly. It will tell if you are passing a string or a number, for example:

limitMap.get(1) // /^(\d|[1-4]\d|50)$/g
limitMap.get('1') // undefined
Copy the code

See Set and Map for more details

other

Function parameter default value

function func(name, age = 22) {}
/ / is equivalent to
function func(name, age) {
  age = age || 12
}
Copy the code

Use === instead of ==. Actually, everyone knows that…
Arrow functions, the most common syntax in ES6.

return boolean

const a = 1
return a === 1 ? true : false
// It's a waste of time
return a === 1
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Write elegant code in ES6

Use the let/const

Deconstruction assignment

Declare multiple variables

Used in objects

Used in functions

ES6 allows variables to be written directly to objects. The name of the property is the name of the variable and the value of the property is the value of the variable.

See you for moreDestruct assignment of variables

The use of extension characters

Usage in objects:

Use in arrays

The use of arrays

Use reduce instead`filter + map`

Basic usage

Common use of object to array:

`flat()`: Flat array, usually used to convert an array to a one-dimensional array.

Additional implementation methods for flattening:

Js array depth deduplicates

Simple array de-duplication

Template string

Use async/await

Encapsulate code with class

Optimize if/else statements

To reduce`if/else`Hellish call

Mention the React pit, in Render

use`Array.includes`To handle multiple conditions:

Ternary operators can be used for less judgment logic:

Optimize switch/case statements

How can we solve this problem subtly, as follows:

other

Function parameter default value

return boolean

The article reprinted the bigwigs of worship,The original link

ES6 Excellent article links:ES6 Complete user manual

Write elegant code in ES6

Use the let/const

Deconstruction assignment

Declare multiple variables

Used in objects

Used in functions

ES6 allows variables to be written directly to objects. The name of the property is the name of the variable and the value of the property is the value of the variable.

See you for moreDestruct assignment of variables

The use of extension characters

Usage in objects:

Use in arrays

The use of arrays

Use reduce insteadfilter + map

Basic usage

Common use of object to array:

flat(): Flat array, usually used to convert an array to a one-dimensional array.

Additional implementation methods for flattening:

Js array depth deduplicates

Simple array de-duplication

Template string

Use async/await

Encapsulate code with class

Optimize if/else statements

To reduceif/elseHellish call

Mention the React pit, in Render

useArray.includesTo handle multiple conditions:

Ternary operators can be used for less judgment logic:

Optimize switch/case statements

How can we solve this problem subtly, as follows:

other

Function parameter default value

return boolean

The article reprinted the bigwigs of worship,The original link

ES6 Excellent article links:ES6 Complete user manual

Related Posts

Self-built VUE component AIR-UI (16) – Packages to build pub tasks

Exports in Node and module.exports in Node

React Notes

Use reduce instead`filter + map`

`flat()`: Flat array, usually used to convert an array to a one-dimensional array.

To reduce`if/else`Hellish call

use`Array.includes`To handle multiple conditions: