ES6基本知识

[nevergiveup-j]

1. 运行环境

基于node安装版本管理工具 nvm，指定node版本

nvm use 5.7.0

安装 Babel

npm install --save-dev babel-cli

将es6代码放在src文件夹，lib是转换文件
babel src -d lib

其它环境 babel

2. let和const命令

• let 命令
  用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
    let a = 10;
    var b = 1;
}

a // ReferenceError: a is not defined. 
b //1

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

const PI = 3.1415;

PI
// 3.1415

PI = 3;

PI
// 3.1415

const PI = 3.1;

PI
// 3.1415

3. 变量的解构赋值

• 数组的解构赋值

以前写法

var a = 1;
var b = 2;
var c = 3;

ES6写法
var [a,b,c] = [1,2,3];

解构赋值允许指定默认值。
[x, y = 'b'] = ['a'] //x='b' y ='b'

• 对象的解构赋值

var { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

4. 模板字符串

• 用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
• 模板字符串中嵌入变量，需要将变量名写在${}之中。

var basket = '100';
var tpl = `
There are
${basket}
items in you
`

5.函数

• ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

• 箭头函数

ES6允许使用“箭头”（=>）定义函数
var f = v => v;

上面的箭头函数等同于：

var f = function(v) {
    return v;
};

6.对象的扩展

• 简写

var o = {
  method() {
    return "Hello!";
  }
};

// 等同于

var o = {
  method: function() {
    return "Hello!";
  }
};

7.Generator 函数

形式上，Generator函数是一个普通函数，但是有两个特征。

• function命令与函数名之间有一个星号；
• 函数体内部使用yield语句，定义不同的内部状态（yield语句在英语里的意思就是“产出”）。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

执行遍历器的next方法，则会依次遍历每个成员。

hw.next() 
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: undefined, done: true }

hw.next()
// Error: Generator has already finished
//  at GeneratorFunctionPrototype.next (native)
//  at repl:1:3
//  at REPLServer.defaultEval (repl.js:129:27)
//  ... 

上面代码一共调用了四次next方法。

8.Class

• 基本语法

JavaScript语言的传统方法是通过构造函数

function User(firstName, lastName){
   this.firstName = firstName
    this.lastName = lastName
}

Point.prototype.fullName = function () {
  return '(' + this.firstName + ', ' + this.lastName + ')';
}

ES6写法

//定义类
class User{
    constructor(lastName) {
        this.firstName = 'David';
        this.lastName = lastName;
    }

    fullName() {
        return `${this.firstName} ${this.lastName}`
    }
}

let user = new User('Chen')

user.fullName();  // David lastName

在调用函数必须new，如果忘记加new函数会报错

// 报错
var user = User(2, 3);

// 正确
var user = new User(2, 3);

• Class继承
  Class之间可以通过extends关键字实现继承

class ColorUser extends User{
    fullName() {
        console.log(this.firstName);
    }
}

let user = new ColorUser();

user.fullName(); // David

• Class的取值函数（getter）和存值函数（setter）
  在Class内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

• 静态方法
  类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()
// TypeError: undefined is not a function

9.Module

• 基本用法

ES6模块的设计**，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。

假设有一个circle.js，它是一个单独模块。

// circle.js

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

然后，main.js引用这个模块。

// main.js

import { area, circumference } from 'circle';

console.log("圆面积：" + area(4));
console.log("圆周长：" + circumference(14));

• 模块的默认方法
  为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo');
}

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

详细了解ES6使用ECMAScript 6 入门、ECMAScript 6 介绍