ES6_30分钟速读_新特性
ECMAScript 2015 Features
ES6 包含了以下这些新特性：
- Arrows 箭头函数
- Classes 类
- Enhanced Object Literals 增强的对象字面量
- Template Strings 模板字符串
- Destructuring 解构
- Default + Rest + Spread 默认参数+不定参数+参数展开
- Let + Const 操作符
- Iterators 迭代器 + For..Of 循环
- Generators 生成器
- Unicode 统一码
- Modules 模块
- Module Loaders 模块加载器
- Map + Set + Weakmap + Weakset 数据结构
- Proxies 代理
- Symbols 符号
- Subclassable Built-ins 可子类化内建对象
- Promises 对象
- Math + Number + String + Object APIs
- Binary and Octal Literals 二进制和八进制字面量
- Reflect 反射 API
- Tail Calls 尾调用
Arrows and Lexical This
Arrows are a function shorthand using the => syntax.
They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript.
They support both expression and statement bodies.
Unlike functions, arrows share the same lexical this as their surrounding code.
If an arrow is inside another function, it shares the “arguments” variable of its parent function.
expression body
Statement bodies
Lexical this
Lexical arguments
Classes
ES2015 classes are a simple sugar over the prototype-based OO pattern.
Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability.
Classes support prototype-based inheritance, super calls, instance and static methods and constructors.
Enhanced Object Literals
Object literals are extended to support setting the prototype at construction, shorthand for foo: foo assignments, defining methods and making super calls.
Together, these also bring object literals and class declarations closer together, and let object-based design benefit from some of the same conveniences.
The
__proto__property requires native support, and was deprecated in previous ECMAScript versions.Most engines now support the property, but some do not.
Also, note that only web browsers are required to implement it, as it's in Annex B.
It is available in Node.
Template Strings ( `键盘左上角的波浪号键` )
Template strings provide syntactic sugar for constructing strings.
This is similar to string interpolation features in Perl, Python and more.
Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents.
Destructuring 解构
Destructuring allows binding using pattern matching, with support for matching arrays and objects.
Destructuring is fail-soft, similar to standard object lookup foo["bar"], producing undefined values when not found.
object matching
object matching shorthand
parameter position
Default + Rest + Spread
Callee-evaluated default parameter values.
Turn an array into consecutive arguments in a function call.
Bind trailing parameters to an array.
Rest replaces the need for arguments and addresses common cases more directly.
Let + Const
Block-scoped binding constructs.
let is the new var.
const is single-assignment.
Static restrictions prevent use before assignment.
function someFunction() {
{
let x;
{
// this is ok since it's a block scoped name
const x = "beyond";
// error, was just defined with `const` above
x = "bangs"; // bangs: 刘海
}
// this is ok since it was declared with `let`
x = "bar";
// error, already declared above in this block // 禁止重复定义
let x = "inner";
}
}
CLR(公共语言运行库,Common Language Runtime) 和 Java虚拟机 一样也是一个运行时环境，
是一个可由多种编程语言使用的运行环境。
CLR的核心功能包括：内存管理、程序集加载、安全性、异常处理和线程同步，
可由面向CLR的所有语言使用。
并保证应用和底层操作系统之间必要的分离。
CLR是.NET Framework的主要执行引擎。
-
LINQ
（语言集成查询）
Iterators + For..Of
Iterator objects enable custom iteration like CLR IEnumerable or Java Iterable.
Generalize for..in to custom iterator-based iteration with for..of.
Don’t require realizing an array, enabling lazy design patterns like LINQ.
for of 循环有很多优点:
1. 不像for...in一样只遍历键名（甚至包括原型链上的键 ???Excuse Me???)
2. 不像foreach不能跳出循环
3. for...of为各种数据结构提供了一个统一的遍历方法
什么是 duck-typed ?
“当看到一只鸟 走起来像鸭子、游起来像鸭子、叫起来也像鸭子，那么这只鸟就可以被称为 鸭子。”
我们并不关心对象是什么类型，到底是不是真正的鸭子，我们只关心行为。
Iteration is based on these duck-typed interfaces
(using TypeScript type syntax for exposition only)
(这儿只是用一下TypeScript的语法进行一下阐述而已啦~):
// 能够被迭代的对象,都要实现该方法interface Iterable { [Symbol.iterator](): Iterator}
// 迭代器必须实现的方法 next()interface Iterator { next(): IteratorResult;}
// next()方法必须返回的结果 属性interface IteratorResult {
done: boolean;
value: any;
}Support via polyfill
In order to use Iterators you must include the Babel polyfill.
Shim. A shim is a library that brings a new API to an older environment, using only the means of that environment.
A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.
翻译过来就是:
一个shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现
一个polyfill就是一个只用在浏览器API上的shim.
我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill.
然后新旧浏览器就都可以使用这个API了.
术语polyfill来自于一个家装产品Polyfilla:
Polyfilla是一个英国产品,在美国称之为Spackling Paste(译者注:刮墙的,在中国称为腻子).
记住这一点就行:把旧的浏览器想象成为一面有了裂缝的墙.
这些[polyfills]会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁(浏览器)
Paul Irish发布过一个Polyfills的总结页面“HTML5 Cross Browser Polyfills”.
es5-shim是一个shim(而不仅仅是polyfill)的例子,因为它既能在ECMAScript 3的引擎上实现了ECMAScript 5的新特性,
而且又能在Node.js上和在浏览器上有完全相同的表现(注意:因为它能在Node.js上使用,不光浏览器上,所以它不是polyfill).
for...of 访问了array的iterator,并调用了next()
对象要自己实现 迭代器
又一个给对象实现iterator的例子,然后,用for...of 迭代输出
Generators
Generators simplify iterator-authoring using function* and yield.
A function declared as function* returns a Generator instance.
Generators are subtypes of iterators which include additional next and throw.
These enable values to flow back into the generator, so yield is an expression form which returns a value (or throws).
Note: Can also be used to enable ‘await’-like async programming, see also ES7 await proposal.
The generator interface is (using TypeScript type syntax for exposition only):
interface Generator extends Iterator {
next(value?: any): IteratorResult;
throw(exception: any);
}
Support via polyfill
In order to use Generators you must include the Babel polyfill.
示例代码一:
(把上面对象的 iterator 复杂的实现过程 通过 Generator快速实现)
通过function* 和 yield 对一个对象 快速实现迭代器
示例代码二:
(把上面对象的 iterator 复杂的实现过程 通过 Generator快速实现)
Comprehensions
Removed in Babel 6.0 ???Excuse Me???
Unicode
Non-breaking additions to support full Unicode,
including new unicode literal form in strings and new RegExp u mode to handle code points,
as well as new APIs to process strings at the 21bit code points level.
These additions support building global apps in JavaScript.
RequireJS 遵循的是 AMD(异步模块定义) 规范,
SeaJS 遵循的是 CMD (通用模块定义)规范
AMD/CMD/CommonJs是JS模块化开发的标准，
目前对应的实现是RequireJs/SeaJs/nodeJs.
CommonJs主要针对服务端
服务器端一般采用同步加载文件，也就是说需要某个模块，服务器端便停下来，等待它加载再执行。
AMD/CMD主要针对浏览器端
而浏览器端要保证效率，需要采用异步加载，
这就需要一个预处理，提前将所需要的模块文件并行加载好。
AMD/CMD 虽然都是并行加载js文件，但还是有所区别的
AMD是预加载，在并行加载js文件同时，还会解析执行该模块
因为还需要执行，所以在加载某个模块前，这个模块的依赖模块也需要先加载完成
CMD是懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。
AMD/CMD的优缺点: 一个的优点就是另一个的缺点
AMD优点：因为是预加载, 所以加载快速，尤其遇到多个大文件，
因为并行解析，所以同一时间可以解析多个文件。
AMD缺点：由于是并行加载，异步处理，加载顺序不确定，可能会造成一些麻烦，甚至为程序埋下超级大坑。
CMD优点：因为只有在使用的时候才会解析执行js文件，
因此，每个JS文件的执行顺序在代码中是有体现的，是可控的。
CMD缺点：由于是用到时才去加载,所以执行等待时间会叠加。
因为每个文件执行时是同步执行（串行执行），
因此时间是所有文件解析执行时间之和，尤其在文件较多较大时，这种缺点尤为明显。
如何使用？
CommonJs的话，因为nodeJs就是它的实现，所以直接用node就行，也不用引入其他包。
AMD则是通过