A, let const

  1. Variables defined by let and const are temporarily deadlocked and do not cause the variable to be promoted
  2. Const is defined as a constant, immutable
{
  let a = 5
  var b = 10
}
/ / / / the console. The log (a) an error
console.log(b)/ / 10
const c = 4
c = 5 Assignment to constant variable
console.log(c)
Copy the code

Second, the Symbol

features

  1. Every Symbol is different

role

  1. As properties of built-in objects, the property names are guaranteed to be different, but cannot be for… Of or for… In find a, can through the Object. GetOwnPropertySymbols () and Reflect ownKeys ()
  2. Define constants to make sure they are different. Used in swich to make sure constants are unique
obj = { [sy]: '1', a: {2} for (var item in obj). The console log (item) / / a, can't get (sy)}. The console log (Object. GetOwnPropertySymbols (obj)) / / [Symbol (I am Symbol) ] console.log( Reflect.ownKeys(obj))//[ 'a', Symbol(i am Symbol) ]Copy the code

Three, modular

  1. Export can be a single export, or multiple variables can be packaged as an object to export, or export default can be used. A module can only have one default export, and import does not need {} for default export.
  2. The import import

3. Differences between ES6 and commomJS:

The commomJS module outputs a copy of a value, while the ES6 module outputs a reference to a value. 2. The commonJS module loads the entire module at runtime, while the ES6 module is a compile-time output interface that can specify a value to loadCopy the code

Arrow function

features

  1. There is no this
  2. Without the arguments
  3. There is no super
  4. There is no new target
  5. Anonymous functions cannot be used as constructors

role

  1. More short
  2. This is not binding

5. Deconstruct assignment

  1. Array:
let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1.2]; // a = 1, b = 2
Copy the code
  1. object
let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10.b: bb = 5} = {a: 3};
// aa = 3; bb = 5;
Copy the code

A. Map b. Set C. Map D. Set

  1. The Map object holds key-value pairs, and its keys can be any value
  2. The Map object has for.. Of and forEach() methods
  3. The Set object allows you to store a unique value of any type
  4. Set objects can be array de-duplication, find cross union, etc
var map1 = new Map()
map1.set('0'.0)
map1.set(0.'0')
map1.set(function(){},'1')
map1.set([],2)
map1.set({},3)
console.log(map1)//Map { '0' => 0, 0 => '0', [Function] => '1', [] => 2, {} => 3 }
for(var [key,value] of map1){
  console.log(key + '=' + value)
}/ / 0 = 0
/ / 0 = 0
// function(){}=1
/ / = 2
// [object Object]=3

