ECMAScript new features

ECMAScript is often seen as the standard specification for javascript. Javascript is actually an extension of ECMAScript, and ECMAScript provides only the basic syntax. Javascript on the browser side is ECMAScript plus the API provided by the Web, known as BOM and DOM. JavaScript in Node.js is ECMAScript plus a set of apis provided by Node, such as FS, NET, etc. The JavaScript language itself refers to ECMAScript.

Let and block-level scope

scope

Scope: The scope within which a member can operate

Scopes are divided into global scope, function scope, and block-level scope

let

Members of a let declaration take effect only in the declared block

for (var i = 0; i < 3; i++) { for (var i = 0; i < 3; I ++) {console.log(I)} console.log(' I = '+ I)} for (var I = 0; i < 3; i++) { for (let i = 0; i < 3; I ++) {console.log(I)} console.log(' end of inner layer I = '+ I)} // Output 0 1 2 End of inner layer I =0 0 1 2 End of inner layer I =1 0 1 2 End of inner layer I =2Copy the code

Let application scenario: loop binding event, event handler to get the correct index

Let fixed variable declaration promotion

Deconstruction of arrays

Array deconstruction is based on position

Const [foo, bar, baz] = arr console.log(foo, bar, baz) Const [foo,...rest] = arr console.log(rest) // output [2000,300] const [foo, bar, baz, Const [foo, bar, baz, more = 'aaa'] = arr console.log(moreCopy the code

Object deconstruction

The deconstruction of an object is to match the attribute name to extract

Const obj = {name: 'zce', age: 18} const {name} = obj console.log(name) ObjName = 'jack'} = obj console.log(objName) // Output JackCopy the code

String extension methods

const message = 'Error: Foo is not defined.' console.log(message.startswith ('Error'))// Output: Console. log(message.endswith ('.'))// Output: True Specifies whether to contain a stringCopy the code

Parameter Default values

// The default argument must be at the end of the parameter list. Function foo (enable = true) {console.log('foo invoked - enable: ') console.log(enable)} foo(false) // Output foo invoked - enable: falseCopy the code

The remaining parameters

function foo (first, ... The args) {the console. The log (args)} foo (1, 2, 3, 4) / / output (2 and 4)Copy the code

Arrow function

// Const inc = n => n + 1 Return const inc = (n, M) => {console.log('inc Invoked ') return n + 1} console.log(inc(100)) // Output inc Invokedt 101 // The arrow function does not change the point to this, Const person = {name: 'Tom', sayHi: function () { console.log(`hi, my name is ${this.name}`) }, sayHi1: () => {console.log(' hi, my name is ${this.name} ')},} person.sayhi () person.sayhi1 () my name is undefinedCopy the code

Object extension methods

Object.assign(obj1,obj2,…) Overwrite the properties in the first object with the properties in the later objects

Object.is() Determines whether two values are the same

Proxy

Proxy objects are used to create a Proxy for an object, thereby intercepting and customizing basic operations

