Differences between ES5 and ES6

ECMAScript5, or ES5, is the fifth revision of ECMAScript and was standardized in 2009

ECMAScript6, also known as ES2015, is the sixth revision of ECMAScript, completed in 2015

ES6 is an improvement over ES5. Compared with ES5, it is simpler and improves development efficiency

New methods in ES6

1, add declaration commands let and const

In ES6, we use let for variables and const for constants

Let and const are both block-level scopes. {} code block as scope can only be used within the code block without variable promotion, must be declared before use, otherwise an error will be reported. Within a code block, a variable is not available until it is declared. This is syntactically called a “temporal dead zone” (TDZ). It is not allowed to be declared twice within the same block of code. Const is a read-only constant and is assigned when declared. If const is an object, the value of the object can be modified. To put it more abstractly, the address to which an object points cannot be changed, whereas variable members can be changed.

2. Template String

It can be used as a regular string or to define multi-line strings. It can also be used to embed variables, JS expressions, or functions in strings. Variables, JS expressions, or functions need to be written in ${}.

3. Function extension

3.1) The default arguments of the function

ES6 provides default values for parameters. This parameter is initialized when the function is defined so that it is not passed

Use as you go in.

3.2) Arrow function

In ES6, there is a neat way to write functions that we call “arrow functions.”

Function name =(parameter)=>{…… }

When there is only one expression in the function body, {} and return can be omitted

If the function body has only one parameter, () can be omitted.

Features:

This in the arrow function always refers to the function closest to this when the arrow function is defined, if there is no

The closest functions point to extensions of Window4 objects

4. Object extension

4.1) Shorthand for attributes

ES6 allows variables to be written directly to objects. In this case, the property name is the variable name, and the property value is the value of the variable.

var foo = 'bar';

var baz = {foo}; Var baz = {foo: foo};
Copy the code

Short for method. Omit the colon and function keyword.

var o = {method() {
  return "Hello!"; }};/ / is equivalent to

var o = {

method: function() {

return "Hello!"; }};Copy the code

4.2) Object.keys() method

Returns an array of all property or method names of the object (excluding the contents of the primitive).


var obj={name: "john".age: "21".getName: function () { alert(this.name)}};

console.log(Object.keys(obj));

// ["name", "age", "getName"]

console.log(Object.keys(obj).length);

/ / 3

console.log(Object.keys(["aa"."bb"."cc"]));

/ / / "0", "1", "2"]

console.log(Object.keys("abcdef"));

//["0", "1", "2", "3", "4", "5"]
Copy the code

4.3) the Object. The assign ()

The Assign method combines the attributes and methods of multiple original objects onto the target object. Can accept multiple parameters,

The first argument is the target object, followed by the source object

var target = {}; // Target object

var source1 = {name : 'ming'.age: 'the'}; // Source object 1

var source2 = {sex : 'woman'}; // Source object 2

var source3 = {sex : 'male'}; // The source object 3 has the same property sex as the object in source2

Object.assign(target,source1,source2,source3);

console.log(target);

//{name: 'Ming ', age: '19', sex:' male '}

Copy the code

5, for… Of circulation


var arr=["Lin"."Xiao wu"."Small beautiful"];

for(var v of arr){

console.log(v);

}

// Xiao Lin // Xiao Wu // Xiao Jia
Copy the code

6. Import and export

The ES6 standard supports JavaScript native modules. This kind of JS code is divided into small blocks of different functions for modularization, the code of different functions are written in different files, each module only needs to export the public interface part, and then through the import of the module can be used in other places

Import is used to load another module containing the export interface in a module. The import and export commands can only be at the top of the module, not in the code block

7. Promise objects

Promise is a solution to asynchronous programming by expressing asynchronous operations as a flow of synchronous operations, avoiding the layers of nested callback functions that were created to solve the callback hell of asynchronous processing (i.e., the problem of loop nesting)

The Promise constructor contains one parameter and a callback with resolve and reject parameters. Perform some operation (asynchronous, for example) in the callback, calling resolve if all is well, reject otherwise. You can call the promise.then () method on an already instantiated Promise object, passing the resolve and reject methods as callbacks. The then() method takes two arguments: OnResolve and onReject represent three states of Promise which is Fulfilled or failed, which is a big pity, and Rejected represents the state of failure. Pending is neither ld nor Rejected. It is the initial state of the Promise object instance when it is created

8. Deconstruct assignment

8.1) Destruct assignment of arrays

Deconstructing assignment is an extension of the assignment operator.

Pattern matching is a pattern matching method for arrays or objects, and then assigning values to their variables.

Concise and easy to read in code writing, more clear semantics; It also facilitates data field retrieval in complex objects.

The value in the array is automatically parsed to the variable that receives the value, and the array’s deconstruction assignment corresponds to if

The one that doesn’t correspond is undefined


let [a, b, c] = [1.2.3];

// a = 1 // b = 2 // c = 3
Copy the code

8.2) Deconstructive assignment of objects

Destruct assignment of an object is similar to destruct assignment of an array, except that array members are ordered

And the attributes of the object are unordered, so the simple understanding of object deconstruction assignment is that the left and right sides of the equal sign have the same structure


let { foo, bar } = { foo: 'aaa'.bar: 'bbb' }; // foo = 'aaa' // bar = 'bbb'

let { baz : foo } = { baz : 'ddd' }; // foo = 'ddd'
Copy the code

9. Set data structure

Set data structure, similar to an array. All data are unique and have no duplicate values. It is itself a constructor.

9.1) Set properties and methods

  • Size () Specifies the length of the data
  • Add () adds a value and returns the Set structure itself.
  • Delete () deletes a value and returns a Boolean indicating whether the deletion was successful.
  • Has () looks for a piece of data and returns a Boolean value.
  • Clear () clears all members with no return value.

9.2) Main application scenarios: array deduplication

10, class

ES6 does not use prototype chains for inheritance as in ES5, but introduces the concept of class

Advantages of ES6 written classes over ES5:

Different from functions and more specialized (similar to classes in JAVA)

It is easier to write and implement class inheritance

11,… Expansion operator

The expansion operator expands an array or an object. You can also collect multiple values into a single variable

Async, await

With async/await, and Promise, you can improve your code by writing code that looks like synchronization to handle asynchronous processes

Async is used to declare that a function is asynchronous and await is used to wait for an asynchronous party

Execution completed

modifiers

Decorator is a function that modifies the behavior of a class or even a method. Modifiers are essentially compile-time functions

The number

14 and Symbol

Symbol is a basic type. Symbol is generated by calling the Symbol function, which accepts an optional name argument,

The symbol returned by this function is unique

15, the Proxy

Proxy A Proxy uses a Proxy to listen for an object and then do something about it