ECMAScript 2015 Features - Babel

简介: 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.

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
目录
相关文章
|
3月前
|
JavaScript 前端开发
TypeScript 中的 infer 关键字
TypeScript 中的 infer 关键字
51 0
|
7月前
|
XML JavaScript 编译器
TypeScript 里的 Reference Type 和 Triple-Slash Directives
TypeScript 里的 Reference Type 和 Triple-Slash Directives
37 0
|
6月前
|
安全
TypeScript-infer关键字和TypeScript-unknown类型
TypeScript-infer关键字和TypeScript-unknown类型
23 0
|
7月前
|
JavaScript
什么是 TypeScript 的 Module Augmentation
什么是 TypeScript 的 Module Augmentation
34 0
|
11月前
|
JavaScript 前端开发
TypeScript 笔记 TypeScript 中的 infer
本文介绍 TypeScript 中的 infer 及其使用方式。
87 0
|
Rust 编译器 Go
你真的了解ESM吗?
模块兼容性 推荐阅读指数⭐️⭐️⭐️ ESM是个啥 推荐阅读指数⭐️⭐️⭐️⭐️ 在浏览器中使用ESM 推荐阅读指数⭐️⭐️⭐️⭐️ 模块指定符 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 默认情况下,模块是defer的 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 动态导入 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ import.meta 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 优化建议 推荐阅读指数⭐️⭐️⭐️ 网站中使用ESM 推荐阅读指数⭐️⭐️⭐️
104 0
你真的了解ESM吗?
|
前端开发 JavaScript 编译器
ES6、Babel
这篇文章我们主要讲两个方面的知识: 1、讲解ES6里面比较难理解的,但面试经常会问到的相关知识。 2、讲解Babel的原理以及如何使用Babel。
|
JavaScript 前端开发 安全
TypeScript 之 More on Functions
TypeScript 的官方文档早已更新,但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。
112 0
TypeScript 之 More on Functions
|
JavaScript 前端开发 API
TypeScript 之 Conditional Types
TypeScript 的官方文档早已更新,但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。
118 0
TypeScript 之 Conditional Types
|
JavaScript 网络架构
TypeScript 使用三个点号表示的 Rest 参数语法和 spread syntax
TypeScript 使用三个点号表示的 Rest 参数语法和 spread syntax
164 0
TypeScript 使用三个点号表示的 Rest 参数语法和 spread syntax