const person = { name: 'zce', age: 20} const personProxy = new Proxy(person, {// monitor attribute read get (target, property) {// return value if attribute exist, Otherwise return default return property in target? target[property] : Set (target, property, value) {target[property] = value console.log(target, property, Value)}}) personproxy.gender = true console.log(personproxy.name) console.log(personproxy.xxx) // Output {name:'zce',age:20} gender true zce defaultCopy the code

Class

Class Person {constructor (name) {this.name = name} say () {console.log(' hi, ') My name is ${this.name} ')} static create(name){return new Person('Lily')}} const p = new Person('Tom') P.say () // output hi, my name is TomCopy the code

Class inheritance

class Person { constructor (name) { this.name = name } say () { console.log(`hi, my name is ${this.name}`) } } class Student extends Person { constructor (name, Number) {super(name) // Superclass constructor this.number = number} hello () {super.say() // Call the superclass member console.log(' my school number is ${this.number} ')}} const s = new Student('Jack', '100') s.hello(Copy the code

Set

A Set can be viewed as a collection. Objects in the Set are not allowed to repeat, and the collection object itself is returned. It can be called in chains

const s = new Set()
s.add(1).add(2).add(3).add(4).add(2)
Copy the code

Size property: Gets the length of the entire collection

The has method: determines whether the collection contains a specified value

The delete method: deletes a particular value from the collection

Clear method: clear all contents of the collection

Arr = [1,2, 1, 3,4, 1] const result = [...new Set(arr)] console.log(result) // Output [1,2,3,4]Copy the code

Map

The Map object holds key-value pairs and can remember the original insertion order of the keys. Any value (object or raw value) can be used as a key or a value.

const m = new Map() const tom = { name: 'Tom'} // store the data m.count (Tom, 90) console.log(m) // fetch the data console.log(m.count (Tom)) m.count ((value, Key) = > {the console. The log (value, key)}) / / output Map {{name: 'Tom'}} = > 90 90 90 {name: 'Tom'}Copy the code

The has method: determines whether the collection contains a specified value

The delete method: deletes a particular value from the collection

Clear method: clear all contents of the collection

Symbol

Each Symbol value returned from Symbol() is unique

The main function is to add unique attribute names to the object

Create a new Symbol type using Symbol() directly, describing it with an optional string

console.log(Symbol('foo'))
Copy the code

Two symbols are never equal

Console. log(Symbol('foo')===Symbol('foo'))//false // Symbol global registry The same string returns the same Symbol value const s1 = Symbol. For ('foo') const s2 = Symbol. For ('foo') console.log(s1 === s2)//true // The for method maintains the mapping between a string and a Symbol. Console. log(Symbol. For (true) === Symbol. For ('true'))//true // Symbol gets const obj = {[Symbol()]: 'symbol value', foo: 'normal value'} console.log(Object.getOwnPropertySymbols(obj))Copy the code

The for… of traverse

// for... Of only iterates through the data types of the array structure, and loops to each element, For (const item of arr) {console.log(item)} // output 100 200 300 400 // for... ForEach (item => {console.log(item)}) for (const item of arr) {console.log(item) if (item > 100) { //for... }} // forEach cannot break out of the loop, Arr.some ()// Returning true terminates the traversal. Arr.every ()// Returning false terminates the traversal. // Traversing the Set is the same as traversing the group Const s = new Set(['foo', 'bar']) for (const item of s) {console.log(item)} Const m = new Map() m.et ('foo', '123') m.et ('bar', '345') for (const [key, value] of m) {console.log(key, Value)} / / output [' foo ', '123'] [' bar ', '345'] / / ordinary objects cannot be directly for... Of const object = {foo: 123, bar: 456} for (const item of object) {console.log(item)} obj is not iterableCopy the code

for … Of loops and for… What’s the difference between in loops?

for … The in loop actually iterates over the object’s property name. An Array is actually an object, and the index of each of its elements is treated as an attribute.

var a = ['A', 'B', 'C']; a.name = 'Hello';
for (var x in a) {
    console.log(x); // '0', '1', '2', 'name'
}
Copy the code

for … The in loop will include the name, but not the length property of the Array.

for … The of loop only loops through the elements of the set itself:

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    console.log(x); // 'A', 'B', 'C'
}
Copy the code

Iterator

Implementing the Iterable interface is for… The premise of of, which maintains a pointer internally, can be traversed internally by calling the next method

Const set = new set (['foo', 'bar', 'baz']) const iterator = set[Symbol.iterator]() console.log(iterator.next()) console.log(iterator.next()) Console.log (iterator.next()) console.log(iterator.next()) console.log(iterator.next()) console.log(iterator.next()) {value:'foo',done:fale} {value: 'bar', done: fale} {value: 'baz, done: fale} {value: undefined, done: true} {value: undefined, done: true} / / optimize the while (true) {const current = iterator.next() if (current.done) {break } console.log(current.value)} // Output {value:'foo',done:fale} {value:'bar',done:fale} {value:'baz',done:fale} // Const obj = {store: ['foo', 'bar', 'baz'], // Store the array that can be iterated [Symbol. Function () {let index = 0 const self = this return {// Function () {const result = {value: self.store[index], const result = {value: self.store[index], const result = {value: self.store[index], const result = {value: self.store[index], const result: Index ++ return result}}}} for (const item of obj) {console.log(item)} // Output Const todos = {store: ['foo', 'bar', 'baz'], [Symbol. Iterator]: Function * () {for (const item of store) {yield item}} for (const item of todos) {console.log(item)} // Output foo bar bazCopy the code