ES6- Development skills

What is the

Summarized some work in ES6 related development skills, can facilitate everyone to check the missing, recall the relevant knowledge points

1. Let const and var

1. Let value is variable, variable promotion (temporary dead zone), no initial promotion
2. Const is immutable (object property is mutable), has variable promotion (temporary dead zone), has no initialization promotion
3. Var is variable, variable promotion, initialization promotion

var name = 'Wang Xiaohua'
function fn () {
  console.log(name)
  let name = 'Li Xiaoming'
}
fn() // Cannot access 'name' before initialization
Copy the code

2. Extend operators

Purpose: Merge elements

const arr1 = [1.2.3], arr2 = [4.5.6];

const arr = [...arr1, ...arr2]
Copy the code

3. Remaining parameters

Purpose: Set of incoming parameters

function fn(name, ... params) {... } fn('Wang Xiaohua'.'11'.'Third year')
Copy the code

4. Template string

Purpose: variable and string concatenation

const name = "Wang Xiaohua"
console.log(`hello, ${name}`)
Copy the code

5. Properties of the object with the same name

Purpose: When the attribute name and variable name of the object are the same, the abbreviation can be unified

const name =  "Wang Xiaohua";
const age = "100"
const person = {name, age}
Copy the code

6. Deconstruct assignments

Purpose: Simplify the operation of fetching the value of an attribute

const person = {name: "Wang Xiaohua".age: 100}
const {name, age} = person;
const {name: realName, age} = person;
Copy the code

7. Arrow function

Purpose: Completely fixed scope pointing for this, always pointing to lexical scope, i.e. external callers.

• 1. Arrow functions are not constructors; you cannot use new
• 2. Arrow functions do not have their own this
• 3. Arrow functions have no arguments objects
• 4. Arrow functions have no prototype objects

const x = x= > x * x;

const fn = name= > ({ name: name })
Copy the code

8. includes

Purpose: Checks whether an element exists in an array, returns True if it does, False otherwise

const flag = [1.2.3.4].includes("3")
Copy the code

9. for… In and for… of

1. for… In traverses objects and arrays
2. for… Of can only iterate over groups of numbers, not non-iterable objects

const person = {
 'name': 'wxh'.'age': 30.'gender': 'man'
}
for(let key in person) {
  console.log(key,'= = =', person[key])
}

const arr = [1.2.3.4]
for(let item of arr) { 
    console.log(item);
}
Copy the code

10. Object.values

Purpose: Get the value of an object

const obj = {
  name: 'Wang Xiaohua'.age: 33.gender: 'male'
}

const values = Object.values(obj)
console.log(values) // [' Wang Xiaohua ', 33, 'male']
Copy the code

11. The find and findIndex

USES:

• Find: returns the element found, undefined if not found
• FindIndex: Returns the index of the element found, or -1 if not found

Const findArr = [{name: 'Wang Xiaotao ', age: '24'}, {name:' Li Xiaoming ', age: '32'}, {name: 'Zhang Xiaotao ', age: '34'}] const name = findarr.find (({name}) => name === 'li ') const index = findarr.findIndex (({name}) => name === = Log (name) // {name: 'Li Xiaoming ', age: '32'} console.log(index) // 2Copy the code

12. Promise

The Promise object is used to represent the final state and result of an asynchronous operation

1. Promise is an object
2. Asynchronous operations
3. Final state and result value

function requestData () {
  // simulate the request
  return new Promise((resolve, reject) = > {
    setTimeout(() = > {
      resolve('Wang Xiaohua')},1000)
  })
}

requestData().then(res= > {
  console.log(res) // Output 'Wang Hua' after one second
}, err= > {
  console.log(err)
})
Copy the code

function requestData () {
  // simulate the request
  return new Promise((resolve, reject) = > {
    setTimeout(() = > {
      reject('Li Xiaoming')},1000)
  })
}

requestData().then(res= > {
   console.log(res)
}, err= > {
   console.log(err) // Output 'Li Xiaoming' after one second
})
Copy the code

13. async/await

Purpose: To perform asynchronous operations synchronously

• Await can only be used in async functions
• “Await” is best followed by Promise, and if it is followed by a normal function it will be executed directly
• The async function returns a Promise

function fn1 () {
  return new Promise((resolve, reject) = > {
    setTimeout(() = > {
      resolve(5)},1000)})}function fn2 (data) {
  return new Promise((resolve, reject) = > {
    setTimeout(() = > {
      resolve(data * 10)},2000)})}async function req () {
  const data1 = await fn1() // Wait 1 second for the data to return and then proceed
  const data2 = await fn2(data1) // Take data1 to request 2 seconds, go down
  console.log(data2) Output 50 after a total of 3 seconds
}
req()
Copy the code

conclusion

Methods are very basic, specific in the development of flexible use