A brief introduction to the new features of ES6

1. Scope of let, const and block

let allows the creation of block-level scopes, for example:

var a = 2;
{
let a = 3;
console.log(a); // 3
}
console.log(a); // 2

const is also a block-level scope, declaring a constant, the declared constant is similar to a pointer, it points to a reference , that is to say, this "constant" is not static, such as:

{ const ARR = [5,6]; ARR.push(7);// Console.log(ARR); whose value can be changed ; // [5,6,7] ARR = 10; // TypeError }

Precautions:

1. Variables declared by the let keyword do not have variable hoisting characteristics
2. let and const declarations are only valid in the closest block (in curly braces)
3. When using constant const declaration , please use uppercase variables , such as: CAPITAL_CASING
4. const must be assigned at the time of declaration

2. Arrow function

Arrow functions make the code more concise, and the this in the function is always bound to always point to the object itself.
Ordinary functions and arrow functions:

var getPrice = function() {
return 4.55;
};
// Implementation with Arrow Function
var getPrice = () => 4.55;

3. Default value of function parameters

ES6 allows you to set default values ​​for function parameters:

let getFinalPrice = (price, tax=0.7) => price + price * tax;
getFinalPrice(500); // 850

4. Spread / Rest operator

The Spread / Rest operator refers to..., whether it is Spread or Rest depends on the context.

When used in an iterator, it is a Spread operator:

function foo(x,y,z) {
console.log(x,y,z);
}
let arr = [1,2,3];
foo(…arr); // 1 2 3

When used as a function to pass parameters, it is a Rest operator:

function foo(…args) {
console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

5. Object lexical expansion

ES6 allows declarations to use shorthand syntax when object literals are used to initialize property variables and function definition methods, and allow calculation operations in object properties:

function getCar(make, model, value) { return { // Shorthand variable make, // equivalent to make: make model, // equivalent to model: model value, // equivalent to value: value // expressions can be used for attributes calcd [ 'the make' the make +]: to true, // ignore keyword abbreviated object functions depreciate () { this.value - = 2500; } }; } the let getCar CAR = ( 'Barret', 'Lee', 40000) ; // output: { // make:'Barret', // model:'Lee', // value: 40000, // makeBarret: true, // depreciate: [Function: depreciate] //}







function

6. Binary and octal literals

ES6 supports binary and octal literals. You can convert them to octal values by adding 0o or 0O in front of the number:

oValue = 0o10 the let;
the console.log (oValue); //. 8
the let bValue = 0b10; // use binary 0bor 0B
console.log (bValue); // 2

7. Deconstruction of objects and arrays

Destructuring can avoid intermediate variables during object assignment:

function foo() {
return [1,2,3];
}
let arr = foo(); // [1,2,3]
let [a, b, c] = foo();
console.log(a, b, c); // 1 2 3
function bar() {
return {
x: 4,
y: 5,
z: 6
};
}
let {x: x, y: y, z: z} = bar();
console.log(x, y, z); // 4 5 6

8. Template syntax and delimiters

There is a very concise way in ES6 to assemble a bunch of strings and variables.

${…} is used to render a variable
作为分隔符 let user = 'Barret'; console.log(Hi ${user}!`); // Hi Barret!

9、for…of VS for…in

for...of is used to traverse an iterator, such as an array:

let nicknames = [‘di’, ‘boo’, ‘punkeye’];
nicknames.size = 3;
for (let nickname of nicknames) {
console.log(nickname);
}
// 结果: di, boo, punkeye

for...in is used to traverse the attributes in the object:

let nicknames = [‘di’, ‘boo’, ‘punkeye’];
nicknames.size = 3;
for (let nickname in nicknames) {
console.log(nickname);
}
Result: 0, 1, 2, size

10、Promises

ES6 has native support for Promises. A Promise is an object waiting to be executed asynchronously. When its execution is completed, its state will become resolved or rejected.

var p = new Promise(function(resolve, reject) {
if (/* condition /) {
// fulfilled successfully
resolve(/ value /);
} else {
// error, rejected
reject(/ reason */);
}
});

Every Promise has a .then method, this method accepts two parameters, the first is the callback to handle the resolved state, and the other is the callback to handle the rejected state:

p.then((val) => console.log("Promise Resolved", val),
            (err) => console.log("Promise Rejected", err));