Common features of ES6

es6 Common features

1. let and const command

• let Declared variables produce block level scopes

   var a = 2
    {
    
      let b = 1
      console.log(b) // 1
    }
    console.log(a) // 2
    console.log(b) // b is not defined

• let You cannot declare a variable repeatedly （ The same scope ）

 {
    
      let b = 1
      let b = 2
      console.log(b) // error Parsing error: Identifier 'b' has already been declared
    }

• let No variable promotion
  var The command will happen “ Variable Promotion ” The phenomenon , That is, variables can be used before they are declared , The value is undefined. let Command changes the grammatical behavior , The variables it declares must be used after declaration , Otherwise, an error will be reported

console.log(a); //undefined
var a= 2;
console.log(b); // ReferenceError: bar is not defined
let b=  2;

• const Are constants declared , Once declared, the value cannot be changed , And must be initialized when declaring

  const a 
    a = 1
    console.log(a) // error Parsing error: Const declarations require an initialization value

 const a = 1
    a = 2
    console.log(a) // error 'a' is constant

2. Arrow function
Basic usage （ For functions that execute only one statement with one parameter ,（） and {} It can be omitted ）

 No parameter ：() => {
    }
 Single parameter ：x => {
    }
 Multiple parameters ：(x, y) => {
    }

Arrowhead function this Point to the problem

• ES6 Arrow function this The point of is the object in the context this Point to , Occasionally there is no context object ,this Point to window
• call,apply,bind And other methods can't change the arrow function this The direction of

demo：
aa It's a global function , There is no object that directly calls it , Nor does it use strict patterns ,this Point to window

 function aa() {
    
        console.log(this); // window 
    }
    aa();

hello It's a global function , There is no object that directly calls it , But a strict pattern is specified （‘use strict’）,this Point to undefined

function aa() {
    
        'use strict';
        console.log(this); //undefined
    }
    aa();

aa The direct caller is obj, first this Point to obj,setTimeout Anonymous functions in have no direct callers ,this Point to window

 const obj = {
    
        num: 10,
        aa: function () {
    
            console.log(this); // obj
            setTimeout(function () {
    
                console.log(this); // window
            });
        }
    }
    obj.aa();

aa The direct caller is obj, first this Point to obj,setTimeout Arrow function ,this Point to the nearest function this Point to , That is also obj

const obj = {
    
        num: 10,
        aa: function () {
    
            console.log(this); // obj
            setTimeout( () => {
    
                console.log(this); // obj
            });
        }
    }
    obj.aa();

aa It's a normal function , Inside this Point to the object that directly calls it obj.bb It's the arrow function ,this Should point to the context function this The direction of , There is no function object in the context , By default window, and window There's no num This variable , So back NaN

const obj = {
    
        num: 10,
        aa() {
    
            return this.num * 2
        },
        bb: () => 2 * this.num
    }
    console.log(obj.aa()) // 20
    console.log(obj.bb()) // NaN

3. Object Object.assign()

1. Merge of objects
   Object.assign() The first parameter of the method is the target object , Later parameters are all source objects

    const target = {
     a: 1 };
    const source1 = {
     b: 2 };
    const source2 = {
     c: 3 };
    Object.assign(target, source1, source2);
    console.log(target); //{a: 1, b: 2, c: 3}

Be careful , If the target object has the same property as the source object , Or multiple source objects have properties with the same name , Then the following properties will overwrite the previous properties

    const target = {
     a: 1 , b: 1};
    const source1 = {
     b: 2 , c:2};
    const source2 = {
     c: 3 };
    Object.assign(target, source1, source2);
    console.log(target); //{a: 1, b: 2, c: 3}

If there is only one parameter ,Object.assign() This parameter will be returned directly

    const target = {
     a: 1 , b: 1};
    const source1 = {
     b: 2 , c:2};
    const source2 = {
     c: 3 };
    Object.assign(target);
    console.log(target); //{a: 1, b: 1}

2. Add properties to the object

 const arr = [{
    
            name: 'tom',
            age: 13
        },
        {
    
            name: 'jerry',
            age: 13
        }
    ]
    let newArr = arr.map((item, index) => Object.assign(item, {
    id: index + 1}))
    console.log(newArr)

Running results

• Copy of object
  Deep copy ：

 let obj = {
    
        name: 'tom',
        age: '20'
    };
    let cloneObj = Object.assign({
    }, obj, {
    
        age: '21'
    });
    cloneObj.name = 'jerry';
    cloneObj.age = '23';
    console.log(obj);      //{name: "tom", age: "20"}
    console.log(cloneObj); //{name: "jerry", age: "23"}

Shallow copy ：

const obj = {
    
        name: 'tom',
        tom: {
    
            age: 12
        }
    }
    const cloneObj = Object.assign({
    }, obj)
    cloneObj.name = 'jerry'
    cloneObj.tom.age = 18
    console.log(obj) //{name: 'tom',tom:{age:18}}
    console.log(cloneObj); //{name: 'jerry',tom:{age:18}}

summary ：
As can be seen from the example , Change the size of the copied object name and tom.age, Of the source object name There is no change , however tom.age But it's changed . So we can see that Object.assign() It's just the property values that are copied , If the property value of the source object is a reference to the object , It only copies that reference value .
in other words , about Object.assign() for , If the property value of an object is a simple type （string, number）, adopt Object.assign({},obj); The new object is ‘ Deep copy ’; If the property value is an object or other reference type , That's actually a shallow copy for this object . This is a Object.assign() What to pay attention to

4. new Set() Basic usage

ES6 Provides a new data structure Set. It's like an array , But the values of the members are unique , There are no duplicate values .
Set Itself a constructor , Used to generate Set data structure

• Additions and deletions
  （1） Additive elements add：
  Add a value , return Set Structure itself

let list = new Set()
  list.add(1)
  list.add(2).add(3).add(4)
  console.log(list);// Set(4){1, 2, 3, 4}

（2） Remove elements delete：
Delete a value , Returns a Boolean value , Indicates whether the deletion is successful

let list = new Set([1,2,3,4,5])
  console.log(list.delete(1)); //true
  console.log(list); //Set(4){2, 3, 4, 5}

（3） Determine whether there is an element has：
Returns a Boolean value , Determine if the value is Set Members of

  let list = new Set([1,2,3,4,5])
  list.has(1); //true

（4） Remove all elements clear：
Clear all members , no return value

  let list = new Set([1,2,3,4,5])
  list.clear(); 
  console.log(list); //Set(0){}

• Use case
  （1） Array weight removal

    let arr = [1,2,3,4,3,5,2]
    let newArr = [...new Set(arr)] // [1, 2, 3, 4, 5]

（2） String de duplication

   let string = '2341212'
   let newString = [...new Set(string)].join("") // "2341"