ECMAScript 2015 Features - Babel
ECMAScript 2015 Features - Babel
1. 箭头函数和this
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.
箭头函数中的this和arguments参数和普通函数不一样，如下：
// Lexical this var bob = { _name: "Bob", _friends: ['a','b'], printFriends() { this._friends.forEach(f => console.log(this._name + " knows " + f)); // 箭头函数里的 this 和普通函数的不一样 } }; bob.printFriends(); // Lexical arguments function square() { let example = () => { let numbers = []; for (let number of arguments) { // 箭头函数里的 arguments 和普通函数不一样 numbers.push(number * number); } return numbers; }; return example(); } square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]
2. Classes
ES2015 classes are syntactic sugar over the prototype-based OO pattern
是基于原型面向对象的语法糖
class Rectangle { constructor(height, width) { this.height = height; this.width = width; } // Getter get area() { return this.calcArea(); } // Method calcArea() { return this.height * this.width; } } const square = new Rectangle(10, 10); console.log(square.area); // 100
3. 增强了对象字面量
Object literals are extended to support setting the prototype at construction, shorthand for foo: foo assignments, defining methods and making super calls
目的：让面向对象更方便
var obj = { // Sets the prototype. "__proto__" or '__proto__' would also work. __proto__: theProtoObj, // Computed property name does not set prototype or trigger early error for // duplicate __proto__ properties. ['__proto__']: somethingElse, // Shorthand for ‘handler: handler’ handler, // Methods toString() { // Super calls return "d " + super.toString(); }, // Computed (dynamic) property names [ "prop_" + (() => 42)() ]: 42 }; console.log(obj.prop_42); // 42
4. 字符串模板
Template strings provide syntactic sugar for constructing strings
最喜欢的还是插值功能
// Basic literal string creation `This is a pretty little template string.` // Multiline strings `In ES5 this is not legal.` // Interpolate variable bindings var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?` // Unescaped template strings String.raw`In ES5 "\n" is a line-feed.` // Construct an HTTP request prefix is used to interpret the replacements and construction GET`http://foo.org/bar?a=${a}&b=${b} Content-Type: application/json X-Credentials: ${credentials} { "foo": ${foo}, "bar": ${bar}}`(myOnReadyStateChangeHandler);
5. 解构赋值
Destructuring allows binding using pattern matching, with support for matching _**arrays **_and objects.
解构对象、数组，并进行赋值操作
// list matching var [a, ,b] = [1,2,3]; a === 1; b === 3; // object matching var { op: a, lhs: { op: b }, rhs: c } = getASTNode() // object matching shorthand // binds `op`, `lhs` and `rhs` in scope var {op, lhs, rhs} = getASTNode() // Can be used in parameter position function g({name: x}) { console.log(x); } g({name: 5}) // Fail-soft destructuring var [a] = []; a === undefined; // Fail-soft destructuring with defaults var [a = 1] = []; a === 1; // Destructuring + defaults arguments function r({x, y, w = 10, h = 10}) { return x + y + w + h; } r({x:1, y:2}) === 23
6. Default + Rest + Spread
Callee-evaluated default parameter values.
Turn an array into consecutive arguments in a function call.
Bind trailing parameters to an array
通过一系类的骚操作，让函数传参更灵活直接
// 【 1. Callee-evaluated default parameter values.】 function f(x, y=12) { // y is 12 if not passed (or passed as undefined) return x + y; } f(3) == 15 // 【2. Turn an array into consecutive arguments in a function call.】 function f(x, y, z) { return x + y + z; } // Pass each elem of array as argument f(...[1,2,3]) == 6 // 【3. Bind trailing parameters to an array】 function f(x, ...y) { // y is an Array return x * y.length; } f(3, "hello", true) == 6
7. Let + Const
Block-scoped binding constructs. let is the new var. _**const **_is single-assignment.
let和var区别：let声明的变量作用域是所在的块级作用域。
const 静态单赋值，赋值后不能再被赋新值
// 【let const 是有块级作用域的】 { var a = 1; let b = 2; const c = 3; } console.log(a); // 1 console.log(b); // b is not defined console.log(c); // c is not defined // 【同样的变量只能声明一次】 let b = 2; b = 4; let b = 3; // 'b' has already been declared // 【常量只能赋值一次】 const x = 6; x = 7; // Assignment to constant variable. // 【常量声明时必须赋值】 const y; // missing initializer in const declaration
8. Iterators + For…Of
Generalize for…in to custom iterator-based iteration with for…of
let fibonacci = { [Symbol.iterator]() { let pre = 0, cur = 1; return { next() { [pre, cur] = [cur, pre + cur]; return { done: false, value: cur } } } } } for (var n of fibonacci) { // truncate the sequence at 1000 if (n > 1000) break; console.log(n); }
he well-known Symbol.iterator symbol specifies the default iterator for an object. Used by for…of.
const iterable1 = {}; iterable1[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; console.log([...iterable1]); // expected output: Array [1, 2, 3]
9. Generators
The function* declaration (function keyword followed by an asterisk) defines a generator function, which returns a Generator object.
The Generator object is returned by a generator function and it conforms to both the iterable protocol and the iterator protocol.
function* infinite() { let index = 0; while (true) { yield index++; } } const generator = infinite(); // "Generator { }" console.log(generator.next().value); // 0 console.log(generator.next().value); // 1 console.log(generator.next().value); // 2 console.log(generator.next().value); // 3
10. Modules
如何使用export、import
// lib/math.js export function sum(x, y) { return x + y; } export var pi = 3.141593; // app.js import * as math from "lib/math"; console.log("2π = " + math.sum(math.pi, math.pi));
11. Map + Set + WeakMap + WeakSet
Set VS WeakSet：
WeakSets are collections of objects only. The WeakSet is weak, meaning references to objects in a WeakSet are held weakly. If no other references to an object stored in the WeakSet exist, those objects can be garbage collected.
Map VS WeakMap
The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced.
The keys of WeakMap must be objects and the values can be arbitrary values.
// Sets var s = new Set(); s.add("hello").add("goodbye").add("hello"); s.size === 2; s.has("hello") === true; // Maps var m = new Map(); m.set("hello", 42); m.set(s, 34); m.get(s) == 34; // Weak Maps var wm = new WeakMap(); wm.set(s, { extra: 42 }); wm.size === undefined // Weak Sets var ws = new WeakSet(); ws.add({ data: 42 }); // Because the added object has no other references, it will not be held in the set
12. Proxies
Proxies enable creation of objects with the full range of behaviors available to host objects. Can be used for interception, object virtualization, logging/profiling, etc.
代理对象：创建一个对象，拥有宿主对象的所有行为
// 【Proxying a normal object】 var target = {}; var handler = { get: function (receiver, name) { return `Hello, ${name}!`; } }; var p = new Proxy(target, handler); p.world === "Hello, world!"; // 【Proxying a function object】 var target = function () { return "I am the target"; }; var handler = { apply: function (receiver, ...args) { return "I am the proxy"; } }; var p = new Proxy(target, handler); p() === "I am the proxy";
13. Symbols
跟String、Number、Boolean类型一样，Symbol是基本类型值
The Symbol() function returns a value of type symbol
Every symbol value returned from Symbol() is unique. A symbol value may be used as an identifier for object properties; this is the data type’s primary purpose (即Symbol() 返回的值是唯一的，用来做唯一标识符)
let sym1 = Symbol() let sym2 = Symbol('foo') let sym3 = Symbol('foo') console.log(sym2 === sym3); // false console.log(Symbol('foo') === Symbol('foo')); // false let sym = new Symbol() // TypeError
14. 子类化内置对象
In ES2015, built-ins like Array, Dateand DOMElements can be subclassed.
// User code of Array subclass class MyArray extends Array { constructor(...args) { super(...args); } } var arr = new MyArray(); arr[1] = 12; console.log(arr.length == 2); // true
15. Math + Number + String + Object APIs
Many new library additions, including core Math libraries, Array conversion helpers, and Object.assign for copying.
新增的一些内置库函数，丰富js功能
Number.isInteger(Infinity) // false Number.isNaN("NaN") // false Math.acosh(3) // 1.762747174039086 Math.hypot(3, 4) // 5 Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2 "abcde".includes("cd") // true "abc".repeat(3) // "abcabcabc" Array.from(document.querySelectorAll("*")) // Returns a real Array Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior [0, 0, 0].fill(7, 1) // [0,7,7] [1,2,3].findIndex(x => x == 2) // 1 ["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"] ["a", "b", "c"].keys() // iterator 0, 1, 2 ["a", "b", "c"].values() // iterator "a", "b", "c" // 【Object.assign】 const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target); // expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget); // expected output: Object { a: 1, b: 4, c: 5 }
16. 支持二进制和八进制字面量
0b111110111 === 503 0o767 === 503 // true
17. Promises
Promises are a library for asynchronous programming
18. Reflect API
用法如下：
var O = {a: 1}; Object.defineProperty(O, 'b', {value: 2}); O[Symbol('c')] = 3; console.log(O); // ["a", "b", Symbol(c)] console.log(Reflect.ownKeys(O)); // ["a", "b", Symbol(c)] function C(a, b){ this.c = a + b; } var instance = Reflect.construct(C, [20, 22]); console.log(instance.c); // 42