// Array decrement
var mySet = new Set([1.2.3.4.4]);
console.log([...mySet]); // [1, 2, 3, 4]
/ / and set
var a = new Set([1.2.3]);
var b = new Set([4.3.2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}
/ / intersection
var intersect = new Set([...a].filter(x= > b.has(x))); / / {2, 3}
/ / difference set
var difference = new Set([...a].filter(x= >! b.has(x)));/ / {1}
Copy the code

Seven, the iterator

concept

  1. An iterator is a unified interface that enables easy access to various data structures
  2. Iterators are Pointers used to iterate over data structure elements

The iterative process

  1. A next() method pointing to the next location returns an object with both value and done attributes
  2. If done is true, the traversal ends

Iterable data structures

  1. Array
  2. String
  3. Map
  4. Set
  5. Dom elements

Can be used for.. . Of circulation

Eight, the Generator

features

  1. Function is preceded by a *
  2. There’s a yield expression inside the function

Next () can pass the parameter without passing the parameter

function* fn(){
  console.log('one')
  var x = yield '1'
  console.log('two' + x)
  var y = yield '2'
  console.log('three' + y)
  return '3'
}

var f = fn()
f.next()//one
f.next(20)//two20
f.next(30)//three30
Copy the code

To implement the iterator

function* objectEntries(obj) {
    const propKeys = Reflect.ownKeys(obj);
    for (const propKey of propKeys) {
        yield[propKey, obj[propKey]]; }}const jane = { first: 'Jane'.last: 'Doe' };
for (const [key,value] of objectEntries(jane)) {
    console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe
Copy the code

Extended operators/remaining arguments

Merge array

var arr1 = ['a'.'b']
var arr2 = ['c'.'d']
console.log([...arr1,...arr2])//[ 'a', 'b', 'c', 'd' ]
Copy the code

The remaining parameters

var arr3 = [first,...second] = ['a'.'b'.'c'.'d']
console.log(first)//a
console.log(second)//[ 'b', 'c', 'd' ]
Copy the code

Convert strings to arrays

console.log([...'hello'])//[ 'h', 'e', 'l', 'l', 'o' ]
Copy the code

Anything with an iterator interface can use the extension operator

var mapp = new Map()
mapp.set(1.'one')
mapp.set(2.'two')
mapp.set(3.'three')
console.log([...mapp.keys()])//[1, 2, 3]

function* gen(){
  yield '1'
  yield '2'
  yield '3'
}
console.log([...gen()])//['1', '2', '3']

obj = {
  a:'1'.b:'2'.c:'3'
}
console.log([...obj])//obj is not iterable
Copy the code

Ten, Promise

  1. Three kinds of states, pending, fulfilled, rejected
  2. This state can only be changed from pending=> depressing,pending=> Rejected. Once the state is changed, it cannot be changed again
  3. Then, receives two arguments, one for a successful promise callback and one for a failed callback
  4. Then can be called chained, adding multiple callback functions

Proxy and Reflect

Proxy

  1. You can intercept reads of target objects and calls to functions, and you can add additional operations while doing these operations
  2. The target is the target object. The handler specifies the behavior for the target
  3. Get and set methods
let obj2 = {
  name:'zhangsan'.age: 10
}

let handler = {
  get:function(target,key){
    console.log(target[key])
  },
  set:function(target,key,value){
    target[key] = value
    console.log(key + ' is changed ' + value)
  }
}

let pro = new Proxy(obj2,handler)
pro.name//zhangsan
pro.age = 12//age is changed 12
Copy the code
  1. Other methods (put a summary of someone else juejin.cn/post/684490…)

Reflect

  1. The behavior used to get the target Object is similar to that of Object, in a more elegant and readable way
  2. Method corresponds to the Proxy method above

Twelve, Class

concept

  1. Class is a function
  2. Class definition, using the class keyword

Attributes of a class

Static attributes: class attributes, no instantiation required. 2. Public attributes: directly defined attributes 3. Instance properties: Properties defined on the instance object this

Methods of a class

  1. Constructor: This method is invoked automatically with the new command
  2. Static method method defined by the stctic keyword
  3. Prototype methods: Define methods normally, or outside of a class on Prototype
  4. Instance methods: Methods defined in constructor

Class inheritance

  1. Inheritance is implemented using the extends keyword
  2. Subclasses must have super() in them and must come before this
  3. Regular objects cannot be inherited
class test{
  constructor(name,age){
    this.name = name
    this.age = age
  }
  a = 2
  static b = 3
  say(){
    console.log(this.name + ' is ' + this.age + ' years old ')}static say2(){
    console.log(this.name + ' is ' + this.age)
  }
}

var t = new test('zhangsan'.'20')
t.say()//zhangsan is 20 years old
// t.say2()//t.say2 is not a function
console.log(t.a)/ / 2
console.log(t.b)//undfined

class t1 extends test{
  constructor(name,age,sex){
    super(a);console.log('Method inherits from parent class')
    this.sex = sex
    this.name = name
    this.age = age
  }
  say3(){
    super.say()
  }
}

var t11 = new t1('lisi'.'30'.'male')
t11.say3()//lisi is 30 years old
Copy the code