超级实用的ES6语法

ES6，全称ECMAScript 6.0。它是JavaScript语言的下一代标准，于2015年6月正式发布。ES6 的出现主要是为了解决 ES5 的先天不足，比如JavaScript中没有类的概念。ES6的目标，是使得JavaScript语言可以适应更复杂的应用，成为企业级开发语言。下面就让我们一起看看ES6的新语法吧！

1. ES6新增的声明关键字

• let命令
  let用法类似于var：

var a = 1;
console.log(a); // 1
let b = 1;
console.log(b); // 1

但是let有它独有的特性：

1. 不存在预解析（没有变量的提升）：

console.log(a); // undefined
var a = 1;
console.log(b); // b is not defined
let b = 1;

2. 不允许重复声明：

var a = 10;
var a = 20;
console.log(a); // 20
// var的重复声明相当于重新赋值
let b = 10;
let b = 20;
console.log(b); // Identifier 'b' has already been declared
// let的重复声明会报错

• 块级作用域

ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景，比如以下两点。

1.内层变量可能会覆盖外层变量：

var a = 1;
function fn() {
    console.log(a);
    if (1) {
        var a = 2;
    }
}
fn(); // undefined

上面代码中，函数fn执行后，输出结果为undefined，原因在于变量提升，导致内层的a变量覆盖了外层的a变量。

2.循环中的计数器泄露：

var a = "hello world";
for (var i = 0; i < s.length; i++) {
    console.log(a[i]);
}
console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

而开发者更希望每个变量使用的区域应该都是独立的，因此ES6规定，只要是一个花括号，就是一个作用域。

{
    let a = 10;
    console.log(a); // 10   
}
	console.log(a); // a is not defined
	// 外部无法获取内部作用域中的值

• const
  作用：声明一个只读的常量。
  特性：const不允许被修改：

const a = 10;
a = 20;
console.log(a); // Assignment to constant variable

但是准确的来说，const声明的变量不允许修改地址，但是可以修改值：

const obj = { name: "admin" };
obj.name = "root";       // 可以改
obj = {};                // 不可以改
console.log(obj)

• class
  一般而言，强类型语言(java,c++,python)都有类(class)的概念，是某个对象抽象出来的模板，用来创造一批相同特点的对象。
  而JS作为弱类型的脚本语言，哪怕版本更新到ES6，还是没有类的概念，所以使用函数模拟了模板，通过关键字class，也能创造一批相同特点的对象。但是class的内部原理，还是构造函数。

class CreatePerson {   // CreatePerson 等价于构造函数名字
    constructor() { } // constructor 等价于构造函数的函数体
    my_function() { } // my_function 等价于绑定在构造函数原型上的方法
}

• export，import
  声明接口和引入接口（一般用于模块化开发中，模块的接口）。

2.ES6新增的箭头函数

特性：

1. 箭头函数相当于简化了的无名函数

let fn = () => {
    console.log("hello");
};
console.log(typeof fn);     //function
fn();

2. 在箭头函数中没有自己的this，而是使用外层函数的的this

let obj = {
    fn: function () {
        console.log(this); // Object
    },
    fun: () => {
        console.log(this); // Window
    },
    name: "admin"
}
obj.fn();
obj.fun();

3. 箭头函数内部没有自己的arguments

let fn = () => {
    console.log(arguments); // 报错，arguments is not defined
}
fn(1, 2, 3);

4. 当形参只有一个时，可以省略小括号

let fn = a => {
    console.log(a); // hello
}
fn("hello");

5. 如果想将函数的内容返回，可以省略花括号的同时，省略return（仅限简单语句）。

let fn = a => "0" + a;
var b = fn(1);
console.log(b); // 01

注意：
1.一般来说，箭头函数用在回调函数上，是比较方便的，比如：

let arr = [3, 6, 2, 1, 7, 8];
arr.sort(function (a, b) {
   return a - b;
});
arr.sort((a, b) => a - b);
console.log(arr);

2.事件监听式绑定事件的方法，不要使用箭头函数

document.addEventListener("click", () => {
        console.log(this);       // window，所以事件处理函数不适合使用箭头函数
    })

3.ES6新增的处理默认参数的方式

可以把默认值直接写在函数的形参上：

function fn(a = "hello", b = "world") {
    console.log(a); // hello
    console.log(b); // world
}
fn();

4.ES6新增的解构赋值

1. 数组、字符解构赋值一一对应：

let arr = ["h", "e", "l", "l", "o"];
let [a, b, c, d, e] = arr;
console.log(a, b, c, d, e); // h e l l o

2. 对象的解构赋值：按照对象的键名解构：

let obj = {
   name: "Admin",
    age: 18,
    sex: "男",
    like: "ball",
    show: () => {
        this是window, 不能通过this找到obj的name了
        console.log(this.name);
    }
}
let { show, age, like, color } = obj;
console.log(show); // ()=>{}
console.log(age); // 18
console.log(like); // ball
console.log(color); // undefined

解构赋值的妙用：

1. 利用解构赋值将两个变量的值互换：

var a = 10;
var b = 20;
var [a, b] = [b, a];
console.log(a, b); // 20 10

2. 函数的参数的快速解析

function fn([q, z]) {
    console.log(q); // hello
    console.log(z); // world
}
let arr = ["hello", "world"]
fn(arr);

5.新增的字符串的拼接

通过反引号 ``，类似于双引号" "和单引号’ ’
特性：

1. 支持字符串的换行

let str = `h
            e`
console.log(str);  // h和e换行了

2. 在``内可以通过${}拼接变量

let a = 10;
let str = `价格：${a}`; // 价格：10
console.log(str);

6.ES6新增的展开运算符

1. 直接展开数组（超级实用！）：

let arr = [4, 5, 6, 7, 8];
console.log(...arr); // 4 5 6 7 8

2. 将一个数组插入另外一个数组中：

let arr1 = [4, 5, 6];
let arr2 = ["h", ...arr1, "w"];
console.log(arr2); // ["h", 4, 5, 6, "w"]

3. 多个形参的函数传参：

function fn(a, b, c, d, e) {
    console.log(a);  // 4
    console.log(b);  // 5
    console.log(c);  // 6
    console.log(d);  // 7
    console.log(e);  // 8
}
let arr = [4, 5, 6, 7, 8];
fn(...arr);

小结：

总之，ES6中有趣的语法远不止这些，这些语法都有利于精简代码，高效开发。尽管目前还有一些低版本浏览器不支持，但我相信在不久的未来，ES6一定会成为主流！当然，还有ES7、8、9…
于此同时也希望疫情尽快好转，中国加油！逆战必胜！