ES6/06/ES6简介，ES6新增语法，let声明变量，const声明常量，var,let和const总结，数组解构，对象解构，箭头函数，剩余参数

本文链接：https://blog.youkuaiyun.com/Java_53/article/details/106500549

ES6简介

ES全称：ECMAScript ;
由ECMA国际化组织制定的标准脚本语言的标准化规范；
为什么使用ES6?
每一次标准的诞生都意味着语言的完善，功能的加强，JavaScript语言本身也有一些令人不满意的地方:
1，变量提升特性增加了程序运行时的不可预测性；
2，语法过于松散，实现相同的功能，不同的人可能会写出不同的代码；

ES6的新增语法

let 声明变量

ES6中新增的let变量声明（块作用域中变量声明，即：{}内用let声明的变量只能在其它作用域中使用）；
1，块级作用域，防止循环变量变成全局变量；
2，let不存在变量提升，（即：只能先声明变量，再使用变量）；
3，let关键字声明的变量具有暂时性死区特性；
var num=10;
if(true){
console.log(num);//
let num =20;
}

let的一个面试题：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>var和let关键字面试题</title>
</head>

<body>
    <script>
        var arr = [];
        for (var i = 0; i < 2; i++) {
            arr[i] = function () {
                console.log(i);
            }
        }
        //到此处，由var声明的i成为全局变量，值为2，arr中存了两个函数，函数体内的i向上级查找到全局变量i，且值为2，故调用两个函数后，输出两个2
        arr[0]();
        arr[1]();
        console.log("-------------------------1");
        let arr2 = [];
        for (let j = 0; j < 2; j++) {
            arr2[j] = function () {
                console.log(j);
            }
        }
        arr2[0]();
        arr2[1]();
        //每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行输出的是自己上一级（循环产生的块级作用域）作用域下的值；
        console.log("-------------------------2");
    </script>
</body>

</html>

const 声明常量

1，基本数据类型的数据用const声明为常量后不可再改变；
2，引用数据类型的数据用const声明为常量后不可改变引用数据地址（即：不可重新赋值），但是可以改变引用数据对应数据的值；
例：const arr =[0,1];
const arr =[10,20];//将报错，不可更改引用数据的地址
arr[0]=10;arr[1]=20;//可行，没有改变引用数据的地址，只改变引用数据对应数据的值

var ,let 和const 总结

ES6 新增语法

1，数组解构

2，对象解构

3，箭头函数

箭头函数的作用：用以简化函数定义语法
() =>{
//函数体
}

1,如果函数体中只有一句代码且代码的执行结果就是返回值，可以省略大括号(和return)；

例：let getX = (x,width)=>{
return x-width;
}
可以简写为：
let getX =(x,width)=>x-width;//箭头函数的函数体中只有一句代码且为给出返回值的代码，可以省略大括号（和return）

2,如果箭头函数中的形参只有一个，形参外侧的小括号也是可以省略的

let displayX =(x)=>{
alert(x);
}
可以简写为：
let displayX = x=>{//形参只有一个，可省略小括号
alert(x);
}

箭头函数不绑定this，箭头函数没有自己的this关键字，如果在箭头函数中使用this，this关键字将指向箭头函数定义位置中的this（系统特性：this的指向从当前作用域中找不到，系统将从它的上一级作用域中去找），所以可能要用到call(),apply(),bind()方法去改变this指向

注意：对象（var obj ={}）中的内容并不是在对象的作用域中的，对象并不能产生作用域；

4，剩余参数

function(参数1,参数2…参数n){}
…参数n ：参数n将以数组接收参数1和参数2之后剩余的所有参数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>剩余参数</title>
</head>

<body>
    <script>
        const sum = (...args) => {//...args表示剩余的参数用数组args来接收
            let total = 0;//所有参数之和
            args.forEach(item => total += item);//遍历数组并进行累加
            return total;//函数返回所有参数之和
        }
        console.log(sum(10, 20));
        console.log(sum(10, 20, 30));

    </script>
</body>

</html>