ECMAScript6 (ES6 for short) is a JavaScript language standard officially released in June 2015, officially named ECMAScript 2015. Its goal is to make the JavaScript language usable for writing complex, large-scale applications as an enterprise-level development language. So what does it have to do with JavaScript?

In November 1996, Netscape, the creator of JavaScript, decided to submit JavaScript to the standardization organization ECMA, hoping that the language would become an international standard. The following year, ECMA released the first version of the standard document 262 (ECMA-262), which defined the browser scripting language and called it ECMAScript. This version became version 1.0.

The standard was written for the JavaScript language from the beginning, but it’s not called JavaScript for two reasons. Java is a trademark of Sun, and according to the license agreement, only Netscape can legally use the name JavaScript, and JavaScript itself has been registered as a trademark by Netscape. Second, I want to show that the creator of this language is ECMA, not Netscape, so as to ensure the openness and neutrality of this language. ,

From: Introduction to ECMAScript

Thus, ECMAScript is an abstract class that defines a set of specifications, while JavaScript inherits a concrete implementation of the EMCAScript abstract class.

ES6 is also the latest specification for JavaScript. It defines a number of previously unavailable operations (like transiting from Java7 to Java8) that are widely used in mainstream front-end frameworks: Vue, Angular, React, etc. Learning these operations is an important part of understanding frameworks.

deconstruction

In ES6, if you need to fetch the value of a known array, you can declare it directly, instead of fetching the array first and iterating through it:

For those of you who are confused about array manipulation, turn left: common array manipulation in JavaScript

function breakfast() {
    return ['1'.'2'.'3'];
}
// Array traversal:
let arr = breakfast();
arr.forEach(function (v,i,r) {
    console.log(v);
})
/ / ES6 writing:
let [one,two,three] = breakfast();
console.log(one,two,three); / / 1 2 3
Copy the code

Deconstruction can also be used in objects:

function lunch() {
    return {
            one: '1'.two: '2'.three: '3'
           };
}
// Parse the object
let obj = lunch();
console.log(obj.one,obj.two,obj.three)

// ES6, note the mapping order here
let {one: One,two: Two,three: Three} = lunch();
console.log(One,Two,Three);/ / 1 2 3
Copy the code

Template string

${variable name} can be inserted directly into a variable that needs concatenation without string concatenation.

Spring framework flavor now…

let dessert = 'cake',drink = 'milk';
// Note that the symbols here are not single quotes
let breakfast = 'I ate it today${dessert}And drank${drink}`;
console.log(breakfast);// I had cake and milk today
Copy the code

function

1. Default function parameter values

You can specify the default value directly in the parameter of the method, if no value is passed:

function breakfast(dessert = 'cake',drink = 'tea') {
    // The template string appears again, remember?
    return `${dessert} ${drink}`
}
console.log(breakfast()) //cake tea
Copy the code

Have you ever wondered what the output would be if I didn’t have a default value and didn’t pass it?

Undefined, because undefined variables are called undefined in JavaScript. Ah? So why not Null? What’s the difference?

Turning the corner, not sending: data types in JavaScript

2. Mutable parameter list

Be… A variable is an array of parameters that you pass and you receive:

function breakfast(dessert = 'cake',drink = 'tea'. foods) {
    console.log(dessert,drink,foods);
}
console.log(breakfast('cookie'.'coke'.'apple'.'peach')) // cookie coke (2) ["apple", "peach"]
Copy the code

Oh, yes! As with Java mutable arguments, this case of overloading in Java takes precedence over calling M1. Is it the same with js?

public static void main(String[] args) {
     m1(1.2."aaa"."bbb");
}
static void m1(int i1,int i2,String s1,String s2){
     System.out.println("I am i1");
}
static void m1(int i1,int i2,String... args){
     System.out.println("I am i2");
}
Copy the code

What do you think bro, **JavaScript does not natively support overloading! ** It always receives what comes through:

JavaScript can be reloaded dynamically, but I won’t go into that here.

3. Arrow function

The definition of a method can be simplified by using arrow functions (called: little Lambda expressions – funny) :

let breakfast = function(dessert,drink){
    return dessert + drink;
}

let breakfast = (dessert,drink) = > {
    return dessert + drink;
};
Copy the code

object

1. Object expressions

Before defining objects in JavaScript:

let dessert = 'cake',drink = 'coke';
let food = {
    dessert: dessert,
    drink: drink,
    breakfast: function () {
        return 0; }}console.log(food);// {dessert: "cake", drink: "coke", breakfast: ƒ}
Copy the code

ES6 simplifies the definition of object members in JavaScript, so don’t be confused when someone writes:

let dessert = 'cake',drink = 'coke';let food = {    dessert,    drink,    breakfast(){        return 0;    }}console.log(food);// {dessert: "cake", drink: "coke", breakfast: ƒ}
Copy the code

2. Assign object attributes

Here are three ways to add an attribute to a food object:

let food = {};let dessert = 'dessert';// If the attribute exists, modify it; Dessert = 'cake'; food['dessert'] = 'cake'; food[dessert] = 'cake';
Copy the code

modules

In ES6, you can export a module that you want to reuse on the current page, and import it on another page.

The output here needs to be resolved with the help of the webpack tool. It doesn’t matter if you don’t understand it, the reuse of components in Vue will be mentioned later. We just need to understand that this feature comes from ES6.

Export module:

Webpacklet fruit = 'apple'; let dessert = 'cake'; function dinner(fruit,dessert) { console.log(`${fruit} ${dessert}`)}export { fruit, dessert, {}export default {dinner} is not required when importing the default module.
Copy the code

Import module:

Import {fruit,dessert} from "./04module"; import * as chef from "./04module"; console.log(fruit,dessert);
Copy the code