我认识的ES6

古城微笑少年丶 2022-07-12 08:11 145阅读 0赞

ES6——ECMAScript6，由ECMA组织制定标准，是ECMAScript的最新版本。

最常用的ES6特性

***`let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments`***

**1.let,const**

这两个的用途与var类似，都是用来声明变量的，但在实际运用中他俩都有各自的特殊用途。

首先看下面程序：

为什么输出结果会是efg而不是abc呢？

因为JavaScript中只有全局作用域和函数作用域，并没有块级作用域，所以while中定义的变量也被绑定在外部全局作用域中，也就是产生了内层覆盖外层的结果。

而let恰恰解决了这个问题，let为js新增了块级作用域，用它所声明的变量，只在let命令所在的代码块内有效。

const用来声明常量，一旦声明，常量的值就不能改变

const有一个很好的应用场景，就是当我们引用第三方库的时声明的变量，用const来声明可以避免未来不小心重命名而导致出现bug

**2.class,extends,super**

这三个特性涉及了ES5中最让人头疼的几个部分：原型，构造方法，继承

ES6引入了更接近传统语言的特性，引入class（类）的概念，大大优化了ES5原型的繁琐。

class Animal {
        constructor(){
            this.type = 'animal'
        }
        says(say){
            console.log(this.type + ' says ' + say)
        }
    }
    
    let animal = new Animal()
    animal.says('hello') //animal says hello
    
    class Cat extends Animal {
        constructor(){
            super()
            this.type = 'cat'
        }
    }
    
    let cat = new Cat()
    cat.says('hello') //cat says hello

上述代码中，class定义了一个Animal类，类中constructor代表构造方法，this代表实例对象。animal为Animal类的一个实例化对象。

接下来，class又定义了一个Cat类来继承Animal类，具体来说就是继承了Animal父类的所有属性和方法。

super函数指代父类实例（即父类的this对象），子类必须在constructor方法中调用super()方法，否则新建实例时会报错，这是因为子类没有自己的this对象，而是继承父类的this对象。

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

**3.default,rest**

default很简单，意思就是默认值。大家可以看下面的例子，调用animal()方法时忘了传参数，传统的做法就是加上这一句type = type || 'cat'来指定默认值。**``**

function Animal(type){
                	type=type||'cat';
                	console.log(type);
                }
                Animal();//输出cat

如果用ES6我们可以直接这么写

function animal(type='cat'){
                 console.log(type);
               }
               animal();//输出cat

rest实现一种不定参数的形式，参数的数量事先不确定，分情况不同而不同

function animal(...types){
                  console.log(types);
             }
             animal('cat','dog','shit');//Array [ "cat", "dog", "shit" ]

**``**