ES6 New Common Syntax

New Common Syntax for Heading ES6

let and const

Let and var work similarly to declare variables, ES5 has only global and function scopes, no block-level scopes, and let actually adds a block-level scope to JavaScript.The variable declared with it is valid only within the block of code in which the let command resides.

 if (true) {
		      var a = 10;
		      let b = 12;
		      console.log(a);	// 10
		      console.log(b); // 12
		  }
		  console.log(a); // 10
		  console.log(b); // Error ReferenceError: b is not defined

const is also used to declare variables, but it declares constants.Once declared, the value of a constant cannot be changed.

const PI = Math.PI
PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

In strict mode, when we try to change a constant declared with const, the browser will fail.Const has a good scenario in which variables declared when we reference third-party libraries are declared with const to avoid future inadvertent renaming that can lead to bug s

const monent = require('moment')
Arrow function

Writing

let demoFun = (a, b) => a + b   
// Returns a + b, and when the function is return ed directly, the parentheses of the body of the function can be omitted

let demoFun = params => ({foo: bar})
//When an object is returned, parentheses are placed outside the function

let demoFun = (param1, param2, ...rest) => { statements }
// Supports remaining and default parameters, statements handle logic for functions

The arrow function does not have its own this.The arrow function captures this value in its context as its own.If the context does not have this, this points to a Window object.

const person = {
    name: 'tom',
    getName: () => this.name
}
console.log(person.getName());
// The actual compilation results are
var person = {
    name: 'tom',
    getName: function getName() {
        return undefined.name;
    }
};

The new arrow operator=>in ES6 simplifies the writing of functions.Operators have input parameters on the left and returned values on the right, which can reduce a lot of code for us. See the following example:

let arr = [6, 8, 10, 20, 15, 9];
arr.forEach((item, i) => console.log(item, i));
let newArr = arr.filter((item) => (item<10));
console.log(newArr); //[6, 8, 9];
//The above (item, i) is the parameter, and the following console.log(item, i) is the logic of the operation to be performed back to the function.
String Template

