ES6 ES2015

 

话不多说,进入ES6。 ES7也在日程上了。

Bable转换器: ES6 => ES5 https://babeljs.io/ 不用担心浏览器的支持率

ECMAScript 6 compatibility table https://kangax.github.io/compat-table/es6/ ECMAScript 6: New Features: Overview and Comparison http://es6-features.org/#Constants ES6开发 - Google 搜索 https://www.google.co.jp/search?biw=1920&bih=911&q=ES6%E5%BC%80%E5%8F%91&oq=ES6%E5%BC%80%E5%8F%91&gs_l=serp.3..0l10.6844.8449.0.8657.4.4.0.0.0.0.250.484.2-2.2.0....0...1c.1j4.64.serp..2.2.483.HGRsooM9548 函数的扩展 - ECMAScript 6入门 http://es6.ruanyifeng.com/#docs/function (二):迭代器和for-of循环 - [ 深入浅出ES6 ] http://www.kancloud.cn/kancloud/es6-in-depth/45514 JS Bin - Collaborative JavaScript Debugging http://jsbin.com/sacufegofo/edit?html,js,console,output 给 JavaScript 初心者的 ES2015 实战 http://gank.io/post/564151c1f1df1210001c9161 使用ES6进行开发的思考 | EFE Tech http://efe.baidu.com/blog/es6-develop-overview/ ES6 In Depth Articles ★ Mozilla Hacks – the Web developer blog https://hacks.mozilla.org/category/es6-in-depth/ lukehoban/es6features https://github.com/lukehoban/es6features StrongLoop | An Introduction To JavaScript ES6 Classes https://strongloop.com/strongblog/an-introduction-to-javascript-es6-classes/ 透过ES6看JS未来 http://johnhax.net/2014/es6-js-future/ (1)ES6 的模块系统 - Jury Xiong's Blog - SegmentFault http://segmentfault.com/a/1190000003410285?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io ES6学习笔记 - 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客 http://imweb.io/topic/5548995d9615e51472f38ac6 (1)搜索 ES6 - SegmentFault [TOC]

基本语法

let

块状作用域 不存在变量提升 暂时性死区 temporal dead zone 不允许重复声明,直接报错

块级作用域

这块的注意,因为将于ES5的作用域有较大不同。

如果在严格模式下,函数只能在顶层作用域和函数内声明,其他情况(比如if代码块、循环代码块)的声明都会报错。尽量想严格模式靠拢。

const

声明常量。这个也算有了。

跨模块常量

全局对象的属性

