你经常会用到的ES6核心知识(上)

King

ES6早在2015年就发布了，虽然ES6已经不再是Javascript的最新标准，（ES8已经在今年2017年6月底发布了）。目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目中已经开始在使用ES6了，所以涉足前端的你也该懂点ES6的语法。

由于内容比较多，我们分上下两节来学习。

1. let和const

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

因为ES5只有全局作用域和函数作用域，没有块级作用域，所以使用过程中会带来不合理的效果，比如下代码：

var name = 'apple'

while (true) {
    var name = 'banana'
    console.log(name)  //banana
    break
}

console.log(name)  //banana

知识兔

以上代码中，两次都输出了banana，是不是内层的变量覆盖了外层的变量了？而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。

let name = 'apple'

while (true) {
    let name = 'banana'
    console.log(name)  //banana
    break
}

console.log(name)  //apple

知识兔

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

const PI = Math.PI
PI = 12;  //这里会报错

知识兔

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

const monent = require('moment')

知识兔

2.箭头函数

ES6中新增的箭头操作符=> 简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值，箭头函数是ES6 最最常用的一个新特性。

定义一个箭头函数很简单，基本语法是：

([param] [, param]) => {
   statements
}

param => expression

知识兔

param 是参数，根据参数个数不同，分这几种情况：

() => { ... } // 零个参数用 () 表示；

x => { ... } // 一个参数可以省略 ()；

(x, y) => { ... } // 多参数不能省略 ()；

箭头函数还有个厉害的功能，解决了javascript语言中关键字this指向的头痛问题。箭头函数没有自己内部的 this 指针。在箭头函数中， this 指针是继承于其所在的作用域。也就是说箭头函数内部的this是函数外层的this。看下面的代码：

var a = 1;
var test = {
    a: 100,
    c: function() {
        console.log(this.a); 
    },
    d: () => {
        console.log(this.a);
    } 
}
test.c(); //100
test.d(); //1

知识兔

3.模板字符串

ES6中允许使用反pie号 ` （一般在键盘tab键上方）来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。

$("#result").append(`
   <p>欢迎 <b>${json.user}</b></p>
   <p>您目前有积分：${json.fen}</p>
`);

知识兔

我们不需要在输出多行字符串时使用\r\n和+号来将字符串拼接，而ES6使用反pie号就可以让模板字符串中所有的空格、新行、缩进，都原样输出在生成的字符串中。

4.函数参数默认值

我们在调用自定义函数时，怕忘了传参数，如调用animal()，传统的做法就是加上这一句type = type || 'cat' 来指定默认值。

function animal(type){
    type = type || 'cat'  
    console.log(type)
}
animal()

知识兔

而使用ES6可以这么写：

function animal(type = 'cat'){
    console.log(type)
}
animal()

知识兔

到这里是不是有种写php的感觉了。

5.Class类

ES6引入了Class类的概念，这样写的javascript代码更像面向对象编程的语法，如果你会PHP或Java，那下面的代码你一看就明白了：

class Human {
    constructor(name) {
        this.name = name;
      }
     sleep() {
        console.log(this.name + " is sleeping");
      }
}
let man = new Human("Davis");
man.sleep();     //Davis is sleeping
class Boy extends Human {
    constructor(name, age) {
        super()
        this.name = name;
        this.age = age;
    }
    info() {
        console.log(this.name + 'is ' + this.age + 'years old');
    }
}
let son = new Boy('Faker','8');
son.sleep();    // Faker is sleeping
son.info();     //  Faker is 8 years old

知识兔

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Boy类，该类通过extends关键字，继承了Human类的所有属性和方法。

值得一提的是，ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

6.解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

let cat = 'ken'
let dog = 'lili'
let zoo = {cat: cat, dog: dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

知识兔

上面的代码用ES6可以这么写：

let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

知识兔

反过来可以这么写：

let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many)   //animal 2

知识兔

本节先到此，先消化消化，下节我们重点学习Promise和模块导入导出相关知识。

计算机

2022年3月13日