ES6语法学习

时间：2018-01-19 11:53:26 阅读：234 评论：0 收藏：0 [点我收藏+]

标签：添加 [] instance on() 日志记录解构 const factor enum

ECMAScript 6，也被称为ECMAScript 2015是ECMAScript标准的最新版本。6是语言的一个重要更新，并第一次更新语言由于ES5 2009标准。现在主要JavaScript引擎中实现这些特性正在进行中。看到的ECMAScript 6语言完整规范的ES6标准。
微信小程序支持ES6写法

ECMAScript 6包括以下新的特点：

Arrows

箭头是使用=>语法的函数缩写。它们在语法上类似于C＃，Java 8和CoffeeScript中的相关功能。它们既支持语句块体，又支持返回表达式值的表达式体。与函数不同，箭头与this周围的代码共享相同的词汇。

// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}));

// Statement bodies
nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v);
});

// Lexical this
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
}

Class

ES6类是基于原型的OO模式的简单糖。拥有一个简单的声明式表单使得类模式更容易使用，并且鼓励互操作性。类支持基于原型的继承，超级调用，实例和静态方法和构造函数。

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  get boneCount() {
    return this.bones.length;
  }
  set matrixType(matrixType) {
    this.idMatrix = SkinnedMesh[matrixType]();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

Enhanced Object Literals

对象文字被扩展为支持在构造中设置原型，foo: foo赋值的简写，定义方法，创建超级调用以及使用表达式计算属性名称。这些也将对象文字和类声明紧密地结合在一起，让基于对象的设计从一些相同的便利中受益。

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

Template Strings

模板字符串为构造字符串提供了语法糖。这与Perl，Python等中的字符串插值功能类似。可选地，可以添加标签以允许定制字符串结构，避免注入攻击或从字符串内容构建更高级别的数据结构。

// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript this is
 not legal.`

// String interpolation
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
POST`http://foo.org/bar?a=${a}&b=${b}
     Content-Type: application/json
     X-Credentials: ${credentials}
     { "foo": ${foo},
       "bar": ${bar}}`(myOnReadyStateChangeHandler);

Destructuring 解构

解构允许使用模式匹配进行绑定，支持匹配数组和对象。解构是失败软的，类似于标准对象查找foo["bar"]，undefined当没有找到时产生值。

// list matching
var [a, , b] = [1,2,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;

Iterators + For..Of

迭代器对象支持像CLR IEnumerable或Java Iterable这样的自定义迭代。推广for..in到自定义基于迭代器的迭代for..of。不要求实现一个数组，使像LINQ这样的懒惰设计模式成为可能。

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);
}

迭代是基于这些duck-typed接口（只使用TypeScript类型的语法来说明）：

interface IteratorResult {
  done: boolean;
  value: any;
}
interface Iterator {
  next(): IteratorResult;
}
interface Iterable {
  [Symbol.iterator](): Iterator
}

Generators

生成器使用function*和简化了迭代器创作yield。一个声明为function的函数返回一个Generator实例。生成器是迭代器的子类型，包括附加 next和throw。这些使值能够回流到生成器，所以yield是一个返回值（或抛出）的表达式。

注意：也可以用来启用“await”类似的异步编程，另请参阅ES7 await提议。

var fibonacci = {
  [Symbol.iterator]: function*() {
    var pre = 0, cur = 1;
    for (;;) {
      var temp = pre;
      pre = cur;
      cur += temp;
      yield cur;
    }
  }
}

for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

生成器接口是（仅使用TypeScript语法来进行说明）：

interface Generator extends Iterator {
    next(value?: any): IteratorResult;
    throw(exception: any);
}

Unicode

支持完整Unicode的非中断添加，包括字符串中的新Unicode字面形式和u处理代码点的新RegExp 模式，以及在21位代码点级别处理字符串的新API。这些附加功能支持使用JavaScript构建全球应用程序。

// same as ES5.1
"??".length == 2

// new RegExp behaviour, opt-in ‘u’
"??".match(/./u)[0].length == 2

// new form
"\u{20BB7}"=="??"=="\uD842\uDFB7"

// new String ops
"??".codePointAt(0) == 0x20BB7

// for-of iterates code points
for(var c of "??") {
  console.log(c);
}

Modules

组件定义模块的语言级支持。对流行的JavaScript模块加载器（AMD，CommonJS）的模式进行编码。运行时行为由主机定义的默认加载程序定义。隐式异步模型 - 在请求的模块可用并被处理之前，不执行任何代码。

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;
// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

一些额外的功能包括export default和export *：

// lib/mathplusplus.js
export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
    return Math.log(x);
}
// app.js
import ln, {pi, e} from "lib/mathplusplus";
alert("2π = " + ln(e)*pi*2);

Module Loaders

模块加载器支持：

动态加载
状态隔离
全局命名空间隔离
编译钩子
嵌套的虚拟化
可以配置默认的模块加载器，并且可以构建新的加载器来评估和加载独立或受限上下文中的代码。

// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});

// Create execution sandboxes – new Loaders
var loader = new Loader({
  global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log('hello world!');");

// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized

Map + Set + WeakMap + WeakSet

用于常见算法的高效数据结构。WeakMaps提供无漏洞的对象键表。

/ 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

Proxies

代理使用托管对象可用的全部行为来创建对象。可用于拦截，对象虚拟化，日志记录/分析等

/ 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';

所有运行时级元操作都有可用的traps：

var handler =
{
  get:...,
  set:...,
  has:...,
  deleteProperty:...,
  apply:...,
  construct:...,
  getOwnPropertyDescriptor:...,
  defineProperty:...,
  getPrototypeOf:...,
  setPrototypeOf:...,
  enumerate:...,
  ownKeys:...,
  preventExtensions:...,
  isExtensible:...
}

Symbols

符号启用对象状态的访问控制。符号允许属性被键入string（如在ES5中）或symbol。符号是一种新的原始类型。description用于调试的可选参数 - 但不是身份的一部分。符号是独一无二的（像gensym），但不是私人的，因为他们通过像反射功能暴露Object.getOwnPropertySymbols。

var MyClass = (function() {

  // module scoped symbol
  var key = Symbol("key");

  function MyClass(privateData) {
    this[key] = privateData;
  }

  MyClass.prototype = {
    doStuff: function() {
      ... this[key] ...
    }
  };

  return MyClass;
})();

var c = new MyClass("hello")
c["key"] === undefined

Subclassable Built-ins

在ES6，内置插件一样Array，Date和DOM ElementS可被继承。

Ctor目前命名的函数的对象构造使用两个阶段（都是虚拟调度的）：

调用Ctor[@@create]来分配对象，安装任何特殊的行为
在新实例上调用构造函数进行初始化
已知的@@create符号可以通过Symbol.create。内置插件现在@@create显式公开它们。

// Pseudo-code of Array
class Array {
    constructor(...args) { /* ... */ }
    static [Symbol.create]() {
        // Install special [[DefineOwnProperty]]
        // to magically update 'length'
    }
}

// User code of Array subclass
class MyArray extends Array {
    constructor(...args) { super(...args); }
}

// Two-phase 'new':
// 1) Call @@create to allocate object
// 2) Invoke constructor on new instance
var arr = new MyArray();
arr[1] = 12;
arr.length == 2

Math + Number + String + Array + Object APIs

许多新的库添加，包括核心数学库，数组转换助手，字符串助手，和Object.assign复制。

Number.EPSILON
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].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["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(Point, { origin: new Point(0,0) })

Binary and Octal Literals

为二进制（b）和八进制（o）添加了两个新的数字文字形式。

0b111110111 === 503 // true
0o767 === 503 // true

承诺

Promise是一个用于异步编程的库。承诺是对未来价值的一流表示。Promises被用在许多现有的JavaScript库中。

function timeout(duration = 0) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, duration);
    })
}

var p = timeout(1000).then(() => {
    return timeout(2000);
}).then(() => {
    throw new Error("hmm");
}).catch(err => {
    return Promise.all([timeout(100), timeout(200)]);
})

Reflect API

全反射API将对象的运行时级元操作公开。这实际上是代理API的反面，并且允许进行与代理陷阱相同的元操作。对于实现代理尤其有用。

Tail Calls

调用尾部位置保证不会无限增长堆栈。在无界输入的情况下使递归算法安全。

function factorial(n, acc = 1) {
    'use strict';
    if (n <= 1) return acc;
    return factorial(n - 1, n * acc);
}

// Stack overflow in most implementations today,
// but safe on arbitrary inputs in ES6
factorial(100000)

https://github.com/lukehoban/es6features#readme[https://github.com/lukehoban/es6features#readme]

ES6语法学习

标签：添加 [] instance on() 日志记录解构 const factor enum

原文地址：https://www.cnblogs.com/humi/p/8314007.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

ES6语法 学习

ECMAScript 6包括以下新的特点：

Arrows

Class

Enhanced Object Literals

Template Strings

Destructuring 解构

Iterators + For..Of

Generators

Unicode

Modules

Module Loaders

Map + Set + WeakMap + WeakSet

Proxies

Symbols

Subclassable Built-ins

Math + Number + String + Array + Object APIs

Binary and Octal Literals

Reflect API

Tail Calls

ES6语法学习