Shulou(Shulou.com)06/02 Report--

Editor to share with you what the new features of es6 are, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Es6 new features: 1, ES6 introduced class, so that JavaScript object-oriented programming becomes more simple and easy to understand; 2, modular Module;3, arrow Arrow function; 4, function parameter default value; 5, template string.

What's new in es6:

1. Class (class)

Developers who are familiar with pure object-oriented languages such as Java,object-c,c# will have a special feeling for class. ES6 introduces class (classes) to make object-oriented programming in JavaScript easier and easier to understand.

The class Animal {/ / constructor will be called when instantiated, and if not specified, there will be a default constructor with no arguments. Constructor (name,color) {this.name = name; this.color = color;} / / toString is the attribute toString () {console.log ('name:' + this.name +', color:' + this.color) on the prototype object;}} var animal = new Animal ('dog','white'); / / instantiate Animal animal.toString (); console.log (animal.hasOwnProperty (' name')) / / true console.log (animal.hasOwnProperty ('toString')); / / false console.log (animal.__proto__.hasOwnProperty (' toString')); / / true class Cat extends Animal {constructor (action) {/ / subclass must specify the super function in constructor, otherwise it will report an error when creating a new instance. / / if there is no top consructor, the default constructor with super function will be added, super ('cat','white'); this.action = action;} toString () {console.log (super.toString ());}} var cat = new Cat (' catch') cat.toString (); / / instance cat is the instance of Cat and Animal, which is exactly the same as Es5. Console.log (cat instanceof Cat); / / true console.log (cat instanceof Animal); / / true

2. Modularization (Module)

ES5 does not support native modularity, and modules are added as an important part of ES6. The function of the module is mainly composed of export and import. Each module has its own scope, the mutual calling relationship between modules is to specify the interface exposed by the module through export, and to refer to the interface provided by other modules through import. At the same time, it also creates a namespace for the module to prevent function naming conflicts.

Export (export)

ES6 allows you to use export to export multiple variables or functions in a module.

Export variabl

/ / test.jsexport var name = 'Rainbow'

A module can also output multiple variables at the same time.

/ / test.js var name = 'Rainbow'; var age =' 24 hours; export {name, age}

Derived function

/ / myModule.jsexport function myModule (someArg) {return someArg;}

Import (import)

Once the output of the module is defined, it can be referenced by import in another module.

Import {myModule} from 'myModule';// main.jsimport {name,age} from' test';// test.js

Lesson: an import statement can import default functions and other variables at the same time. Import defaultMethod, {otherMethod} from 'xxx.js'

3. Arrow function

This is one of the most exciting features in ES6. = > is not just an abbreviation for the keyword function, it also brings other benefits. The arrow function shares the same this with the code that surrounds it, which can help you solve the problem of pointing to this. Experienced JavaScript developers are familiar with patterns such as var self = this; or var that = this that refer to peripheral this. But with the help of = >, this mode is not needed.

The structure of Arrow function

The arrow of the arrow function is preceded by an empty parenthesis, a single parameter name, or multiple parameter names enclosed in parentheses, while the arrow can be followed by an expression (as the return value of the function), or the function body enclosed in curly braces (you need to return the value through return, otherwise it is undefined).

/ / an example of the arrow function

() = > 1v = > return 1 (AMagneb) = > aquib () = > {alert ("foo");} e = > {if (e = = 0) {return 0;} return 1000game;}

Lesson: whether it is the arrow function or bind, a new function reference is returned every time it is executed, so if you need a function reference to do something else (such as unloading the listener), you must save the reference yourself.

Traps when uninstalling listeners (react as an example)

The wrong approach.

Class PauseMenu extends React.Component {componentWillMount () {AppStateIOS.addEventListener ('change', this.onAppPaused.bind (this));} componentWillUnmount () {AppStateIOS.removeEventListener (' change', this.onAppPaused.bind (this));} onAppPaused (event) {}}

+ the correct approach

Class PauseMenu extends React.Component {constructor (props) {super (props); this._onAppPaused = this.onAppPaused.bind (this);} componentWillMount () {AppStateIOS.addEventListener ('change', this._onAppPaused);} componentWillUnmount () {AppStateIOS.removeEventListener (' change', this._onAppPaused);} onAppPaused (event) {}}

In addition to the above, we can also do the following:

Class PauseMenu extends React.Component {componentWillMount () {AppStateIOS.addEventListener ('change', this.onAppPaused);} componentWillUnmount () {AppStateIOS.removeEventListener (' change', this.onAppPaused);} onAppPaused = (event) = > {/ / define the function directly as an attribute of arrow function, and bind the this pointer}} at initialization

4. Default values of function parameters

ES6 supports setting default values for functions when defining them:

Function foo (height = 50, color = 'red') {/ / TODO}

For example, we call the foo function like this:

Foo (0, ")

Because the Boolean value of 0 is false, the value of height will be 50. Similarly, the value of color is' red'.

5. Template string

ES6 supports template strings, which makes the stitching of strings more concise and intuitive.

Do not use template strings:

Var name = 'Your name is' + first +''+ last +'.

Use the template string:

Var name = `Your name is ${first} ${last} .`

The string can be concatenated with ${} in ES6, just put the variable in curly braces.

6. Deconstruction assignment

Deconstructing assignment syntax is an expression of JavaScript, which can easily extract values from arrays or objects to assign values to defined variables.

Get the values in the array

Gets a value from an array and assigns it to a variable in an order that corresponds to the order of the objects in the array.

Var foo = ["one", "two", "three", "four"]; var [one, two, three] = foo;console.log (one); / / "one" console.log (two); / / "two" console.log (three); / / "three" / / if you want to ignore certain values, you can get the value you want var [first, last] = foo;console.log (first) as follows / / "one" console.log (last); / / "four" / / you can also write var a, b; / / declare variables [a, b] = [1,2] first; console.log (a); / / 1console.log (b); / / 2

If you don't get the value from the array, you can set a default value for the variable.

Var a, b; [axi5, baux7] = [1]; console.log (a); / / 1console.log (b); / / 7

The values of the two variables can be easily exchanged by deconstructing the assignment.

Var a = 1 Ming var b = 3; [a, b] = [b, a]; console.log (a); / / 3console.log (b); / / 1 get the value in the object const student = {name:'Ming', age:'18', city:'Shanghai'}; const {name,age,city} = student;console.log (name); / / "Ming" console.log (age); / / "18" console.log (city) / / "Shanghai" above is all the content of the article "what are the new features of es6?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.