简述ES6新特性②

599 阅读5分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第27天,点击查看活动详情

ES6新特性 ②

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

模板字符串

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

1.声明

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

image.png

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

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

image.png

3.变量拼接

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

image.png

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

    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