回顾一下 ECMAScript 2015 特性

是洋柿子啊
199 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

ECMAScript 2015 特性

ECMAScript 2015是JavaScript的第二次重大修订。
ECMAScript 2015也被称为ES6和ECMAScript 6。
本章描述ES6最重要的特性。

前言

写这篇文章，做个笔记，如果有错误的话，欢迎指正

Promises

  • Promises 是一个异步编程用的工具库。Promises 是第一种 对将来可以使用的值的类（class）的表示形式。Promises 被 用在大量已有的 JavaScript 工具库中。

Symbols

Proxy（代理）

  • Proxy 能够创建具有宿主对象全部可用功能的对象。 可用于拦截、对象虚拟化 日志/分析等。
// 为普通对象创建 Proxy
var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};

var p = new Proxy(target, handler);
p.world === "Hello, world!";

Map + Set + WeakMap + WeakSet

  • Map
    • Map是一组键值对的结构，用于解决以往不能用对象做为键的问题，具有极快的查找速度。(注：函数、对象、基本类型都可以作为键或值。)
// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;
  • Set
    • Set和Map类似，也是一组key的集合，但不存储value。
    • 由于key不能重复，所以，在Set中，没有重复的key。
    • 这也就是为什么可以用set（）来进行去重。
// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;
  • WeakMap
    • WeakMap（只）接受对象作为键。这些对象是被弱持有的，也就是说如果对象本身被垃圾回收的话，在WeakMap中的这个项目也会被移除。
    • WeakMap没有size属性或clear()方法，也不会暴露任何键、值或项目上的迭代器。
    • WeakMap只是弱持有它的键，而不是值
// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

WeakMap也是map，其中的键（对象）是弱持有的，因此当它是对这个对象的最后一个引用的时候，GC（垃圾回收）可以回收这个项目。
  • WeakSet
    • WeakSet的值必须是对象，而并不像set一样可以是原生类型值。
// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });

WeakSet也是set，其中的值是弱持有的，也就是说如果其中的项目是对这个对象最后一个引用的时候，GC可以移除它。

Iterators + For..Of

  • Iterator 对象支持自定义迭代

  • 利用 for..of 将 for..in 归纳为基于自定义迭代器的迭代。 不需要实现为一个数组，并且支持像 LINQ 一样的懒设计模式（lazy design patterns）。

    for...in 和 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);
}
  • 迭代（Iteration）就是基于这些假想类型的接口（使用 TypeScript 类型的语法仅用于阐述）实现的：
interface IteratorResult {

  done: boolean;

  value: any;

}

interface Iterator {

  next(): IteratorResult;

}

interface Iterable {

  [Symbol.iterator](): Iterator

}

箭头函数

类（Class）

  • ES2015 中的类（class）是在基于原型的面向对象模式上简单包装的语法糖。

    • 拥有一个 单一且方便的声明形式将更易于使用，并且 鼓励混合使用。
    • 类（class）支持基于原型的继承、super 调用、 实例和静态方法以及构造函数。

模板字符串

  • 模板字符串为构造字符串提供了语法糖。
  • 可以添加标签以允许定制字符串构造，避免注入攻击或从字符串内容中构建更高级别的数据结构。
// 创建基本的字符串
`This is a pretty little template string.`

// 多行字符串
`In ES5 this is
 not legal.`

// 插入变量绑定的值
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

解构（Destructuring）

  • 解构（Destructuring）允许基于模式匹配的方式进行赋值，这种模式匹配能够支持 数组（arrays）和对象（objects）。
  • 解构采取的是弱化故障的处理策略，类似于标准的对象 查找 foo["bar"]，在未找到时返回值为 undefined 。

Default Rest Spread

  • 默认参数(default)的功能是在函数被调用时对参数做自动估值(若没被赋值，则自动赋值)
function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}
f(3) == 15

  • 不定参数(rest)用在参数末尾，将最末尾的参数转换为数组。

    • 不定参数(rest)让我们不再需要arguments，更直接地解决了一些常见的问题
function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6
  • 扩展运算符(spread)则可以将数组转换为连续的函数参数
function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

Let + Const

限定在块级作用域的变量定义方式。let 是新的 var。const 定义的变量只能被 赋值一次。静态限制可以防止在赋值前使用。

Let + Const

限定在块级作用域的变量定义方式。

  • let 是新的 var。

  • const 定义的变量只能被 赋值一次。

    • 静态限制可以防止在赋值前使用。
avatar
文章
阅读
粉丝