4 new syntax _javascript techniques in Javascript 6

JS ES6 version has been widely supported by major browsers, many front-end frameworks have been used ES6, and Babel can do compatible processing, so ES6 has entered the application phase

If you're not familiar with ES6, here are 4 simple basics to help you quickly understand ES6

1. Use let and const to declare variables
in the traditional ES5 code, the declaration of a variable has two major problems

(1) Lack of block scope support

(2) cannot declare constant

In ES6, these two issues were resolved, adding two new keywords: let and const

Block-child scopes using let

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

Variable B declared within an if block in ES5 can be accessed outside the block

In ES6 let
a = 1;
if (true) {let
  b = 2;
}
Console.log (a); 1
console.log (b);//REFERENCEERROR:B is not defined

Variable B with let declaration within the IF block in ES6 cannot be accessed outside the block

The following code is a common one, a more confusing one.

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

Run results are: 5, 5, 5, 5, 5

Variable i with let declaration loop

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

Run results are: 0, 1, 2, 3, 4

Define constants using const

In ES5

var my_constant = true;

My_constant = false;

Constants cannot be defined in ES5, values can be changed, only on our own to ensure

In ES6
const My_constant = true;
My_constant = false; Uncaught typeerror:assignment to constant variable

Constants declared using const in ES6 are not allowed to be modified

2. Template string
the following string and variable stitching method is more common

var url = ' http://www ' + domain + '. com/' + path + '? ' + queryparams;
ES6 provides a concise use of

Let URL = ' Http://www.${domain}.com/${path}?${queryparams} ';

3. New Set and Map objects
in ES5 we often use arrays to store dynamic data, such as

var collection = [];
Collection.push (1, 2, 1);
Console.log (collection); [1, 2, 1]

It contains duplicate data, and if you do not want to have duplicate data, you need to use code to determine

function Addtocollection (collection, value) {

  if (Collection.indexof (value) < 0) {

    Collection.push (value) c10/>}

}

ES6 provides a Set object, which is much more convenient to handle.

Let collection = new Set ();
Collection.add (1);
Collection.add (2);
Collection.add (1);
Console.log (collection); Set {1, 2}

Set can also easily traverse the collection and process the data in the collection

object is typically used in ES5 to store key-value pairs of data, such as

var collection = {};
COLLECTION.A = ' abc ';
collection.b = ' xyz ';

ES6 has a Map, you can use it like this

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
the function in ES6 has two new attributes

Default value

function DoSomething (someobject) {
  console.log (someobject);
}

There is a possibility that a run-time error may occur, and you need to verify the parameters

function DoSomething (someobject) {
  if (someobject = = undefined) {
    someobject = {};
  }
  Console.log (someobject);

}

This kind of validation code is very common, ES6 can set the default value of parameters, a lot easier

function dosomething (someobject = {}) {

  console.log (someobject);

}

Object Deconstruction

We often pass an object that contains a key value pair as a parameter to a function, and then get each property 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 the parameters

function dosomething ({propone, proptwo, propthree}) {
  console.log (propone);
  Console.log (proptwo);
  Console.log (Propthree);

}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.