ES6 let, const, destructuring assignment, arrow function and extension operator

ES6, the full name of ECMAScript 6.0, is the next version standard of JavaScript.

1 let、const

let command :

ES6 added the let command to declare variables. Its usage is similar to var, but the declared variable is only valid within the code block where the let command is located .

Within a code block, a variable is not available until it is declared with the let command. Syntactically, this is called a "temporary dead zone".

let does not allow repeated declaration of the same variable in the same scope, therefore, parameters cannot be redeclared inside the function.

ES5 only has global scope and function scope, but no block-level scope, which brings many unreasonable scenarios, and inner variables may override outer variables. let actually adds block-level scope to JavaScript.

The above function has two code blocks, both of which declare the variable n, and output 5 after running. This means that outer code blocks are not affected by inner code blocks. If you use var to define the variable n twice, the final output value is 10.

const command :

const declares a read-only constant. Once declared, the value cannot be changed , which means that once the const variable is declared, it must be initialized immediately and cannot be left for later assignment.

illustrate:

The scope of const is the same as the let command: it is only valid in the block-level scope where the declaration is located

Constants declared by const cannot be declared repeatedly like let.

The constant declared by the const command is also not promoted, and there is also a temporary dead zone, which can only be used after the declared position.

2 Destructuring assignment

ES6 allows to extract values ​​from arrays and objects and assign values ​​to variables according to certain patterns, which is called destructuring.

2.1 Destructuring of arrays

		const arr = ["香蕉", "西瓜", "梨", "苹果"];
        // const apple = arr[3];
        // const pear = arr[2];
        // const banana = arr[0];
        // console.log(apple, pear, banana); // 苹果 梨 香蕉
        // 使用解构进行改写
        // const [banana, watermalon, pear, apple] = arr;
        const [banana, , pear, apple] = arr;
        console.log(apple, pear, banana);
        // 把数组中的第一个元素放在变量banana2中，将剩余的元素存入一个新数组fruits
        const [banana2, ...fruits] = arr;
        console.log(banana2, fruits); // 香蕉 (3)['西瓜', '梨', '苹果']

2.2 Object Deconstruction

		const obj = {
    
     a: 10, b: 20, c: 30 };
        // es5的获取方式。
        // let a = obj.a;
        // let b = obj['b'];
        // 使用es6的解构赋值进行改写
        const {
    
     a, c } = obj;
        console.log(a, c); // 10 30
        // const { a: num } = obj; // num = 10;
        // const { z: num } = obj; // num = undefined
        const {
    
     z = 50 } = obj;
        console.log(z); // 50

3 Arrow functions

ES6 allows the use of "arrows" (=>) to define functions.

		// 函数表达式
        let fun = function () {
    
    
             // 匿名函数
             console.log("a+b");
        }
        // 使用箭头函数改写
        let fun = () => {
    
    
            // 匿名函数
            console.log("a+b");
        };
		fun();

		let getMax = (a, b = 50) => {
    
    
            return Math.max(a, b);
        };
        let max = getMax(18);
        console.log(max);
		// 可以省略箭头函数的小括号,当只有一个参数时。箭头函数后面的大括号也可以省略，当只有一条语句时
        let getAbs = a => Math.abs(a);
        console.log(getAbs(-19));

        // 箭头函数中的this和普通函数中的this有区别
        let a = 1000;
        var obj = {
    
    
            a: 100,
            getA: function () {
    
    
                return this.a;
            },
            getA2: () => {
    
    
                return this.a; // 箭头函数中的this,表示的是函数定义时this的指向。
            }
        }
        // 调用对象的getA和getA2
        console.log(obj.getA()); // 100
        console.log(obj.getA2()); // undefined	

4 spread operator

The spread operator is three dots (…).

Application of spread operator:

1> copy array

const arr = ["香蕉", "西瓜", "梨", "苹果"];		
const arr3 = [...arr]; 
console.log(arr3); // ['香蕉', '西瓜', '梨', '苹果']
const nums = [1, 2, [3, [4, 5]]];
const nums2 = [...nums]; // 这个是进行浅拷贝
console.log(nums2); // [1, 2, [3, [4, 5]]]

2> splicing array

const arr1 = [1, 2];
const arr4 = [3, 4];
const arr5 = [5, 6];
const bigArr = [...arr1, ...arr4, ...arr5];
console.log(bigArr); // [1, 2, 3, 4, 5, 6]

3>Used in conjunction with deconstruction

// 将第一个元素放入banana2中，其余的存入fruits中
const arr6 = ["香蕉", "西瓜", "梨", "苹果"];
const [banana2, ...fruits] = arr6;
console.log(banana2, fruits) // // 香蕉 (3) ['西瓜', '梨', '苹果']

4> As a function parameter

const fun = (...params) => {
    
    
	console.log(params); // [10, 20, 30, 10, 50, 40, 60]
	// 进行求和
	let sum = 0;
	params.forEach(item => sum += item);
		return sum;
};
    const sum = fun(10, 20, 30, 10, 50, 40, 60);
    console.log(sum); // 220

Using the spread operator on objects

const obj = {
    
     a: 10, b: 20 };
// 对象的拷贝
const obj2 = {
    
     ...obj };
const obj3 = {
    
     c: 50, a: 80, ...obj, };
const obj4 = {
    
     ...obj, c: 50, a: 80 };
console.log(obj3); // {c: 50, a: 10, b: 20}
console.log(obj4); // {a: 80, b: 20, c: 50}