变量的解构赋值

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

  • 数组的结构赋值 [js] var [a, b, c] = [1, 2, 3]; [/js]
  • 对象的结构赋值 [js] var { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" [/js] 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象 的属性没有次序,变量必须与属性同名,才能取到正确的值。
  • 字符串的结构赋值 [js] const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o" [/js]
  • 函数的结构赋值 [js] function add([x, y]){ return x + y; } a dd([1, 2]) // 3 [/js] [js] // 也可以使用默认值 function move({x = 0, y = 0} = {}) { return [x, y]; } m ove({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, 0] move({}); // [0, 0] move(); // [0, 0] [/js]
  • 圆括号问题 解构赋值虽然很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式,还是表达式,没 有办法从一开始就知道,必须解析到(或解析不到)等号才能知道。

字符串的扩展

六中方法来表示字符 [js] 'z' = 'z' // true
'172'
= 'z' // true
'x7A' = 'z' // true
'u007A'
= 'z' // true
'u{7A}' === 'z' // true
[/js]

数值的扩展

二进制和八进制表示法 Number.isFinite(), Number.isNaN()
Number.parseInt(), Number.parseFloat()
Number.isInteger()
Number.EPSILON
安全整数和Number.isSafeInteger() Math对象的扩展
指数运算符

数组的扩展

Array.from()
Array.of()
数组实例的copyWithin() 数组实例的find()和findIndex() 数组实例的fill() 数组实例的entries(),keys()和values() 数组实例的includes() 数组的空位 数组推导

函数的扩展

函数参数的默认值 rest参数
扩展运算符 name属性
箭头函数 函数绑定 尾调用优化 函数参数的尾逗号

对象的扩展

属性的简洁表示法 属性名表达式 方法的name属性 Object.is()
Object.assign()
属性的可枚举性 属性的遍历 proto属性,Object.setPrototypeOf(),Object.getPrototypeOf()
对象的扩展运算符

symbol

ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。它是JavaScript语言的第七种数据类型,前六种是:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。
- 概述 - 作为属性名的Symbol - 实例:消除魔术字符串 - 属性名的遍历 - Symbol.for(),Symbol.keyFor() - 内置的Symbol值

proxy

Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。

Proxy可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

Reflect

Reflect对象与Proxy对象一样,也是ES6为了操作对象而提供的新API。

二进制数组

  • ArrayBuffer对象
  • TypedArray视图
  • 复合视图
  • DataView视图
  • 二进制数组的应用

二进制数组(ArrayBuffer对象、TypedArray视图和DataView视图)是JavaScript操作二进制数据的一个接口。这些对象早就存在,属于独立的规格(2011年2月发布),ES6将它们纳入了ECMAScript规格,并且增加了新的方法。

这个接口的原始设计目的,与WebGL项目有关。所谓WebGL,就是指浏览器与显卡之间的通信接口,为了满足JavaScript与显卡之间大量的、实时的数据交换,它们之间的数据通信必须是二进制的,而不能是传统的文本格式。文本格式传递一个32位整数,两端的JavaScript脚本与显卡都要进行格式转化,将非常耗时。这时要是存在一种机制,可以像C语言那样,直接操作字节,将4个字节的32位整数,以二进制形式原封不动地送入显卡,脚本的性能就会大幅提升。

二进制数组就是在这种背景下诞生的。它很像C语言的数组,允许开发者以数组下标的形式,直接操作内存,大大增强了JavaScript处理二进制数据的能力,使得开发者有可能通过JavaScript与操作系统的原生接口进行二进制通信。

Set WeakSet Map WeakMap 数据结构

对应各自的属性和方法。

Iterator和for...of循环

  • Iterator(遍历器)的概念
  • 数据结构的默认Iterator接口
  • 调用Iterator接口的场合
  • 字符串的Iterator接口
  • Iterator接口与Generator函数
  • 遍历器对象的return(),throw()
  • for...of循环

JavaScript原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6又添加了Map和Set。这样就有了四种数据集合,用户还可以组合使用它们,定义自己的数据结构,比如数组的成员是Map,Map的成员是对象。这样就需要一种统一的接口机制,来处理所有不同的数据结构。

遍历器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。

Iterator的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费。

generator函数

Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。
Generator函数有多种理解角度。从语法上,首先可以把它理解成,Generator函数是一个状态机,封装了多个内部状态。

执行Generator函数会返回一个遍历器对象,也就是说,Generator函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历Generator函数内部的每一个状态。

形式上,Generator函数是一个普通函数,但是有两个特征。一是,function命令与函数名之间有一个星号;二是,函数体内部使用yield语句,定义不同的内部状态(yield语句在英语里的意思就是“产出”)。 [js] function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}

var hw = helloWorldGenerator();
[/js]

  • next方法的参数
  • for...of循环
  • Generator.prototype.throw()
  • Generator.prototype.return()
  • yield*语句
  • 作为对象属性的Generator函数
  • Generator函数的this
  • Generator函数推导
  • 含义
  • 应用

promise

所谓Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的API,可供进一步处理。

Promise对象有以下两个特点。

(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。

(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。

Promise也有一些缺点。首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。第三,当处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

  • Promise的含义
  • 基本用法
  • Promise.prototype.then()
  • Promise.prototype.catch()
  • Promise.all()
  • Promise.race()
  • Promise.resolve()
  • Promise.reject()
  • 两个有用的附加方法
  • 应用
  • async函数

关键点

  • 异步操作和Async函数
  • Generator函数
  • Thunk函数
  • co模块
  • async函数

ES6诞生以前,异步编程的方法,大概有下面四种。

  • 回调函数
  • 事件监听
  • 发布/订阅
  • Promise 对象

Class

Class基本语法
Class的继承
原生构造函数的继承 Class的取值函数(getter)和存值函数(setter)
Class的Generator方法
Class的静态方法
Class的静态属性
new.target属性
Mixin模式的实现

Decorator

修饰器(Decorator)是一个表达式,用来修改类的行为。这是ES7的一个提案,目前Babel转码器已经支持。

Module

TODO:

已经在文章头了。

先把JS的模式搞的清清楚楚再来把ES6好生琢磨!!