4 new syntaxes in Javascript 6

The ES6 version of JS has been widely supported by major browsers, and many front-end frameworks have also used ES6, and Babel can be used for compatibility, so ES6 has entered the application stage.

If you are not familiar with ES6, here are 4 simple basic usages that can help you quickly understand ES6

1. Declare variables using let and const

In traditional ES5 code, there are two main problems with variable declarations

(1) Lack of support for block scope

(2) Constants cannot be declared

In ES6, these two problems were solved, adding two new keywords: let and const

Use let for block scope

 var a = 1;if (true) { var b = 2;}console.log(a); // 1console.log(b); // 2

In ES5, the variable b declared in the if block can be accessed outside the block.

 // in ES6let a = 1;if (true) { let b = 2;}console.log(a); // 1console.log(b); // ReferenceError: b is not defined

In ES6, variable b declared using let in if block cannot be accessed outside the block

The following code is a common confusing situation

 var a = [];for (var i=0; i< 5; i++) { a.push(function() { console.log(i); });}a.forEach(function(value) { value();});

The results of the run are: 5, 5, 5, 5, 5

Use let to declare variable i in loop

 var b = []; for ( let i=0; i< 5; i++) { b.push(function() { console.log(i); });}b.forEach(function(value) { value();});

The results of the run are: 0, 1, 2, 3, 4

Define constants using const

 // in ES5var MY_CONSTANT = true;MY_CONSTANT = false;

Constants cannot be defined in ES5, values can be changed, and we can only guarantee them ourselves.

 // in ES6const MY_CONSTANT = true;MY_CONSTANT = false; // Uncaught TypeError: Assignment to constant variable

Const declared in ES6 cannot be changed

2. Template string

The following method of splicing strings and variables is more common

var url = 'http://www.' + domain + '.com/' + path + '?' + queryParams;

ES6 provides a concise usage

let url = `http://www.${domain}.com/${path}?${queryParams}`;

3. New Set and Map objects

In ES5, we often use arrays to store dynamic data, for example

 var collection = [];collection.push(1, 2, 1);console.log(collection); // [ 1, 2, 1]

It contains duplicate data. If you don't want duplicate data, you need to use code to judge it.

 function addToCollection(collection, value) { if (collection.indexOf(value) < 0) { collection.push(value) }}

ES6 provides Set objects, which makes it much more convenient to handle this situation.

 let collection = new Set();collection.add(1);collection.add(2);collection.add(1);console.log(collection); // Set {1, 2}

Set can also conveniently traverse the set and process the data in the set.

ES5 is usually used to store key-value pair data, for example

 var collection = {};collection.a = 'abc';collection.b = 'xyz';

ES6 has Map, so it can be used

 let collection = new Map();collection.set('a', 'abc');collection.set('b', 'xyz');

Traversal is also very simple

 collection.forEach(function(value, key) { console.log(key + ":" + value);});console.log(collection.size);

4. Function parameters

There are two new features for the parameters of functions in ES6

default value

 function doSomething(someObject) { console.log(someObject);}

There may be a runtime error here and the parameters need to be verified.

 function doSomething(someObject) { if (someObject === undefined) { someObject = {}; } console.log(someObject);}

This type of verification code is very common. You can set default values for parameters in ES6, which is much simpler.

 function doSomething(someObject = {}) { console.log(someObject);}

Object destruction

We often pass an object containing key-value pairs as parameters to a function, and then obtain the various properties of the object within the function

 function doSomething(someObject) { var one = someObject.propOne; console.log(one); var two = someObject.propTwo; console.log(two); var three = someObject.propThree; console.log(three);}

ES6 allows us to deconstruct object parameters directly in parameters

 function doSomething({ propOne, propTwo, propThree }) { console.log(propOne); console.log(propTwo); console.log(propThree);}

The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.