ES6 快速上手

ES6快速上手

参考链接

##Module

基本用法

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

//main.js
import {firstName, lastName, year} from './profile';

export语法

export 导出对外的接口

// 报错
export 1;

// 报错
var m = 1;
export m;

// 报错
function f() {}
export f;

正确的写法是

export var m = 1;

var m = 1;
export {m};

var n = 1;
export {n as m};

export function f() {};

function f() {}
export {f};

import语法

import 是编译阶段执行的，不能使用表达式

// 报错
import { 'f' + 'oo' } from 'my_module';

// 报错
let module = 'my_module';
import { foo } from module;

// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

export default

// 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32'; // 输入

// 第二组
export function crc32() { // 输出
  // ...
};

import {crc32} from 'crc32'; // 输入

export 与 import 的复合写法

export { foo, bar } from 'my_module';

// 等同于
import { foo, bar } from 'my_module';
export { foo, bar };

import()

运行时加载

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

##let 和 const 和 function 命令

1. 块级作用域
2. 不存在变量提升

##解构赋值

数组解构赋值

// 基本语法
let [a, b, c] = [1, 2, 3]
// 扩展运算符
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
// 默认值
let [x, y = 'b'] = ['a']; // x='a', y='b'

对象解构赋值

// 基本语法
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
// 变量名与属性名不一致
var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
// 默认值
var {x, y = 5} = {x: 1};
x // 1
y // 5

##字符串

模板字符串

`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`

##函数

rest 参数

替代arguments伪数组

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

扩展运算符

Math.max(...[14, 3, 77])
// 77

var arr1 = ['a', 'b'];
var arr2 = ['c'];
[...arr1, ...arr2]
// [ 'a', 'b', 'c' ]

箭头函数

基本用法

var f = v => v;
//等同于
var f = function(v) {
  return v;
};

没有参数/多个参数

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭头函数的代码块部分只有一条语句，可以省略大括号，并自动return语句结合；多于一条语句，就要使用大括号将它们括起来，并手动使用return语句返回

更多示例

[1,2,3].map(x => x * x);
var result = values.sort((a, b) => a - b);
const full = ({ first, last }) => first + ' ' + last;
const numbers = (...nums) => nums;

##对象

// 正常解构赋值
let {foo} = {foo: 2}
// foo === 2
// 所以对象可以简洁的表示
var foo = 'bar';
var baz = {foo};
baz // {foo: "bar"}

// 等同于
var baz = {foo: foo};

属性名表达式

// 对象属性
let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};
// 函数名
let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};

obj.hello(); // hi

Object.assign()

// 相当于jQuery.extends
var target = { a: 1, b: 1 };

var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Object.assign不拷贝原型属性
Object.assign是浅拷贝，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用

扩展运算符

const [a, ...b] = [1, 2, 3];
a // 1
b // [2, 3]

let {x, y, ...z} = {x: 1, y: 2, a: 3, b: 4}
x // 1
y // 2
z // {a: 3, b: 4}

// 对象合并
let obj = { x: 1, y: 2, ...a };
// 等同于
let obj = Object.assign({ x: 1, y: 2 }, a);

##Promise

var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

详细文档