Web笔记之ES6

一、为何要学习ES6

        ① ES6 的版本变动内容最多，具有里程碑意义
        ② ES6 加入许多新的语法特性，编程实现更简单、高效
        ③ ES6 是前端发展趋势，就业必备技能

二、ES6 兼容性

        可通过网址查看：ECMAScript 6 compatibility table

三、let 声明变量以及声明特性

        let 可以像 var 一样用来声明变量，但两者有区别：
        1 let 的变量不能重复声明，但可以修改变量，比如：
                let a = 1;
                let a = 2;
                打开 F12 发现会报错
                let a = 2;
                a = 4;
                console.log(a);   //成功打印 4
        2 let 是块级作用域
                也就意味着 let 只能在代码块内部使用，比如：
                        {
                                let a = 2；
                                console.log(a);    //成功打印2
                        }
                        console.log(a);    //报错
        3 不存在变量提升
        4 不影响作用域链，比如：
                {
                        let a = 2;
                        function f() {
                                console.log(a);   //成功打印 2
                        }
                        f();
                }
        5 let 之间都是独立存在的互不影响

四、const 声明常量以及特点

        常量：值不能修改的变量
        1 必须赋初始值
                const A;
                打开 F12 发现会报错
        2 一般常量使用大写(人为要求)
        3 常量的值不能赋值修改
                const A = 2;
                A = 4;
                console.log(A);   //报错
        4 常量不能重复声明
        5 const 是块级作用域
                {
                        const A = 2;
                }
                console.log(A);    //报错
        6 对于数组和对象的元素修改，不算做对常量的修改，不会报错
                const arr = ['a','b']
                arr.push('c')
                console.log(arr);    //成功打印 ["a", "b", "c"]
                因为 arr 存储的是复杂数据类型，那么 arr 在内存中是以地址的形式存储的，只要地址不变就不会报错

五、解构赋值

        ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
        1 数组的解构赋值
                const arr = ['桐谷和人','张楚岚']
                let [dj,yrzx] = arr;    //dj 与 yrzx 都是变量
                console.log(dj,yrzx);  //成功打印 桐谷和人 张楚岚
        2 对象的解构赋值
                const sishen = {
                        name: '黑崎一护',
                        age: 18,
                        fighting: function() {
                                console.log('我会卍解');   //成功打印 我会卍解
                        }
                }
                let {name,fighting} = sishen;   //变量名要与对象里的属性名、方法名一致，不然会报错
                fighting()
                console.log(name);    //成功打印 黑崎一护

六、模板字符串

        ES6 引入了新的声明字符串的方式，叫反引号(``)
        1 声明
                let str = `易斩千击`;
                console.log(str);   //成功打印 易斩千击
        2 内容中可以直接出现换行符
                let str = `<ul>
                                      <li>abc</li>
                               </ul>`
                把 反引号(``) 换成 单引号('') 或 双引号("") 都会报错
        3 变量拼接
                let str = `易大师`;
                let out = `${str}低分段乱杀`
                console.log(out);   //成功打印 易大师低分段乱杀

七、对象的简化写法

        1 ES6允许在大括号里面直接写入变量名和函数名，作为对象的属性和方法。
                let name = '陈子豪';
                function late(){
                        console.log(`${name}天天迟到`);
                }
                const anchor = {
                        name,
                        late
                }
                console.log(anchor);   //成功把 anchor 对象打印出来
                anchor.late()    //成功打印 陈子豪天天迟到
        2 在对象里创建方法可以简写
                const o = {
                        name: 'abc',
                        run() {
                                console.log(666);
                        }        
                }
                o.run()   //成功打印 666

八、箭头函数以及声明特点

        ES6允许使用 箭头(=>) 定义函数。
        1 声明函数以及调用函数
                let 函数名 = (形参) => {
                }
                函数名(实参);
        2 箭头函数的 this 无法改变
                this 是静态的，this 始终指向函数声明时所在作用域下的 this 值，相当于往上一层找
        3 箭头函数不能作为构造函数实例化对象
        4 箭头函数不能使用 arguments
        5 箭头函数的简写
                ① 当形参有且只有一个的时候，可以省略小括号，比如：
                        let fn = a => {
                                return a + a
                        }
                        console.log(fn(1));   //成功打印 2
                ② 当代码体只有一条语句的时候，可以省略花括号，比如：
                        let fn = (a) => a + a
                        console.log(fn(1));   //成功打印 2
                        此时 return 必须省略，因为语句的执行结果就是函数的返回值
        6 箭头函数适用场景
                ① 箭头函数适合与 this 无关的回调，比如࿱