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

更好的阅读体验：语雀链接

（完）