ES6学习笔记（1）——快速入门

前言：什么是ES6？

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

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5
版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

快速入门

1.let关键字

格式： let 变量名 = 值
注意： let 是在代码块内有效，var 是在全局范围内有效,在代码块外部调用代码块let定义的变量将报错

<script>

        //es6里面如何定义变量
        // var a = 1; 原来的定义变量

        //es6定义变量
        //1.创建代码块，定义变量
        {
    
            var a = 10;
            let b = 20;
            //let定义的变量只能在
            console.log(b);
        }

        //2 在代码块外面输出
        console.log(a);
        console.log(b);//Uncaught ReferenceError: b is not defined

    </script>

控制台输出：

2.const关键字

格式： const 变量名 = 值
注意：const关键字定义的是常量，不能修改，且必须一次性赋值。

<script>
        //定义常量
        const PI = 3.14;
        console.log(PI);
        // const a;//常量定义了必须赋初始值
        const a;
        console.log(a);

    </script>

控制台输出：
结果是直接报错，连定义的PI也不能输出了。

测试了先定义后赋值，也不允许

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

3.数组解构：

ES6给出了新的一次性定义多个变量的方式，可以简化传统的冗长的写法
格式： let [变量1，变量2…] = [值1，值2…]
注意：左右两边括号里的变量和值必须一一对应。

<script>

        //传统写法
        var a=1,b=2,c=3;
        console.log(a,b,c);

        //es6写法
        let [x,y,z] = [1,2,3];
        console.log(x,y,z);

    </script>

控制台输出：

4.对象解构：

格式： let{key1,key2…} = 对象

<script>
    //定义对象
    let user = {
    "name":"lucy","age":18};

    //传统方法从对象中获取值
    console.log(user.name,user.age)

    //es6写法·
    let{
     name, age} = user;

    console.log(name,age);
</script>

控制台输出：

5.模板字符串`

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

格式： · 内容 ·（`是反引号，是键盘上ESC下面的按键，不是单引号）

<script>
    //使用 ` 符号可以实现换行

    let str1 = `hello, es6`

    console.log(str1);

    //2.在 `符号里面可以使用表达式获取变量值
    let name = "lucy";
    let age = 20;

    let str2 = `hello,${
      name},age is ${
      age}`;

    console.log(str2)


    //3.在`符号里面可以调用方法
    function fun(){
    
        return "hello es6";
    }

    let str3 = `demo, ${
      fun()}`;
    console.log(str3);


</script>

控制台输出：

6.声明对象简写

<script>
    const name = "lucy";
    const age = 10;

    //传统方式
    const person = {
    "name":name,"age":age};

    console.log(person);

    //es6写法
    const person2 = {
    name,age};
    console.log(person2);
</script>

控制台输出

7.对象简写

<script>
    
    //传统方式定义的写法
    const person1 = {
    
        say:function(){
    
            console.log("hello es6");
        }
    }

    person1.say();

    //es6写法:可以省略function
    const person2 = {
    
        say(){
    
            console.log("hello es6");
        }
    }

    person2.say();
</script>

控制台输出：

8.对象的拓展运算符…

拓展运算符**（…）**用于取出参数对象所有可遍历属性然后拷贝到当前对象。

<script>


    //对象拷贝
    let person1 = {
    "name":"lucy","age":18};
    
    //person1中的内容会复制给person2
    let person2 = {
    ...person1};

    console.log(person1);
    console.log(person2);


    //合并对象
    let name = {
    "name":"mary"};
    let age = {
    "age":16};

    let person3 = {
    ...name,...age};
    console.log(person3);

</script>

控制台输出

9.箭头函数

箭头函数:类似于Java里面的lambda表达式

格式： var 方法名 = 参数 => 函数体（返回值）

<script>
    //箭头函数 var 方法名 = 参数 => 函数体（返回值）
    //传统方法
    var fun = function(m){
    

        return m;
    };

    //使用箭头函数创建
    var fun2 = m => m;

    console.log(fun(8));
    console.log(fun2(8));

    //复杂的方法
    var fun3 = function(a,b){
    
        return a+b;
    }

    console.log(fun3(1,2));

    //箭头函数简化
    var fun4 = (a,b) => a+b;

    console.log(3,4);
    
</script>

控制台输出