Basic usage of ES6

This article will focus on explaining es6 to help you become familiar with es6 and master the writing method of es6.

1，let

There is no variable promotion. The variable is used before the variable is defined. This is very different from var.

Repeated declarations are not allowed

Only valid in block-level scope

Temporary dead zone

        console.log(a)  //报错，因为在未定义前调用
        let a = 1
        console.log(a) //1

2，const

Declaring a constant means that the variable cannot be modified after it is declared.

const a = 1
a = 2 //报错，常量声明后无法修改

3. Destructuring assignment

Deconstruct the array on the right in turn and assign it to the variables in the previous array

let [a,b,c]=[1,2,3] 
const.log(a) //1
const.log(b) //2
const.log(c) //3

4. Template string

You can write variables directly in the string, ${}, and you don’t need to use the plus sign to splice it as before.

let a = "张三"
console.log(`我是${a}`) // 我是张三

5. Extended operations

Array destructuring: deconstruct each item of the array into the original data type 1 through ...array

let a = [1,2,3,4]
console.log(...a) //1234

Object deconstruction: Deconstruct each item in the object through {...object}, but please note that the deconstructed object is still an object, so we must wrap it with {} at the outermost

const obj = {name:"张三",age:18}

console.log({...obj}) //{name:"张三",age:18}

修改name的值

const obj1 = {...obj,name:"李四"}

console.log(obj1)//{name:"张三",age:18}

原理就是，先解构，在对象里在加入一个属性名称相同的值，后覆盖前，达成修改的效果

6.Object extension

If the attribute name of the object is consistent with the attribute value variable name, it can be abbreviated

var a=1
var  obj = {a:a}
可以简写为 

var obj = {a}  

console.log(obj) //{a:1}

If the attribute value of the object is a function, function can be omitted

var obj = {fh:function(){}}

可以简写为
var obj  =  {fn(){}}

Do destructuring assignment on the function

var obj  = {name:"张三",age:18}
function fn (naem,age){
    
    console.log(name,age)
}
调用函数
fn(obj) //"张三",18    。。直接传入一个对象，函数帮我解构了，相当于传入了 fn(obj.name,obj.age),
要注意的是，形参必须和我们对象的属性一样才可以

7.set

Similar to an array, but not an array. Set has an attribute, that is, the data in it cannot be repeated, so it can be used to deduplicate arrays.

var a = [ 1,2,3,4,4]
var b = new Set(a)
在进行解构重新赋值给一个数组，这样就达到了去重的效果

var c  = [...b]

console.log(c)// [1,2,3,4]

You can add attributes through the add method

var a = new Set([1,2,3])
a.add(3).add(5)

console.log(a) //[1,2,3,4,5] //添加的时候，如果添加了重复的值，会自动去重

8.map

The map method takes out each item in the attribute and executes the callback function

var arr = [1,2,3,4]
arr.map((item)=>{  //item就相当于数组里的每一项的值，所以会依次打印 1,2,3,4
console.log(item)
})

9.promise asynchronous processing

Handling asynchronous code

let p=new promise(function(resolve,reject){ //传入参数resolve和reject，这2个是固定写法
		 
		resolve(data) //调用resolve函数，传入我们要异步处理的数据，异步代码执行成功调用
        reject(data) //调用reject函数，传入data，异步代码执行失败调用
		})

p.then(function(data){  //调用.then方法，方法里接收一个函数，函数接收的参数就是我们在上面resolve传递的值
		console.log(data)
	},(data)=>{
    console.log(data)  //当执行错误时就执行这个函数
}） //.then方法里接收2个函数，第一个函数是执行成功后执行，第二个函数是执行失败后执行，这样就能对异步进行处理了，当异步执行完后，才会执行.then方法里的代码。

10.async and await

It is also used to handle asynchronous

async  function sc(){  //在函数前加上async，将这个函数变为异步函数
		await 异步代码  //这里写异步代码，注意异步代码前面要加await，才能生效
        console.log(123) //当前面的异步代码执行完成后，才会执行console.log()，这样就实现了对异步的处理
		}