ES6 syntax extensions and new features

1.let and const command

var There is a question , Defined variables sometimes become global variables inexplicably .

let Declared variables , Only in let The command is valid in the code block .

const Declared variables are constants , Cannot be modified .( A read-only variable )

2. String extension

ES6 Several new extensions for strings have been added API：

• includes()： Returns a Boolean value , Indicates whether the parameter string was found .
• startsWith()： Returns a Boolean value , Indicates whether the parameter string is in the header of the original string .
• endsWith()： Returns a Boolean value , Indicates whether the parameter string is at the end of the original string .
• ES6 Provided in As a string template tag . In two The part between will be used as the value of the string , No matter what line you change , Even join js Script .

3. Deconstruction expression

• An array of deconstruction

For example, there is an array ：

let arr = [1,2,3]

I want to get the value , Only through corner markers .ES6 It can be like this ：

const [x,y,z] = arr;// x,y,z Will work with arr Each position in the 
//  And then print 
console.log(x,y,z);

• Object to deconstruct

For example, there is a person object ：

const person = {
    
    name:"jack",
    age:21,
    language: ['java','js','css']
}

We can do that ：

//  Deconstruct the expression to get the value 
const {
    name,age,language} = person;
//  Print 
console.log(name);
console.log(age);
console.log(language);

4. Function optimization

Function parameter defaults

function add(a , b = 1) {
    
    return a + b;
}
//  Pass a parameter 
console.log(add(10));

Arrow function

When a parameter ：

var print = function (obj) {
    
    console.log(obj);
}
//  Shorthand for ：
var print2 = obj => console.log(obj);

Multiple parameters ：

//  The case of two parameters ：
var sum = function (a , b) {
    
    return a + b;
}
//  Shorthand for ：
var sum2 = (a,b) => a+b;

There's more than one line of code , It can be used {} Cover up

var sum3 = (a,b) => {
    
    return a + b;
}

The function properties of an object are abbreviated

For example, a Person object , There are eat Method ：

let person = {
    
    name: "jack",
    //  before ：
    eat: function (food) {
    
        console.log(this.name + " Eating " + food);
    },
    //  Arrow function version ：
    eat2: food => console.log(person.name + " Eating " + food),//  I can't get it here this
    //  A simplified version ：
    eat3(food){
    
        console.log(this.name + " Eating " + food);
    }
}

Arrow function combined with deconstruction expression

For example, there is a function ：

const person = {
    
    name:"jack",
    age:21,
    language: ['java','js','css']
}

function hello(person) {
    
    console.log("hello," + person.name)
}

If you use arrow functions and deconstruction expressions

var hi = ({
     name}) =>  console.log("hello," + name);

5.map and reduce

map()： Receive a function , All elements in the original array are processed with this function and put into the new array to return .

reduce()： Receive a function （ must ） And an initial value （ Optional ）.

The first parameter （ function ） Receive two parameters ：

• The first parameter is the last time reduce Results of processing
• The second parameter is the next element in the array to be processed

6. Object extension

ES6 to Object Developed many new methods , Such as ：

• keys(obj)： Get all of the objects key Forming an array of
• values(obj)： Get all of the objects value Forming an array of
• entries(obj)： Get all of the objects key and value Two dimensional array formed . Format ：[[k1,v1],[k2,v2],...]
• assign(dest, …src) ： Will be multiple src The value of the object copy to dest in （ Shallow copy ）.

7. Array extension

ES6 Many new methods have been added to the array ：

• find(callback)： Of the array instance find Method , To find the first qualified member of the array . Its argument is a callback function , All array members execute the callback function in turn , Until you find out that the first return value is true Members of , Then return to the member . If there are no eligible members , Then return to undefined.
• findIndex(callback)： Of the array instance findIndex Method usage and find The method is very similar , Returns the location of the first qualified array member , If all the members are not eligible , Then return to -1.
• includes( Array elements )： And find similar , If it matches the element , Then return to true, The representative found .