Home > Web Front-end > JS Tutorial > What are the differences between es6 and es5

What are the differences between es6 and es5

青灯夜游
Release: 2022-10-14 17:33:16
Original
24141 people have browsed it

Differences: 1. es6 has a new arrow function, es5 does not; 2. ES6 has a new block-level scope, es5 does not; 3. ES6 introduces the concept of Class and no longer uses the prototype chain like ES5 Implement inheritance; 4. Default function parameters can be set in ES6, but not in es5; 5. The promise feature is added in ES6.

What are the differences between es6 and es5

The operating environment of this tutorial: Windows 7 system, ECMAScript 5&&ECMAScript 6 version, Dell G3 computer.

Compared with ES5, ES6 has a lot of new things, such as:

1. New arrow function

Problems solved by the arrow function

  • Simplifies the writing method. Arrow functions are suitable when the function body has only one line; when there are multiple lines, ordinary functions can be used to increase readability. Less coding, clear structure

  • Clear this. The this of traditional JS is determined at runtime, not at definition; while the this of arrow functions is determined at definition and cannot be changed, nor can it be modified by methods such as call, apply, and bind. Make it clear who this points to at runtime, and there is no need to determine which this points to at runtime              

    Note: The arrow function does not have its own this, its this is the outer this, pointing to This is the previous function that was not an arrow function. Because of the mechanism of js, it points to the scope of a function that is not an arrow function.

The difference between arrow functions and ordinary functions

  • The declaration of ordinary functions is the highest in variable promotion, arrow The function does not have Function promotion

  • The arrow function does not have this, this inside the function body The object is the object where it is defined, not the object where it is used.

  • The arrow function does not have an arguments object. The object does not exist in the function body. If you want to use , you can use rest parameters

  • arrow functioncannot be used as a constructor, cannot be used by new, and has no property

  • # #call and apply methods only have parameters and no scope

  • The yield command cannot be used, so arrow functions cannot be used as generator functions

2. Block-level scope

  • The let command in ES6 declares variables, and its usage is similar to that of var , but let adds a new block-level scope to JavaScript. There is no block-level scope in ES5, and var has the concept of variable promotion, but in let, the variables used must be declared; const declares constants

  • Structure assignment of variables in ES6, for example: var [a,b,c] = [0,1,2];

##3. Class inheritanceES6 no longer uses the prototype chain to implement inheritance like ES5, but introduces the concept of Class, which sounds similar to object-oriented programming in Java. The syntax is somewhat similar, but the two are different.

4. Set default function parameters You can set default function parameters in ES6, such as function A (x, y=9) {} ;

5. promisepromise generation background: solving the callback hell problem and processing asynchronous requests

promise usage: chain Type call, success and failure callbacks, three states, triggered when the pending state changes. Once the status changes, it will not change again.

6. Template string

7. Assignment structure[Recommended learning:

javascript advanced tutorial

]

The above is the detailed content of What are the differences between es6 and es5. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template