ES6 allows the use of inverted quotes ` to create strings that can contain variables ${vraible} wrapped in dollar signs and curly brackets.Looking at an example, you can see that:

//Generate a random number
let num = Math.random();
//Output this number to console
console.log(`your num is ${num}`);
deconstruction

If a function returns multiple values, the general practice is to return an object, each value being returned as an attribute of the object.In ES6, the deconstruction feature allows you to return an array directly, and the values in the array are automatically parsed into the variables that receive them.Let's take an example:

function getVal() {
    return [1, 2];
}
var [x,y] = getVal(); //Deconstruction of return values of functions
console.log('x:'+x+', y:'+y);   //Output: x:1, y:2 

Default parameters
It is now possible to specify default values for parameters when defining functions instead of using logic or operators as before.

function sayHello(name){
    var name=name||'tom';   //Traditional way of specifying default parameters
    console.log('Hello '+name);
}
//Using the default parameters of ES6
function sayHello2(name='tom'){  //If this parameter is not passed, there will be a default value.
    console.log(`Hello ${name}`);
}
sayHello();//Output: Hello tom
sayHello('jarson');//Output: Hello jarson
sayHello2();//Output: Hello tom
sayHello2('jarson');//Output: Hello jarson
//Note: sayHello2(name='tom') here is the equal sign, meaning that if this parameter is not passed, the default value is set instead of the meaning of assigning a value to the parameter.
Class class

ES6 provides a more traditional way of writing than es5, introducing the concept of Class.The new class writing makes the object prototype writing clearer, more like the grammar of object-oriented programming, and more understandable.

/ ES5
// Constructor
function Person(name, age) {
  this.name = name;
  this.age = age;
}
// Prototype Method
Person.prototype.getName = function() {
  return this.name
} 
//Static Properties
Person.info='Static Properties';

// ES6
class Person {
    constructor(name, age) { // Constructor
        this.name = name;
        this.age = age;
    }
    getName() { // Prototype method (never add function)
        return this.name
    }
}
//Static Properties
Person.info = 'Static Properties';
const person = new Person("qiu", 24);
console.log(person.getName()); //qiu
console.log(Person.info); //Static Properties
Class's inheritance extends
class PersonExt extends Person{
    constructor(name,age,birthday){
        super(name,age);   
        //In an inherited constructor, the super method must be called once, which represents the inheritance of the constructor; it must be called before this
        this.birthday = birthday;
    }
    supGetName(){
        console.log(super.getName());   //super directly calls the parent's prototype method
    }
}
const person  = new PersonExt("qiurx",24,"0417");   
console.log(person.getName());   //qiurx
person.supGetName();   //qiurx
Object Literal Abbreviation

When an attribute has the same name as a variable of value.

let type = 'quartz';
let color = 'rose';
let carat = 21.29;
//es5
const gemstone = {
  type: type,
  color: color,
  carat: carat
//es6
const gemstone = {type,color,carat};

console.log(gemstone);

Name of the abbreviation method.

let gemstone = {
    testFunc() {
        console.log("Short Description of Object Literal Quantity Method");
    }
};
gemstone.testFunc();

In object literals, brackets can be used as attributes, indicating that attributes can also be a variable.

const name = 'Jane';
const person = {
  [name]: true   //'Jane':true
}
console.log(person.Jane);   //true
Expansion Operator

Expand Literal Quantity Object
Used in ES6 (...) to represent the expansion operator, which can expand an array or an object.
Expand bound array

//es5
const arr1 = [1,2,3];
const arr2 = [3,4];
const arr3 = arr1.concat(arr2);
console.log(arr1);  //Conat does not alter an existing array, but simply returns a copy of the connected array.
console.log(arr3);  //Merge of arr1 and arr2*/
//es6
const arr1 = [1,2,3];
const arr2 = [3,4];
console.log(...arr1);  //1 2 3
const arr3 = [...arr1,...arr2];
console.log(arr3);  //Merge of arr1 and arr2

Used in methods

function func(x, y, z, a, b) {
    console.log(x, y, z, a, b);
}
var args = [1, 2];
func(0, ...args, 3, ...[4]); // 0 1 2 3 4

Expand bound objects

//jQuery
var obj1 = {
  a: 1,
  b: 2, 
  c: 3
}
var obj2 = {
    d: 4,
    e: 5,
    f: 6
}
var obj3 = $.extend({},obj1,obj2);   //The target object (the first parameter) will be modified, so use {}
console.log(obj3); 
//es6
const obj1 = {
  a: 1,
  b: 2, 
  c: 3
}
const obj2 = {
  d: 4,
  e: 5,
  f: 6
}
const obj3 = {
    ...obj1,
    ...obj2
}
console.log(obj3);   //Combination of obj1 and obj2 objects

Remaining parameters
When assigning a variable to an array value
Expand an array into multiple elements using an expansion operator, and bind multiple elements to an array using the remaining parameters

const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
const [total, subtotal, tax, ...items] = order;
console.log(items);   //Array (4) ['cheese','eggs','milk','bread']

Variable parameter function
The expansion operator is also used in the parameters of a function to represent indefinite parameters of the function.Only last can be used as an indefinite parameter of a function, otherwise an error will be reported

const add = (a, b, ...more) => {
    return more.reduce((m, n) => m + n) + a + b
}
console.log(add(1, 23, 1, 2, 3, 4, 5)) // 39

es6 reduce description

var numbers = [15.5, 2.3, 1.1, 4.7];  
function getSum(total, num) {
    return total + Math.round(num);   //Take the nearest integer, 0.5 to the direction of the large number
}
function myFunction(item) {
    return item.reduce(getSum, 1);
}
console.log(myFunction(numbers));   //24+1
Six original articles were published. Praise 5. Visits 112
Private letter follow

Tags: Attribute Javascript REST Programming

Posted on Tue, 03 Mar 2020 17:52:44 -0800 by regiemon