An introduction to ES6 syntax

ECMAScript + BOM + DOM server: javascript = ECMAScript + Built-in core module (FS HTTP)

What is ECMAScript? It’s a specification. ECMA is an association of organizations that make rules. They developed an ECMAscript specification, which specifies the scripting language implementation. Var function fnName (); var function fnName ();

During the development of JS there are many versions of the iteration we previously learned the version of ECMAscript5

Now learn about the ECMAScript6 version, also known as the ES6 version. Many new syntactic features have been introduced. For example, to declare a constant, use the let declaration variable const.

The disadvantages of var and the let keyword

The disadvantages of using the var keyword to declare variables:

1. The variables declared by var are pre-parsed, causing logic confusion, so you can use them first and declare them later

2, var can be repeated to define the same variable, logic error, the second time should change the variable, not the definition

3. Var is used in for loop conditions, causing for loop pollution problem

4. Variables declared by var have no block-level scope (scope in ES5: global and local)

// a = 10; // a = 10; // console.log(a); // a = 10; // a = 10; // var a = 30; // console.log(a); // for(var I =0; i<10; i++){ // console.log(i); // } // console.log("====================="); // console.log(i); Var b = 200; var b = 200; var b = 200; // } // console.log(b);Copy the code

The let keyword in ES6 addresses all of these issues:

// console.log(a); // let a = 10; // let a = 10; // let a = 30; // for(let I =0; i<10; i++){ // console.log(i); // } // console.log("====================="); // console.log(i); {let b = 200; } console.log(b); / / an errorCopy the code

So, the characteristics of let:

1, let declared variables are not pre-parsed, there is no variable promotion

2, let can not define the same variable twice

3, let is used in for loop conditions, does not cause for for loop pollution problems

4, let declared variables have block-level scope (scope in ES6: global and local and block-level scope)

Define constants as const

1. This defined quantity is not allowed to be modified. Modify the error.

2. Generally, for the most part, we write const quantities in uppercase.

3. An object that introduces a module can also be const and can be named in lowercase.

4. Object constants whose properties can be modified

5. Each item in an array constant can be modified

Var PI = 3.141592653; console.log(PI); PI = 3.5; Console.log (PI); console.log(PI); / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- const PI = 3.141592653; // Define the constant PI = 3.5; / / error / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- const OBJ = {name: "nodejs", age:11, email:"[email protected]" }; OBJ = {}; Obj. job = "[email protected]"; Console. log(OBJ); //{ name: 'nodejs', age: 11, email: '[email protected]' } //---------------------------------------------------- const ARR = [10, 0, 30]; ARR[1] = 20; console.log(ARR); //[10, 20, 30]Copy the code

3. Deconstruct grammar

3.1. Object deconstruction

Let name = {name:"nodejs", age:11, email:"[email protected]"} let name = "zhangsan"  let name = obj.name; let age = obj.age; let email = obj.eamil; // Let name = obj["name"]; let age = obj["age"]; let email = obj["email"]; Let {name, email, age} = obj; Console. log(name, age, email); let {name} = obj; // Partial deconstruction is equivalent to: let name = objecti.name console.log(name); let {name:myName} = obj; // Partial destruct alias is equivalent to: let name = objecti.name console.log(myName); // obj = obj; // obj = obj; Let {name} = obj; let {name} = obj; let {name} = obj; 5, let {name:myName} = obj; I gave myName a name called myName, and I took obj's name attribute and assigned it to this new variable called myNameCopy the code

3.2. Array deconstruction

let arr1 = [10, 20, 30]; let [a, b, c] = arr1; console.log(a); //10 console.log(b); //20 console.log(c); Let [d] = arr1; console.log(d); //10 let [ , ,f] = arr1; console.log(f); Let arR2 = [1, 2, [10, 20, 30]]; let [ j, k, [x, y, z]] = arr2; console.log(j); //1 console.log(k); //2 console.log(x); //10 console.log(y); //20 console.log(z); / / 30Copy the code

3.3. String deconstruction

let string1 = "xyz"; let [a,b,c] = string1; console.log(a); //x console.log(b); //y console.log(c); //z string1[1] = "Y"; console.log(string1); // xyz cannot modify console.log(string1[1]); // yCopy the code

4. Template string

var userInfo = { id: 1, name: 'andy', email: '[email protected]'} the userId is XXX, my name is XXX, my email is XXX; /*var tmpl = 'the userId is ' + userInfo.id + ', my name is ' + userInfo.name + ', my email is ' + userInfo.email; console.log(tmpl); */ var es5tpl = 'the userId is xxx, my name is xxx, my email is xxx'; // ES6 provides a syntax for representing a string, using a backquote identifier; "" // 1. Allow newlines 2. Var infos = 'lorem'; var tmpl = `the userId is ${userInfo.id}, my name is ${userInfo.name}, string is ${infos} my email is ${userInfo.email}`; Shift + 'console.log(TMPL);Copy the code

Five, es6 object simplified writing method

/*var name = 'andy'; var age = 12; var userInfo = { id: 1, name: name, age: age } console.log(userInfo); */ let id = 12; let name = 'andy'; let age = 12; let fn = function(){ console.log(`my name is ${this.name}` ); } // let userInfo = {id} // Let userInfo = {id} // Let userInfo = {id} // Let userInfo = {id} } console.log(userInfo);} console.log(userInfo);} console.log(userInfo); userInfo.fn();Copy the code

6. ES6 Other Matters needing attention

Note: ES6 syntax features are fine if implemented on higher versions of NodeJS, which support ES6;

ECMAScript2015 ECMAScript2015 ECMAScript2015 ECMAScript2015 ECMAScript2015 ECMAScript2015