前端之旅:ES6 和 Mocha

mocha

mocha是一个测试框架,使用入门都是很简单的,通过阮一峰的博客可以快速入门 测试框架 Mocha 实例教程

ES6

由于ES6新增内容其实是很多的,但是我们不能全部都学,而且很大一部分只适用于Nodejs,所以暂时只需要学习20%的部分来应付80%的工作即可

let

  • 实际上为js提供了块级作用域,用它所声明的变量,只在let命令所在的代码块内有效。
  • 解决了以前在循环中需要闭包才能解决的对循环变量的引用问题

const

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

class, extends, super

  • class 声明类
  • extends 继承
  • super 它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

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

arrow function(箭头函数)

箭头函数简化了编程工作,对比:

1
2
function(i){ return i + 1; } //ES5
(i) => {i + 1;} //ES6

以前在setTimeout中的this指向全局对象,为了解决这个问题可以

  • 在setTimeout调用前保存对this的引用
  • 或者用bind方法 method.bind(this)

但是现在有了箭头函数就不用麻烦了
() => { this is outer this }
当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。

template string

用``符号包起来的字符串中可以像模板中一样在${}中插值<span>${data.name}</span>

destructuring(解构)

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值

1
2
3
4
5
6
7
8
let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog} //相当于将后面所有对象拷贝到zoo
// zoo = {cat: 'ken', dog: 'lili'}

let dog = {type: 'animal', many: 2}
let { type, many} = dog //将dog对象中的值分别拷贝到前面的变量中
// 现在type 和 many分别是两个变量其值为dog中对应值

注意上面代码中提取值时key值要保证相同,因为对象内部属性是无序的,所以不要设想是按照循序赋值

default,rest

  • default(函数形参默认值)

    1
    2
    3
    4
    5
    6
    function sum(a = 1, b = 2){
    return a+b;
    }
    sum(); //3
    sum(2); //4
    sum(3, 3); //6
  • rest arguments
    有点类似于ES6以前的arguments可以获取形参集合,不过arguments是个对象,而rest是个数组

    1
    2
    3
    4
    function test(...types) {
    console.log(types);
    }
    test('a', 'b', 'c'); //['a', 'b', 'c']

ES6 Module:import,export

之前我们可以用AMD、CMD、UMD、CommonJs等规范来实现模块化,而现在,ES6 Module还是不能用,所以还是继续用原来的吧,不过ES6 Module规范已经出了,接下来就是看各个厂商的实现了。

顾名思义,import导入模块,export到处模块,如果熟悉模块化编程的话很容易理解它们是如何工作的

1
2
3
4
5
6
7
8
//index.js
import {animal, ...} from './content'

//content.js
function animal(){
return 'Hello!'
}
export {animal, ...}

  • export命令除了输出变量,还可以输出函数,甚至是类
  • 大括号里面的变量名,必须与被导入模块(content.js)对外接口的名称相同。
  • as关键字可以指定别名
  • 整体导入用星号(*)指定一个对象,所有输出值都导入在这个对象上面。要使用as指定别名

ES6模块系统和AMD相比有一些不一样的思想,总结一下就是:

  • 按需引入 vs 全局引入
  • 多点暴漏 vs 全局暴漏

参考

以上内容皆来自博客
30分钟掌握ES6/ES2015核心内容(上)
30分钟掌握ES6/ES2015核心内容(下)
如果需要深入学习,可以看:
ECMAScript 6入门
深入浅出ES6

avatar

神无

舍悟离迷,六尘不改。