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

1. Callee-evaluated default parameter values.
2. Turn an array into consecutive arguments in a function call.
3. 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：

1. WeakSets are collections of objects only.
2. 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

1. The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced.
2. 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

1. 跟String、Number、Boolean類型一樣，Symbol是基本類型值
2. The Symbol() function returns a value of type symbol
3. 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

更好的閱讀體驗：語雀鏈接

（完）