ES6之let、const，解构赋值，箭头函数和扩展运算符

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准。

1 let、const

let命令：

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。

let不允许在相同作用域内，重复声明同一个变量，因此，不能在函数内部重新声明参数。

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景，内层变量可能会覆盖外层变量。let实际上为 JavaScript 新增了块级作用域。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8bh7xMW0-1676556464061)(C:\Users\zhaoyue\AppData\Roaming\Typora\typora-user-images\1675858835293.png)]$

上面的函数有两个代码块，都声明了变量n，运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是 10。

const命令：

const声明一个只读的常量。一旦声明不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

说明：

const的作用域与let命令相同：只在声明所在的块级作用域内有效

const声明的常量，也与let一样不可重复声明。

const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

2 解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

2.1 数组的解构

		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 对象的解构

		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 箭头函数

ES6 允许使用 “箭头”（=>）定义函数。

		// 函数表达式
        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 扩展运算符

扩展运算符是三个点（…）。

扩展运算符的应用：

1>拷贝数组

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>拼接数组

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>和解构连用

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

4>作为函数的参数

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

对象中使用扩展运算符

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}