🍎前言

ECMAScript 6（简称 ES6）是 JavaScript 语言的下一代标准，在 2015 年 6 月正式发布。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。对于常见的ES6和JS是什么关系的话题呢，我在这里提一下：ES6是JS的规格，而JS是ES6的一种实现。

🍎语法

🔰let声明变量

演示作用域范围

<script>
    {
        var a = 1;
        let b = 2;
    }
    console.log("a = ",a);
    console.log("b = ",b);
</script>

输出结果：（可以看到let声明的变量是由作用域的范围的，而var恰恰相反）

演示变量声明

🔰const声明变量

<script>
    const a = 0;
    a = 1;
    console.log(a);
</script>

输出结果：（可以看到因为我对它进行了二次赋值，报错了）

🔰解构赋值

<script>
    // 同时声明多个变量并赋值
    let a = 1, b = 2;
    console.log(a, b)

    // ES6声明并赋值写法
    let [c, d] = [3, 4]
    console.log(c, d)
</script>

输出结果：

🔰模板字符串

<script>
    // 多行字符串
    let a = `窗前明月光
    床下鞋两双`;
    console.log(a);

    // 字符串中加入变量
    let b = "李太白";
    let c = `作者：${b}`;
    console.log(c);

    // 字符串中调用函数
    function x(){
        return "地雷埋下土";
    }
    let d = `${x()},双双入黄土`
    console.log(d);
</script>

输出结果：（没毛病吧，这诗，哈哈~）

🔰声明对象简化

<script>
    let age = 100
    let name = "李太白"
    // 传统
    let pro = { name: name, age: age }
    console.log("以前的写法：",pro)

    // ES6
    let pro2 = { name, age }
    console.log("ES6写法：",pro2)
</script>

输出结果：（可以看出没什么区别，但是简化了写法）

🔰定义方法简化

<script>
    // 以前得写法
    const person1 = {
        x1: function () {
            console.log("以前的写法")
        }
    }
    person1.x1();

    // ES6写法
    const person2 = {
        x2() {
            console.log("ES6写法")
        }
    }
    person2.x2();
</script>

输出结果：（能正常的调用，没毛病）

🔰对象拓展运算符

<script>
    // 对象的拷贝
    let person1 = { name: "李白", age: 10 };
    let someone = { ...person1 };
    console.log("对象的拷贝：",someone);

    // 对象的合并
    let name = { name: "李太白" };
    let age = { age: 100 };
    let person2 = { ...name, ...age };
    console.log("对象的合并",person2);
</script>

输出结果：

🔰箭头函数

<script>
    // 正常写法
    var f1 = function (a) {
        return a + 1;
    };
    console.log("正常写法：", f1(2));

    // ES6箭头函数写法：
    // 一个参数的写法
    var f2 = (a) => { return a + 1 };
    console.log("一个参数的写法：", f2(2));

    // 以上语句可以简化成
    // 只有一个参数可以不需要括号
    // 只有一条语句并且需要返回时可以不需要花括号
    var f3 = a => a + 1;
    console.log("一个参数写法的简化：", f3(2));

    // 多个参数的写法
    var f4 = (a, b) => a + b;
    console.log("多个参数的写法", f4(2, 3));

    // 无参数的写法
    var f5 = () => { console.log("乌拉~~~~~") };
    console.log("无参数的写法", f5());
</script>

输出结果：