ES6新特性 ②

嗨嗨害，我又来水文了！ 水归水，ES6这方面的东西，还是建议看看阮一峰老师的那个，传送入口

模板字符串

除了ES5的 '' ""声明字符串 , ES6 引入了新的声明字符串的方式 使用反引号 阮一峰建议：静态字符串用单引号或反引号，动态字符串用反引号

1.声明

    let str = `我也是一个字符串!`;
    console.log(str, typeof str); // string

2.内容中可以直接出现换行符 ES5以前如果字符串换行要用 + 连接后面的内容

        let str2 = `<ul>
                        <li>hello1</li>
                        <li>hello2</li>
                        <li>hello3</li>
                    </ul>`
        console.log(str2);

3.变量拼接

    let SKTT1 = 'Faker';

        let out = `${SKTT1}是我心目中最强的中单！！`;  // ${}是格式
        console.log(out);

以前的字符串拼接是 + 号，比如

    let out = SKTT1 + '是我心目中最强的中单！！';

简化对象写法

ES6 允许在大括号里边，直接写入变量和函数，作为对象的属性和方法 因为这样的书写更加简洁，算是一个语法糖

        let name = "Guguuuu";
        let change = function () {
            console.log('你真的帅啊!');
        }

以前是这么写的：

    const legend = {
            name: name,
            change: change  // 之前是这么写，但是重复了，看起来让人不爽
            fn:function(){
                    console.log("长路漫漫唯剑作伴");
             } 之前声明方法是这样写的
        }

现在可以这么写：

        const legend = {
            name,
            change,      //可以直接把变量和函数写进来，作为对象的属性和方法
            fn() {      //简化了声明方法的写法
                console.log("长路漫漫唯剑作伴");
            }
        }

箭头函数

ES6 允许使用 "箭头" => 定义函数 之前我们声明一个函数是这样的 let fn = function () { 内容 } 有了箭头函数，你就可以这么写：

        let fn2 = (a, b) => { //省略了一个function,()里面写的是形参
            return a + b;
        }

箭头函数声明的一个特性(与之前的函数声明有什么区别)：

1. this 是静态的 关于this问题，我之前也有写过文章 箭头函数的this 始终指向函数声明时所在作用域下的this的值。

案例：

        // 先定义两个函数，一个是箭头函数一个普通函数
        
        function getName() {
            console.log(this.name);
        }
        let getName2 = () => {
            console.log(this.name);
        }

然后设置对象的name属性

        window.name = '英雄联盟';
        const canyon = {
            name: "league of legends"
        }

直接调用

        getName(); //英雄联盟
        getName2();//英雄联盟

call方法调用

        getName.call(school); // league of legends
        getName2.call(school);//英雄联盟
        
        // getName2是个箭头函数，this是静态的
            //哪怕现在是让它临时成为school对象的方法让school来调用，this指向还是window

由上例子知道，普通函数在全局作用域下自动成为window的方法，this指向window 如果箭头函数是在全局作用域下声明的，所以this指向的是window,而箭头函数中的this是静态的，声明时指向的是window，后面不管怎么样this都指向window。 总之，箭头函数中是没有this的！在箭头函数里边写的this，它会沿着作用域去找外边的this

2.不能做为构造函数实例化对象 比如：

        let Person = (name, age) => {
            this.name = name;
            this.age = age;
        }
        let me = new Person('Gu', 19);
        console.log(me);

报错，Person is not a constructor

3.不能使用函数的内置对象argument

        let fn3 = () => {
            console.log(arguments);
        }
        fn(1, 2, 3);

arguments is not defined

4.箭头函数的简写 ① 省略小括号,当形参有且只有一个的时候可以省略

        let add = n => {
            return n + n;
        }
        console.log(add(9)); //18

② 省略大括号,当代码体只有一条语句的时候就可以省略，有return的话也要省略return

        /* 
            let pow = (n) => {
                return n * n;
            }; 
        */
        let pow = n => n * n;
        console.log(pow(9)); //81

来看看一些关于箭头函数的案例 需求1：点击div，过一段时间后变色

            let ad = document.getElementById('id');
            ad.addEventListener('click', function () {
                //保存this的值
                let  _this = this;
                setTimeout(function () {
                    //修改背景色
                    // this.style.background = 'pink'; 不能这么写，因为定时器是window下的方法，回调函数中的this指向window
                    //常见的解决方法就是把外层的this保存到变量里边，利用作用域找变量的方式可以使用外面的this
                    _this.style.background = 'pink';
                }, 2000);
            }) 

这是之前的写法，有了箭头函数，利用箭头函数的静态this，可以这么写:

    ad.addEventListener('click', function () { //监听事件函数的this指向的是ad
            setTimeout(() => {
                this.style.background = 'pink';
            }, 2000);
        })

注意！ 箭头函数没有自己的this，它的this指向父级的this也就是函数的this，而这个函数的this是谁调用函数就指向谁，所以箭头函数的this也是ad

需求2：从数组中返回偶数的元素

注：filter()函数用于过滤序列，序列的每个元素做为参数传递给函数进行判断，然后返回true或false，最后将返回true的元素放到新数组中

        //  不用箭头函数的写法
        const arr = [1, 6, 9, 10, 100, 25];
        const result = arr.filter(function (item) {
            if (item % 2 == 0) {
                return true;
            } else {
                return false;
            }
        });

用箭头函数的写法：

        const result = arr.filter(item => item % 2 === 0);
        console.log(result); // 6,10,100

总结： 箭头函数适合与this无关的回调。定时器、数组的方法回调 箭头函数不适合与this有关的回调。事件回调，对象的方法

关于箭头函数this的说明

回忆一下JS定义函数的语法，JS的函数是通过function关键字定义 所以呢，箭头函数省略了function，也就没有形成自己的作用域，所以界内公认的，ES6只是个语法糖，让你简写，写的爽。 所以呢，箭头函数中是没有this的！在箭头函数里边写的this，它会沿着作用域去找外边的this 同样的原因，箭头函数也没有显式原型属性prototype