原文地址: https://hackernoon.com/testing-react-components-with-jest-and-enzyme-41d592c174f

原文作者: https://hackernoon.com/@sapegin

使用 Jest 和 Enzyme 测试 React 组件

引言

有人说在通常情况下测试 React 组件是没有太大用处的，但是我觉着在一些场景下是很有必要的：

• 组件库,
• 开源项目,
• 与第三方组件集成,
• bugs, 防止复现.

我尝试过很多的工具组合，但是最终如果会推荐给别的开发者，我更乐意去择推荐如下组合：

• Jest, 一个测试框架;
• Enzyme, React的 测试类库;
• enzyme-to-json 转换 Enzyme 包装类型匹配 Jest 的快照

我经常在测试中使用的是浅渲染和 Jest 快照测试。

在 Jest 进行快照测试

Shallow rendering

浅渲染指的是将一个组件渲染成虚拟 DOM 对象，但是只渲染第一层，不渲染所有子组件。所以即使你对子组件做了一下改动却不会影响浅渲染的输出结果。或者是引入的子组件中发生了 bug,也不会对父组件的浅渲染结果产生影响。浅渲染是不依赖 DOM 环境的。

举个例子:

const ButtonWithIcon = ({icon, children}) => (
    <button><Icon icon={icon} />{children}</button>
);

在 React 中将会被渲染成如下:

<button>
    <i class="icon icon_coffee"></i>
    Hello Jest!
</button>

但是在浅渲染中只会被渲染成如下结果:

<button>
    <Icon icon="coffee" />
    Hello Jest!
</button>

需要注意的是 Icon 组件并未被渲染出来。

快照测试

Jest 快照就像那些带有由文本字符组合而成表达窗口和按钮的静态UI：它是存储在文本文件中的组件的渲染输出。

你可以告诉 Jest 哪些组件输出的 UI 不会有意外的改变，那么 Jest 在运行时会将其保存到如下所示的文件中：

exports[`test should render a label 1`] = `
<label
  className="isBlock">
  Hello Jest!
</label>
`;

exports[`test should render a small label 1`] = `
<label
  className="isBlock isSmall">
  Hello Jest!
</label>
`;

每次更改组件时，Jest 都会与当前测试的值进行比较并显示差异，并且会在你做出修改是要求你更新快照。

除了测试之外，Jest 将快照存储在类似 __snapshots __ / Label.spec.js.snap 这样的文件中，同时你需要提交这些文件。

为什么选择 Jest

• 运行速度非常快。
• 可以进行快照测试。
• 交互式的监控模式，只会测试有过修改的部分。
• 错误信息很详细。
• 配置简单。
• Mocks 和 spies 支持.
• 通过命令行可以生成测试报告.
• 发展前景很好。
• 不会写出像 Chai 框架 'expect(foo).to.be.a(‘function’)' 一样很容易出错的断言 'expect(foo).to.be.a.function' 因为 Jest 只会写 'expect(foo).to.be.true' 这样确定正确的断言。

为什么选择 Enzyme

• 便利的工具函数库封装，可以处理浅渲染，静态渲染标记以及DOM渲染。
• jQuery 风格的API，便于使用和直观。

配置

第一步安装所有的依赖包括同版本依赖:

npm install --save-dev jest react-test-renderer enzyme enzyme-adapter-react-16 enzyme-to-json

还需要安装 Babel 插件 babel-jest 或者 TypeScript 插件 ts-jest

更新工程的 package.json 文件:

"scripts": {
  "test": "jest",
  "test:watch": "jest --watch",
  "test:coverage": "jest --coverage"
},
"jest": {
  "setupFiles": ["./test/jestsetup.js"],
  "snapshotSerializers": ["enzyme-to-json/serializer"]
}

配置项 'snapshotSerializers' 允许你通过配置 'enzyme-to-json'，把 Enzyme 的封装类型传给 'Jest' 的快照匹配项中，从而不需要手动进行转化。

创建一个 test/jestsetup.js 的文件来自定义 Jest 的运行环境（上面的 setupFiles 配置项）

import Enzyme, { shallow, render, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
// React 16 Enzyme adapter
Enzyme.configure({ adapter: new Adapter() });
// Make Enzyme functions available in all test files without importing
global.shallow = shallow;
global.render = render;
global.mount = mount;

针对 css 模块也可以添加下面的配置到package.json

"jest": {
  "moduleNameMapper": {
    "^.+\\.(css|scss)$": "identity-obj-proxy"
  }
}

And run:

同时安装依赖:

npm install --save-dev identity-obj-proxy

注意 identity-obj-proxy 依赖的 node 版本是 Node 4或者 Node 5需要开启 'harmony-proxies'

测试组件的渲染

对于大部分没有交互的组件，下面的测试用例已经足够:

test('render a label', () => {
    const wrapper = shallow(
        <Label>Hello Jest!</Label>
    );
    expect(wrapper).toMatchSnapshot();
});

test('render a small label', () => {
    const wrapper = shallow(
        <Label small>Hello Jest!</Label>
    );
    expect(wrapper).toMatchSnapshot();
});

test('render a grayish label', () => {
    const wrapper = shallow(
        <Label light>Hello Jest!</Label>
    );
    expect(wrapper).toMatchSnapshot();
});

Props 测试

有的时候如果你想测试的更精确和看到真实的值。那样的话需要在 Enzyme API 中使用 Jest的 断言。

test('render a document title', () => {
    const wrapper = shallow(
        <DocumentTitle title="Events" />
    );
    expect(wrapper.prop('title')).toEqual('Events');
});

test('render a document title and a parent title', () => {
    const wrapper = shallow(
        <DocumentTitle title="Events" parent="Event Radar" />
    );
    expect(wrapper.prop('title')).toEqual('Events — Event Radar');
});

有的时候你不能用快照。比如组件里面有随机ID像下面的代码:

test('render a popover with a random ID', () => {
    const wrapper = shallow(
        <Popover>Hello Jest!</Popover>
    );
    expect(wrapper.prop('id')).toMatch(/Popover\d+/);
});

事件测试

你可以模拟类似 'click' 或者 'change'这样的事件然后把组件和快照做比较:

test('render Markdown in preview mode', () => {
    const wrapper = shallow(
        <MarkdownEditor value="*Hello* Jest!" />
    );

    expect(wrapper).toMatchSnapshot();

    wrapper.find('[name="toggle-preview"]').simulate('click');

    expect(wrapper).toMatchSnapshot();
});

有的时候你想要测试一个子组件中一个元素是怎样影响组件的。你需要使用 Enzyme的 mount 方法来渲染一个真实的 DOM。

test('open a code editor', () => {
    const wrapper = mount(
        <Playground code={code} />
    );

    expect(wrapper.find('.ReactCodeMirror')).toHaveLength(0);

    wrapper.find('button').simulate('click');

    expect(wrapper.find('.ReactCodeMirror')).toHaveLength(1);
});

测试事件处理

类似于在事件测试中，由使用快照测试组件的输出呈现替换为使用Jest的mock函数来测试事件处理程序本身：

test('pass a selected value to the onChange handler', () => {
    const value = '2';
    const onChange = jest.fn();
    const wrapper = shallow(
        <Select items={ITEMS} onChange={onChange} />
    );

    expect(wrapper).toMatchSnapshot();

        wrapper.find('select').simulate('change', {
        target: { value },
    });

    expect(onChange).toBeCalledWith(value);
});

不仅仅是JSX

Jest使用JSON进行快照测试，因此你可以测试返回JSON的任何函数，方法与测试组件相同：

test('accept custom properties', () => {
    const wrapper = shallow(
        <Layout
            flexBasis={0}
            flexGrow={1}
            flexShrink={1}
            flexWrap="wrap"
            justifyContent="flex-end"
            alignContent="center"
            alignItems="center"
        />
    );
    expect(wrapper.prop('style')).toMatchSnapshot();
});

调试与故障排除

调试浅层渲染器输出

Use Enzyme’s debug method to print shallow renderer’s output:
使用Enzyme的调试方法打印千层渲染器的输出：

const wrapper = shallow(/*~*/);
console.log(wrapper.debug());

启用覆盖范围的失败测试

当你的测试失败时，带有覆盖范围标志的diff如下所示：

-<Button
+<Component

尝试将箭头函数组件替换为常规函数组建：

- export default const Button = ({ children }) => {
+ export default function Button({ children }) {

requestAnimationFrame 错误

当你运行你的测试时，你可能会看到如下错误：

console.error node_modules/fbjs/lib/warning.js:42
  Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills

React 16依赖于requestAnimationFrame，因此你需要在你的测试代码中添加一个polyfill

// test/jestsetup.js
import 'raf/polyfill';

参考来源

• Jest cheat sheet
• Testing React Applications by Max Stoiber
• Migrating to Jest by Kent C. Dodds
• Migrating Ava to Jest by Jason Brown

原文地址: https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a

原文作者: Daily Fire

翻译作者: hanxiansen

中文标题：通过GASP让vue实现动态效果

单页应用及支持它们的前端框架提供了一个很好的机会，可以为程序设计提供令人惊叹的交互层，本文，我们将了解 vue.js 及如何集成 GASP 动画库来添加令人惊叹的动画效果。

Vue.js 是一个功能强大且易掌握的 JS 框架，在 Vue CLI 的帮助下，我们能够快速构建具有所有最新 Webpack 功能的应用程序，而无需花费时间来配置 webpack，只需安装 Vue CLI，在重大上输入:create <project-name>，您就可以发车了。

GASP是一个JavaScript动画库，它支持快速开发高性能的 Web 动画。GASP 使我们能够轻松轻松快速的将动画串在一起，来创造一个高内聚的流畅动画序列。

在构建新的 Daily Fire 主页时，我为了演示产品如何工作而使用了大量动画，但是通过 GASP的方式（不是 GIF 或视频），我可以为动画添加交互层使它们更具吸引力。如你所见，将 GASP 与 vue相结合是简单且强大的，

让我们看看如何使用 GASP 与 VUE 实现简单的时间轴，我们将在本文使用 .vue 文件，这些文件由 webpack 的 vue-loader加载使用，通过Vue CLI创建的项目将会自动

基础

让我们先编写一些标记，以便了解我们将制作的动画

<template>
  <div ref="box" class="box"></div>
</template>

<style>
.box {
  height: 60px;
  width: 60px;
  background: red;
}
</style>

我们将一个红色 box 绘制到DOM中，注意 div 标签上的ref 标记，当我们在引入GASP 后通过该属性可以引用该元素。VUE 通过组件的$refs属性使通过 ref 标记的元素可以使用。

现在引入 GASP

<template>
  <div ref="box" class="box"></div>
</template>

<script>
import { TimelineLite } from 'gsap'

export default {
  mounted() {
    const { box } = this.$refs
    const timeline = new TimelineLite()

    timeline.to(box, 1, { x: 200, rotation: 90 })
  }
}
</script>

<style>
/* styles emitted */
</style>

首先，我们从 GASP 中引入TimelineLite，然后，当组件挂载后，我们通过$refs获取到对 box 元素的引用。然后我们初始化 GASP 的时间线实例来播放动画。

Timeline 实例暴露出一个to方法，我们传递三个参数给该方法：

• 参数1：要设置动画效果的元素
• 参数2：动画运行的秒数
• 参数3：描述动画行为的对象

下面链接展示了一小段代码展示的运行效果：

https://codepen.io/smlparry/pen/rZdbEw

很简单，有木有！接下来让我们用 GASP 的 EasePack 赋予这个小动画更多的生命。使用 ease缓动特效是一种简单的方案，它将使你的动画特效不再那么僵硬，更加友好。当然，如果你没有将你的动画放进队列中，你将不能充分利用好 GASP 的时间线，让我们在动画的运行中途将其由红框过渡为绿框。

<template>
  <div ref="box" class="box"></div>
</template>

<script>
import { TimelineLite, Back } from 'gsap'

export default {
  mounted() {
    const { box } = this.$refs
    const timeline = new TimelineLite()

    timeline.to(box, 1, {
      x: 200,
      rotation: 90,
      ease: Back.easeInOut, // Specify an ease
    })
    timeline.to(box, 0.5, {
      background: 'green'
    },
    '-=0.5' // Run the animation 0.5s early
    )
  }
}
</script>

<style>
/* styles emitted */
</style>

注意第21行的额外参数，在上面的代码中它将告诉 GASP 运行一个相对于前一个动画的动画，使用+=指定完成后的时间，使用-= 指定完成前的时间。

结果在链接中：https://codepen.io/smlparry/pen/mGxYWN

有了这个简单的改动，我们的动画更加生动了！

通过这些原则的基础了解，我们可以开始构建更复杂、更吸引人的动画。正如我们将在下一个例子中所看到的。

在基础上更进一步

让我们创建一个动画(该动画曾在Daily Fire首页中使用 )，这个友好的小泡泡:

让我们从标签标记开始：

<template>
<div class="bubble-wrapper">
  <div ref="bubble" class="bubble">
    <img class="bubble-image"
         src="./assets/img/slack-white.svg" />
  </div>
  <div ref="bubblePulse" class="bubble-pulse"></div>
</div>
</template>

<style>
.bubble-wrapper {
  position: relative;
}

.bubble {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
  background: #272727;
  border-radius: 50%;
  height: 100px;
  width: 100px;
}

.bubble-pulse {
  position: absolute;
  z-index: 1;
  height: 120px;
  width: 120px;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  background: #272727;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
}

.bubble-image {
  height: 50%;
}
</style>

我们现在有这个一个元素

让我们赋予它一些生命：

<template>
<!-- HTML emitted -->
</template>

<script>
import { TimelineLite, Back, Elastic, Expo } from "gsap"

export default {
  mounted() {
    const { bubble, bubblePulse } = this.$refs
    const timeline = new TimelineLite()

    timeline.to(bubble, 0.4, {
      scale: 0.8,
      rotation: 16,
      ease: Back.easeOut.config(1.7),
    })
    timeline.to(
      bubblePulse,
      0.5,
      {
        scale: 0.9,
        opacity: 1,
      },
     '-=0.6'
    )

    this.timeline.to(bubble, 1.2, {
      scale: 1,
      rotation: '-=16',
      ease: Elastic.easeOut.config(2.5, 0.5),
    })
    this.timeline.to(
      bubblePulse,
      1.1,
      {
        scale: 3,
        opacity: 0,
        ease: Expo.easeOut,
      },
      '-=1.2'
    )
  }
}
</script>

<style>
/* CSS Emitted */
</style>

虽然一开始看起来很麻烦，但只要花点时间来理解它的实际运行情况，其实它只是一些按顺序排列的 CSS transform属性。这里有几个自定义的 ease 特效，GASP 提供了一个有趣的小工具，你可以根据喜好自由配置：https://greensock.com/ease-visualizer

现在效果如下：

循环

上面的gif动画其实具有欺骗性，gif图片是循环的，但代码不是，让我们看看如何使用 GASP 和 VUE 循环播放动画。GASP 的 TimelineLite提供了一个onComplete属性，通过该属性我们可以分配一个函数，利用该函数我们可以循环动画，另外，我们将通过data使timeline在组件的其余部分也可使用。

<template>
<!-- HTML Emitted -->
</template>

<script>

// ...

export default {
  data() {
    return {
      timeline: null,
    }
  },

  mounted() {
    // ...

    this.timeline = new TimelineLite({
      onComplete: () => this.timeline.restart()
    })

    // ...

  }
}
</script>

<style>
/* CSS Emitted */
</style>

现在 GASP 将会在动画完成后又重新开始，效果如下：https://codepen.io/smlparry/pen/dqmEax

添加交互性

现在，我们的动画效果已经写得差不多了，可以考虑添加一些交互特效。在本例中，我们将添加一个按钮，来随机更新气泡中的logo。

为了能做到该需求，我们必须做以下几件事：

• 将图片的引用源地址绑定到 VUE 的data中
• 创建要使用的图片数组
• 创建随机获取logo的方法
• 添加按钮来更改logo

<template>
  <div class="bubble-wrapper">
    <div ref="bubble" class="bubble">
      <img class="bubble-image"
           :src="currentLogo" />
    </div>
    <div ref="bubblePulse" class="bubble-pulse"></div>
  </div>

  <button @click="randomiseLogo">Random Logo</button>
</template>

<script>

// ...

export default {
  data() {
    return {
      timeline: null,
      logos: ['path/to/logo-1.svg', 'path/to/logo-2.svg', 'path/to/logo-3.svg'],
      currentLogo: '',
    }
  },

  methods: {
    randomiseLogo() {
      const logosToSample = this.logos.filter(logo => logo !== this.currentLogo)
      this.currentLogo = logosToSample[Math.floor(Math.random() * logosToSample.length)]
    }
  },

  mounted() {
    this.randomiseLogo()

    // ...

  }
}
</script>

<style>
/* CSS Emitted */
</style>

有了上面的代码，现在我们可以通过一个按钮来更新制作运行动画的元素，通史也可以对其进行动画制作，效果：https://codepen.io/smlparry/pen/RYMXPx

我使用了与上面动画非常类似的技术来实现主页的动画效果，我从数组中选择列表的下一个元素，然后将其append到列表中。

原文地址: https://www.robinwieruch.de/javascript-project-setup-tutorial/

原文作者: robinwieruch.de

翻译作者: chenmf

How to set up a modern JavaScript project [Tutorial]

本文是“前端工程搭建”系列的第一篇
Part 2: 怎么设置Webpack项目
Part 3: 怎么在Webpack中设置Babel

原文地址: https://medium.com/siliconwat/data-structures-in-javascript-1b9aed0ea17c

原文作者: Thon Ly

翻译作者: hanxiansen

中文标题：前端必知必会的数据结构

Data Structures in JavaScript

介绍

随着业务逻辑越来越多地从后台迁往前端，前端工程化方面的专业知识变得愈发重要。作为一名前端工程师，我们依赖于像 React 这样的视图库来提高工作效率。而视图库又依赖于像 Redux 这样的数据流管理工具来掌控数据。React 和 Redux 共同遵循响应式设计模式，在该设计模式下，数据的更新将会导致对应 UI 的更新。后端越来越充当着简单的 API 服务器角色，提供数据的检索和更新接口。实际上，后端只是把数据库搬到了前端，期望前端来处理所有的数据控制器逻辑。微服务和 GraphQL 的日益流行证明了这一增长趋势。

现在，除了掌握 HTML 和 CSS 以外，前端工程师还应该掌握 JavaScript。因为客户端成了服务端的数据库“副本”，掌握常用的的数据结构变得至关重要。事实上，一个工程师的水平可以从 ta 知道何时及为何使用特定的数据结构的能力中得以体现。

Bad programmers worry about the code. Good programmers worry about data structures and their relationships.

糟糕的工程师考虑代码，优秀的工程师考虑数据结构及其对应关系。

— Linus Torvalds, Creator of Linux and Git

总的来说，基础的数据结构分三种：栈和队列是类似数组的数据结构，它们的区别只在于插入和删除条目的方式不同。链表、树和图是具有节点的数据结构，这些节点保持着对其它节点的引用。哈希表依赖于哈希函数来保存和定位数据。就复杂度而言，栈和队列是最简单的，可以用链表来构造。树和图是最复杂的，因为它们扩展了链表的概念。哈希表利用这些数据结构来高效的执行任务。就效率而言，链表最适合记录与存储数据，哈希表则最适合搜索与检索数据。

本文将依照“为什么(why)”与“何时(when)”的顺序来进行阐释说明，让我们开始吧！

栈(Stack)

可以说，Js 中最重要的栈就是调用栈(译者注：调用栈是 js 解释器追踪函数执行流的一种机制)，在该栈中，无论何时执行函数，我们都会往栈中推入该函数的作用域。在编码中，它只是一个具有两个基本操作的数组：push 和 pop。push 将元素添加到数组的头部，而pop将它们从同一位置删除。换句话说，栈遵循“后进先出”的原则(LIFO)。

下面是代码中的栈示例。请注意，我们可以颠倒栈的顺序：底部变为顶部，顶部变为底部。因此，我们可以使用十足的 unshift 和 shift 方法来分别代替 push 和 pop。

https://codepen.io/thonly/pen/GMyLOV

随着条目数的增加，push/pop将会比unshift/shift拥有更好的性能，因为后者的每个条目都需要重建索引，但前者不需要。

###队列(Queue)

Js 是一门事件驱动型语言，它使得支持非阻塞操作成为可能。在内部，浏览器只管理一个线程来运行整个 Js 代码，它使用事件队列(event queue)将事件注册到队列中，然后使用事件循环(event loop)来监听被注册的事件。为了在单线程环境中支持异步操作(节省资源并增强 Web 体验)，监听函数只有当调用栈为空时才会出队列并执行。Promise 就是基于这种事件驱动架构设计的，它允许用“同步模式”来执行不糊阻塞其它操作的异步代码。

在编程中，队列仅仅是拥有两个主要操作方法的数组：Unshift将条目列入数组的尾部，而Pop则将它们从数组头部列出。换句话说，队列遵循“First in, First Out”的原则(FIFO)。如果颠倒方向，我们可以使用push和shift方法唉替换unshift和pop方法。

队列的代码示例如下：

https://codepen.io/thonly/pen/KypxZg

链表(Linked List)

类似于数组，链表也是按照顺序存储数据元素。不同的是，链表保存指向其它元素的指针，而非索引。链表的第一个节点被称为头部节点，最后一个节点被称为尾部节点，在单链表中，每个检点只有一个指向下个节点的指针。在单链表里，头部节点是我们遍历剩余节点的的地方。在双链表中，每个节点还保留了指向上一个节点的指针。因此，我们也可以从尾部节点开始，“倒退遍历“到头部节点。

链表具有常量的插入和删除时间，因为我们只需更改指针即可。但在数组中执行相同的操作却需要线性时间，因为后续条目需要移位。此外，只要有空间，链表就可以增长。然而，及时是可以自动调整大小的“动态数组”在空间利用上也是出乎意料的昂贵。当然，事物总有权衡取舍。在链表中检索和编辑一个元素，我们需要遍历整个链表，这等同于线性时间。然而对于有索引的数组，这样的操作时微不足道的。

类似于数组，链表也可以进行栈的操作。该操作很简单，只需将头部作为插入和取出的唯一位置。链表也可以进行队列操作，这可以使用双向链表来实现，插入发生在尾部，删除发生在头部，反之亦然。对于大的数据而言，这种实现队列的方案比数组的性能更高，因为在数组的开始位置插入和移出元素，需要线性的时间来重新索引后续的每个元素。

链表数据结构在客户端和服务端都很有用。在客户端，像Express这样的 web 框架也以类似的逻辑构建它的中间件。当收到请求，请求通过管道一个接一个的传递下去，直到请求被发出。

双向链表的代码如下：

https://codepen.io/thonly/pen/QqRVJX

树(Tree)

树类似于数组，区别在于它在层次结构中保留了对多个子节点的引用。换句话说，每个节点不止拥有一个父节点。DOM 树就是这样一种数据结构，它拥有一个 html 根节点，然后分成 head节点和 body 节点，这两个节点又进一步细分为多个你所熟悉的 html 标签。更深层面上，原型继承和 React 的组件也采用类似的树形结构。当然，作为DOM的内存表现形式，React 的虚拟 Dom也是一个树形结构。

二叉搜索树是特殊的，因为它拥有的子节点不能超过两个。左子节点的值必须小于或等于其父节点的值，而右子节点的值必须大于父节点的值。通过这种结构和平衡方式，我们可以在指数时间内检索任何值，因为我们可以在每次迭代中忽略另一半分支。插入和删除的时间也是指数级的。此外最小值和最大值也可以很容易的在最左边和最右边的叶子节点中找到。

遍历树可以在垂直或水平过程中进行。在垂直方向的深度优先遍历(DFT)中，递归算法将会比迭代算法更加优雅。节点遍历可以按照前序遍历、中序遍历、后序遍历的方式进行。如果我们需要先访问根节点再探索叶子节点，我们应选择前序遍历。但如果我们需要先访问叶子节点再访问根节点，我们应选择后序遍历。顾名思义，中序遍历使我们可以按照顺序进行遍历。这种特性使二叉搜索树成为排序的最佳选择。

在水平方向上的广度优先遍历(BFT)中，迭代比递归更优雅。这需要使用一个队列来追踪每次迭代的所有子节点。这样一个队列所需的内存是微不足道的。然而，如果树的形状宽大于深，BFT 是比 DFT 更好的选择。此外，BFT 在任意两个节点之间采用的路径是可能的最短路径。

二叉搜索树的示例代码如下：

https://codepen.io/thonly/pen/qVWOpM

图(Graph)

如果一个树可以自由的拥有多个父级节点，它将变为Graph(图)。将图中的节点连接在一起的边可以是有方向的，也可以是无方向的，可以是加权的，也可以是未加权的。同时具备方向和权重的边类似于矢量。

混合形式的多重继承和具有多对多关系的数据对象生成图形结构。社交网络和互联网本身也是图。自然界中最复杂的图是我们的人脑，神经网络试图复制人脑来赋予机器超级智能。

###哈希表(Hash Table)

哈希表是一种类似于字典的结构，它将键与值进行配对。每个键值对在内存中的储存位置由焊锡函数决定，该哈希函数接收一个 key ，然后返回它应该插入和检索该键值对的地址。如果两个或更多的 key 被转换为同一个地址，可能会导致冲突。为了保持哈希函数的健壮性，getter 和 setter 方法应该预防到这些问题，来确保可以恢复所有的数据，并且不会覆盖任何数据，通常，链表可以提供最简单的解决方案。拥有巨大空间的哈希表也同样可以解决该问题。

可以转载到公众号高级前端进阶上吗？会标明作者与来源，感谢

原文地址：https://blog.logrocket.com/css-selectors-level-4-b5da36bcd54c/

原文作者：Esteban Herrera

翻译作者：thisang

CSS 第四级选择器

选择器是 CSS 的核心部分。你用来做一些操作比如说选择某种类型的所有元素，就像下面这样：

div {
  /* 一些应用在所有 div 元素上的样式 */
}

或者你可以选择一个在它的父元素下的最后一个子元素：

ul li:last-child {
  /* 一些只应用在列表的最后一个子元素上的样式 */
}

当然，你也可以去做一些更复杂的事情，比如说选择选择列表中除了最后一个子元素之外的所有子元素。

事实上，这样做的方法不止一种，一些方法甚至更复杂。

例如，比较以下这两个：

ul li {
  /* 一些应用在所有子元素上的样式 */
}
ul li:last-child {
  /* 一些样式用来重置上面生效的样式，因为上面的样式不适用于上面最后一个子元素 */
}

ui li:nth-last-child(n+2) {
  /* 一些应用在除了最后一个子元素之外的所有子元素上面的样式 */
}

ul li属于第一级选择器。

last-child和nth-last-child属于第三级选择器。

你可以把级别看作是 CSS 选择器的版本，其中每个级别都会添加一些功能更强大的选择器。

在这篇文章中，我会根据截至 2019 年 1 月的草案规范，和你一起过一遍下一代选择器（第四级），主要有以下分类：

• 逻辑组合
• 属性选择器
• 语言伪类
• 位置伪类
• 用户操作伪类
• 输入伪类
• 树结构伪类
• 网格结构伪类

在我写这篇文章的时候，第四级选择器的规范还处于草案阶段。直到官方推荐之前，它可能还会改，而且你可能还会发现很多选择器甚至都还没有被一些浏览器支持或者需要添加一些前缀（:-moz-或:-webkit-）。

对于每一个选择器，我都会提供一个can I use的链接以便你可以看到哪些浏览器支持它（如果有的话）、一些简短的介绍、一个例子、和一个 Codepen 的链接，这样你就能自己去尝试一下（即使它暂时无法使用，因为将来可能会改）。

好了，让我们中逻辑组合选择器开始。

逻辑组合选择器

这个类别包括通过组合选择其他选择器而起作用的选择器。

:not(selector1,selector2,...)

浏览器支持

它选择那些与传入的参数不匹配的元素列表。例如：

p:not(.beginning, .middle){
  color: red;
}

这会给所有的没有.beginning和.middle类的p元素设置颜色为红色的样式。

这个选择器的第三级版本只能允许一个选择器，而不是两个或更多的的选择器。例如，上面的样式可以写成：

p:not(.beginning):not(.middle){
  color: red;
}

在 Codepen 上试试

:is(selector1,selector2)

浏览器支持

它选择那些与传入的参数匹配的元素列表。例如：

p:is(.beginning, .middle){
  color: blur;
}

这会给所有的具有.beginning和.middle类的p元素设置颜色为蓝色的样式。

自从上一个工作草案版本以来最重大的变化之一就是:matches()选择器被更名为:is()并且已经被 Safari（唯一一个完全支持这个选择器的浏览器）弃用，因此它和与之相反的选择器:not()可以更好的配对。

如果要向后兼容，可以用:is()作为:matches()的别名。

然而，:matches()以前叫做:any()，因此大多数浏览器都支持带前缀的伪类：

p:-webkit-any(.beginning, .middle){
  color: blue;
}
p:-moz-any(.beginning, .middle) {
  color: blue;
}

在 Codepen 上试试

:where(selector1,selector,...)

在我写这篇文章的时候，还没有任何一个浏览器支持这个选择器。

它具有和:is()相同的语法和功能，但是不管这个选择器接受多少个参数，这个选择器的权重都是 0。

权重是 CSS 的应用规则。如果两个选择器同时应用在同一个元素上面，则权重高的那个生效。如果不同规则具有相同的权重，那么应用在这个元素上的最后一个规则将会生效。

这个选择器可以用来实现筛选和覆盖与之关联的元素的样式。

下面是一个权重的例子：

a:not(:hover) {
  text-decoration: none;
}
nav a {
  /* 不会生效 */
  text-decoration: underline;
}
/* 使用新的第四级选择器 :where */
a:where(:not(:hover)) {
  text-decoration: none;
}
nav a{
  /* 生效 */
  text-decoration: underline;
}

在 Codepen 上试试

:has(reslativeSelector1,reslativeSelector2,...)

浏览器支持（在写这篇文章的时候，还没有任何一个浏览器支持这个选择器）

这个选择器将一个相对选择器列表作为参数。它选择那些在指定范围内匹配相对选择器列表的元素。

例如：

p:has(strong, em) {
  color: red;
}

这会给所有的包含<strong>或者<em>元素的p元素添加一个颜色为红色的样式。

在 Codepen 上试试

属性选择器

这类选择器包含那些应用在元素属性上的选择器。

[foo="bar"i]

浏览器支持

它选择那些foo属性的值等于bar的元素，忽略大小写。

例如：

p[class="text" i] {
  color: green;
}

这会给所有的class属性的值为Text、TEXT、或者是text、又或者是其他组合的p元素添加一个颜色为绿色的样式。

在 Codepen 上试试 

[foo="bar"s]

在我写这篇文章的时候，还没有任何一个浏览器支持这个选择器。

它选择那些foo属性的值严格等于bar的元素。

例如：

p[class="text" s]{
  color: green;
}

这会给所有class属性的值为text（例如，不是Text）的p元素添加一个颜色为绿色的样式。

在 Codepen 上试试

语言伪类？

这类选择器包括那些使用语言相关设置的选择器。

:dir(ltr)

浏览器支持

它选择那些具有从左到右方向性的元素，其中文档语言指定如何确定方向性。与之对应的：:dir(rtl)表示具有从右到左方向性的元素。其他值是无效的也不会匹配任何元素。

例如：

p:dir(rtl) {
  background-color: red;
}

这会给设置了从左到右方向的p元素添加一个背景色为红色的样式。

在 Codepen 上试试

:lang(zh,"*-hant")

浏览器支持

在我写这篇文章的时候，还没有任何一个浏览器支持这个第四级选择器。

它选择那些被标记为中文的元素（或者选择其他语言标记的元素，只需要把zh改为其他的语言代码就可以了）或者用繁体字书写的元素（或者在其他字符的系统中，将-hant替换为其它字符代码）。

实际上，第二级选择器里面就有这个选择器，但是在第四级选择器里面新增了通配符和逗号分隔列表。

它接收一个或多个以逗号为分隔的语言代码作为参数。如果语言代码里面包含*，则必须对它们进行正确的转义（:lang(es-\*)）或字符串引号（:lang("es-*")）。

例如：

p:lang("*-CH") {
  background-color: red;
}

这会给所有被标记为使用瑞士语言的p元素添加一个背景色为红色的背景色。

在 Codepen 上试试

位置伪类

这类选择器包括那些与超链接有关得选择器。

:any-link

在Can I use上并没有这个选择器的兼容性介绍，但是大多数主流浏览器都支持这个选择器。

它选择那些具有href属性的元素（例如<a>或<link>。或者说，所有与:link或:visited伪类匹配的元素。

例如：

a:any-link {
  color: red;
}

这会给所有具有href属性的的所有a元素添加一个颜色为红色的样式。

在 Codepen 上试试

:local-link

在我写这篇文章的时候，还没有任何一个浏览器支持这个第四级选择器。

它选择那些链接到当前 URL 的元素。如果链接的指向包括 URL 片段，则 URL 片段和和当前 URL 也必须要匹配。比如不匹配，则在比较中不考虑当前 URL 的片段 URL 部分。

例如：

a:local-link {
  text-decoration: none;
}

这会给所有的具有href属性的指向当前页面的a元素（也许它们是导航菜单的一部分）去掉下划线。

在 Codepen 上试试

用户操作伪类

这类选择器包括那些用户正在操作的元素的选择器。

:focus-within

浏览器支持

它选择那些与:focus伪类匹配的元素（当元素具有焦点时）或具有与:focus匹配的子元素。

例如，使用如下的一个表单：

<from>
  <input type="text" id="name" placeholder="Enter your name" />
</from>

当表单里的输入框获得焦点的时候，它会给表单添加一个边框。

在 Codepen 上试试

:focus-visible

浏览器支持

它选择一个处于焦点状态的元素（与:focus伪类匹配），浏览器通常会为了让获得焦点的元素清晰可见，给它添加一个焦点环。

和:focus的区别和细微。

如果:focus-visible匹配了，:focus一定会匹配，但是反过来就不一定了，它取决于浏览器（如果启用了聚焦环的绘制）和获取焦点的元素（通过鼠标点击或者 tab 键）。

Firefox 把这个选择器实现为:-moz-focusring伪类。

例如，在某些场景下，有以下样式：

/* 标准第四级选择器 */
:focus-visible {
  background-color: lightgary;
}
/* 基于 Firefox 的第四级选择器 */
:moz-focusring {
  background-color: lightgary;
}

只有在元素通过 tab 获得焦点的时候才会生效。

在 Codepen 上试试

输入伪类

这类选择包括那些应用于接受用户输入的元素的选择器。

:read-write and :read-only

浏览器支持

:read-write选择可读可写的元素（例如那些不具有 readonly属性的<input>的元素）。

:read-only选择那些只能读的元素（例如具有readonly属性的<input>的元素）。

然而，这些选择器不仅仅选择<input>或<textarea>元素，它们也可以选择用户能输入的任何选择，例如将contenteditable属性设置为true的<p>元素。

例如：

:read-write {
  background-color: lightyellow;
}

:read-only {
  background-color: lightgary;
}

/* Firefox */
:-moz-read-write {
  background-color: lightyellow;
}

:moz-read-only {
  background-color: lightgary;
}

这会把页面上所有的不可编辑元素背景色设置为浅灰色，把可以编辑的元素的背景色设置为浅黄色。

在 Codepen 上试试

:placeholder-shown

浏览器支持

它选择一个当前正在显示占位符文本的输入框元素。

例如：

input:placeholder-shown {
  color: red;
}

这会给当前显示占位符文本的input元素设置一个颜色为红色的样式，注意这里设置的只是光标的颜色。

在 Codepen 上试试

:default

浏览器支持

它选择那些在一组相关元素里面作为默认选项的元素。通常用于按钮和选择列表 / 菜单。

例如：

input:default {
  box-shadow: 0 0 2px 2px green;
}

input:defaut + lable {
  color: green;
}

这会给默认<input>元素的标签设置绿色阴影和颜色。

在 Codepen 上试试

:indeterminate

浏览器支持

它选择那些处于不确定状态的元素。例如，单选框组和复选框组里包含的那些未被选中的元素，或者进度百分比未知的进度条。

例如：

input[type="radio"]:indeterminate + label {
  color: red;
}

如果组中还没有任何一个元素被选，。这会给这个组的标签添加一个颜色为红色的样式。

在 Codepen 上试试

:valid 和 :invalid

浏览器支持

它选择那些根据有效性语义或值的有效或无效的元素。如果没有定义值的有效性规则，则这个元素既不满足:valid也不满足:invalid。

例如：对于一个输入类型为email的元素：

input:invalid {
  color: red;
}
input:valid {
  color: green;
}

这会根据元素里面输入的电子邮件是否有效为依据去为元素的文本设置不同颜色。

在 Codepen 上试试

:in-range 和 :out-of-range

浏览器支持

这些选择器只适用于那些具有范围限制的元素，例如，定义了最大最小值的元素。如果没有定义，则都不匹配。

例如：一个设置了最小只为 1 最大值为 5 的输入框。

input:out-of-range {
  color: red;
}

input:in-range {
  color: green;
}

这会给依据输入的值设置不同的颜色样式。

在 Codepen 上试试

在某些情况下，某些选择器会具有与:valid和:invalid相同的效果。

:required和:optional

浏览器支持:required

浏览器支持:optional

这些选择器分别适用于在提交表单的之前必填的和选填的表单元素。那些非表单元素不会被匹配。

例如：

input:optional {
  color: gray;
}
input:required {
  color: red;
}

这会给那些必填的元素添加设置红色的样式，给非必填的元素添加灰色的样式。

在 Codepen 上试试

树结构伪类

这类选择器包括那些允许基于文档树中的信息进行选择，但是不能由其它选择器表示的选择器，例如元素相对于其父元素的位置。

:nth-child(n [of selector]?) 和 :nth-last-child(n [of selector]?)

浏览器支持（在我写这篇文章的时候，还没有任何一个浏览器支持这个第四级选择器。）

:nth-child选择器匹配作为其父级的第 n 个子元素。:nth-last-child也一样的，只不过它是从最后一个元素开始计数的。你可以使用:nth测试来了解它们之间的区别，并进一步了解 An+B 表示法。

在这篇文章的开头，我举了一个:nth.last-child的例子，我说这个第三级的选择器。然而，对于第四级选择器，这个选择器接收一个可选的of选择器用来筛选仅与该选择器匹配的子元素。

除了功能更加强大之外，它的声明方式也可以不同。例如：

li.item:nth-child(-n+2)

选择前面两个具有item类的<li>元素。

它和以下的不同：

:nth-child(-n+2 of li.item)

这会选择前面两个带有item类的<li>元素即使它们并不是列表的前两个元素。

尝试一下（在支持该选择器的浏览器中，例如 Safari）：

例一

例二

网格结构伪类

这类选择器包括使用表格的列的选择器。

F || E

在我写这篇文章的时候，还没有任何一个浏览器支持这个选择器。

列组合器选择器（||）选择类型 E 的元素，该元素表示表中的单元格并属于由类型 F 的元素表示的列。

例如，有如下表：

对于以下样式

col.selected || td {
  background-color: lightyellow;
}

这会给所选列（价格）的单元格（<td>元素）设置浅黄色的背景色。

在 Codepen 上试试

:nth-col(An+B)和:nth-last-col(An+B)

在我写这篇文章的时候，这个选择器还没有被任何一个浏览器支持。

你可以把这些选择器看作是:nth-child和:nth-last-child的列版本。

:nth-col(An+B)选择网格或表格中的一个在该元素之间还有 An+B-1 个元素的元素（n 为 0 或任意一个整数）。

例如：

col.nth-col(1) {
  background-color: lightyellow;
}
col.nth-last-col(1) {
  background-color: lightgreen;
}

这会给表格的第一列元素添加一个浅黄色背景色，。被最后一列元素添加一个浅绿色背景色。

在 Codepen 上试试

结论

第四级选择器使您可以轻松声明复杂的选择规则。

我们涵盖了2019年1月《编辑器草案》规范中定义的大多数选择器，但是，我遗漏了一些可能会很快消失或很快改变的选择器，或者关于它们的信息不多（除了不受支持） 任何浏览器）：

• :target-within
• :scope（不要将它和作用域样式混淆）
• 时间伪类（你可以在这里了解更多信息）
• :blank
• :user-invalid

但绝对要注意这些以及第4级选择器的其余部分。

原文链接：https://medium.freecodecamp.org/es5-to-esnext-heres-every-feature-added-to-javascript-since-2015-d0c255e13c6e

原文地址: https://davidwalsh.name/javascript-tricks

原文作者: David Walsh

就像其他编程语言一样，JavaScript也有许多技巧可以完成简单或困难的任务。一些技巧广为人知，而一些技巧则足以让你大吃一惊，今天让我们来看看你可以开始使用的七个JavaScript技巧吧。

Get Unique Values of an Array

获取一系列唯一的值可能比你想象中的要简单：

var j = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]

Array and Boolean

是否需要从数组中过滤一些值，比如 false，null等，也许你可能不知道这个技巧：

f.filter(Boolean)

Create Empty Objects

当你可以使用 {} 创建一个看起来是空的空对象，但是它仍然具备 __proto__ 以及一些其他方法，但是有一种方法可以创建一个纯粹的空对象：

let dict = Object.create(null);

// dict.__proto__ === "undefined"
// No object properties exist until you add them

Merge Objects

在 JavaScript 中合并多个对象的需求一直存在，但你不知道一个很好用的技巧：

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes};

Require Function Parameters

能够为函数参数设置默认值是JavaScript的一个很棒的补充，但是请查看这个技巧，要求为给定的参数传递值：

const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// This will throw an error because no name is provided
hello();

// This will also throw an error
hello(undefined);

// These are good!
hello(null);
hello('David');

Destructuring Aliases

解构是JavaScript的一个非常受欢迎的补充，但有时我们更喜欢用其他名称来引用这些属性，所以我们可以利用别名：

const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as { otherName }
const { x: otherName } = obj;

Get Query String Parameters

多年来，我们编写了大量的正则表达式来获取查询字符串值，但那些日子已经过去了，让我们来看看 URLSearchParams API

var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

多年来JavaScript已经发生了很大的变化，但是我最喜欢的JavaScript部分是我们所看到的语言改进的速度。

尽管JavaScript的动态不断变化，我们仍然需要采用一些不错的技巧;将这些技巧保存在工具箱中，以便在需要时使用，那么你最喜欢的JavaScript技巧是什么？

头部引用

> 原文地址: https://v8.dev/blog/v8-release-75
>
> 原文作者: Dan Elphick
>
> 翻译作者: icepy

创建 issues 标题

请使用原文标题（英文），内容部分使用中文翻译，例如：

原文地址: https://areknawo.com/getting-creative-with-the-console-api/

原文作者: https://areknawo.com/author/areknawo/

创造性的使用 Console API！

Javascript 中进行调试总是与 Console API 有密不可分的关系。但是往往我们只用过 console.log()。那么，你知道我们还可以用其他用法吗？使用console.log()的时候，它的大段式输出是否曾困扰过你？你想让你的调试信息更美观吗？💅如果有这个想法的话，接着往下看，我们将发现 Console API 会有多美观和有趣！

Console.log()

别不信，console.log() 自身就已经有了一些你不知道的附加功能。当然，它基础的功能 - 打印日志 - 不会受到影响。我们唯一能做的事情就是将它输出的日志变漂亮。让我们尝试一下，好吗？😁

字符串替换

唯一一件和 console.log() 方法密不可分的事情是你可以使用一个被称为 字符串替换 的方式来使用它。使用这种方式，你可以先在字符串中使用一个特殊的表达式，随后使用自定义的参数替换它。它看起来就像下面这样：

console.log("Object value: %o with string substitution",
    {string: "str", number: 10});

12

是不是很棒？问题是这种字符串的替换方式有多种：

• %o / %O - 使用对象来替换;
• %d / %i - 使用整数来替换;
• %s - 使用字符串来替换;
• %f - 使用浮点数来替换;

但是，即便这样，你可能还是会问，到底啥时候需要用到这个特性呢？特别是就像下面这样，你可以简单的传递多个参数给 log 函数：

console.log("Object value: ",
    {string: "str", number: 10},
    " with string substitution");

123

同时，对于字符串和数字来说，你可以就使用 模版字符串!那么，到底啥时候可以用到这个特性呢？首先，我想说的是，当我们想打印一些漂亮的日志的时候，可能仅仅需要一些漂亮的字符串，字符串替换可以让你简单的实现这一需求。作为替代方案的上面的例子中，你必须认识到，你需要时刻小心翼翼的处理那些空格。但使用字符串替换的话，就方便多了。

As for string literals tho, they haven't been around as long as these subs (surprise! 🤯) and... they don't provide the same, nice formatting for objects. But yeah, as long as you're working with numbers and strings only, you may prefer a different approach.

CSS

还有一种我们之前没有学过的类似于字符串替换的命令。这个命令是 %c，它允许你为打印的消息加上样式。让我们来看一下如何使用：

console.log("Example %cCSS-styled%c %clog!",
    "color: red; font-family: monoscope;",
    "", "color: green; font-size: large; font-weight: bold");

123

以上的例子被广泛的使用。如你所见，紧跟在指令后的所有东西都被加上了样式。跳出上一个样式的方式是使用另一个指令，就像我们在这里用的一样。如果你想使用普通的、没有样式的日志格式，你需要传递一个空的字符串。还有一点显而易见的是，传递给指令的参数总是按照顺序一条一条的生效的。

分组 & 追踪

我们仅仅只是开始，上面已经介绍了使用带样式的日志。哇，Console API 还有哪些秘密呢？

分组

使用太多的日志可能不是非常好，这有可能导致不易读的和无意义的日志。有结构总是好的。你可以使用console.group()对他们进行合并。使用这个方法，你可以在控制台中创造一些深层次的、可折叠的结构 ---- 分组。这个方式不仅可以将日志隐藏，也可以将日志进行有组织的划分。还有一个console.groupCollapsed()方法，在你需要将分组进行默认折叠的时候可以使用它。当然，分组是可以嵌套的。

You can also make your group have what-seems-like header-log, by passing a list of arguments to it (just like with console.log()). Every console call done after invoking the group method, will find its place inside created group. To exit it, you have to use a special console.groupEnd() method. Simple, right? 😁

console.group();
console.log("Inside 1st group");
console.group();
console.log("Inside 2nd group");
console.groupEnd();
console.groupEnd();
console.log("Outer scope");

1234567

我想你已经发现了，你可以复制粘贴上面的代码片段到你的控制台中以你想要的方式进行测试。

追踪

另一个有用的信息是，你可以通过 Console API 得到当前调用的过程（执行过程/堆栈记录）。正如你所知道的，就是一个代码执行（例如：函数执行链）到当前console.trace()调用的列表，这就是我们所介绍的函数。这个信息在我们监测副作用或者检查代码的工作流程的时候会很有用。把下面的代码片段放到你的代码中，你就知道我所讲的东西了。

console.trace("Logging the way down here!");

1

Console.XXX

你可能早已知道一些 Console API 的其他用法。我所讲的是这些可以往日志上添加一些附加信息的方法。在这之前，让我们先简单过一下它们的用法，好吗？

Warning

console.warn() 方法的行为和 console.log（就像大多数打日志的方法那样） 很像，但是，需要多说一句，它有自己的样式。 ⚠ 在大多数浏览器中，会是黄色同时会有一个警告标记。这个方法执行时的所有调用过程也会被默认返回，因此你可以快速定位出现警告（也可能是bug）的地方。

console.warn("This is a warning!");

1

Error

console.error()方法，和console.warn()有着类似的调用堆栈的输出，也有着特殊的样式。它通常是红色配合一个表示错误的图标。❌ 它清楚地通知了用户有一些东西可能不那么正常。还有一个重要的事情，.error() 方法仅仅只是一个控制台输出，而没有任何附加的功能，比如说停止代码的执行（要想停止代码的执行，你需要抛出一个错误）。温馨提示，对于许多初学者而言，对于这一行为可能会有一些不确定。

console.error("This is an error!");

1

Info & debug

还有两个方法可用来增加日志的规范性。这两个方法是console.info()和console.debug()。🐞 这两个方法的输出不总是会有特殊的样式 -- 在某些浏览器中可能仅仅只是一个表示信息的图标。不管是这两个方法还是前面说到的方法，都可以让你更加明确的对日志信息进行分类。在不同的浏览器中（例如：我目前使用的基于 Chromiun 内核的这个），调试用的 GUI 工具可以让你选择特定的日志类型进行显示，例如错误、调试或者是消息信息。对于我们来说，多了一种组织信息输出的功能。

console.info("This is very informative!");
console.debug("Debugging a bug!");

12

Assert

还有一种特殊的 Console API ，它给你提供了一个打印有条件的日志的捷径。这个方法就是console.assert()。和标准的console.log()方法一样，可以接收无限数量的参数，不同的是，第一个参数必须是布尔值。如果它求值得到true,将不会输出信息，否则将会得到一个错误的日志（就像 .error() 方法一样），日志的内容就是所有余下的参数。

console.assert(true, "This won't be logged!");
console.assert(false, "This will be logged!");

12

了解所有上面那些内容之后，你可能有了想把你的控制台信息展示得更简洁一点的欲望。没毛病！只需要使用console.clear()方法就行，随后所有旧的调试信息就都没了。这是个很好的特性，甚至于很多浏览器的调试工具中都内置了这个功能的触发按钮。👍

Timing

Console API 甚至提供了一些和耗时相关的方法。⌚ 有了它们的帮助，你可以快速地对部分代码进行性能测试。正如我前面所说的，这个 API 很简单。先使用console.time()方法，可以为这个方法传递一个可选的参数作为此次计时器的标签。随后计时器会在这个方法被调用的时候同时启动。然后你可以使用console.timeLog()和console.timeEnd()方法（也可以传递一个可选参数作为标签）去打印时间（毫秒为单位）或者结束计时器。

console.time();
// code snippet 1
console.timeLog(); // default: [time] ms
// code snippet 2
console.timeEnd(); // default: [time] ms
1234

当然，如果你正在做真正的性能测试，我建议你使用Performance API，这是专门为了性能测试而设计的

Counting

在你有很多日志输出以至于你不知道给定的代码被执行了多少次的时候 -- 你可能已经猜到了！也有一个 API 来做这个事情！console.count()方法做了能做的最基础的事情 -- 它会计算它被调用的次数。你可以，理所当然的，传递一个可选的参数为给定的计数器提供一个标签（默认是 default）。你可以随后使用console.countReset()方法重置一个选中的计数器。

console.count(); // default: 1
console.count(); // default: 2
console.count(); // default: 3
console.countReset();
console.count(); // default: 1
1234

从我个人的角度来看，我觉得这个特性没有太大用途，但是有这个方法听起来也挺不错的。可能仅仅只有我这么认为吧...

Tables

我认为这是最被低估的 Console API 的特性之一（甚至超过了之前提到的CSS 样式）。👏当你在调试和检查各种类型的对象的时候，输出真实的、有顺序的表格到控制台是一件非常非常有用的事情。没错，你真的能够在控制台中展示一个表格。所有你需要做的事情仅仅是通过调用console.table()同时传递一个参数-比如说对象或者数组（基础数据类型还是以普通的方式进行输出，对象和数组则会以更小的结构打印出来）。试下下面的代码片段你就知道我在说啥了。

console.table([[0,1,2,3,4], [5,6,7,8,9]]);

1

Console ASCII art

说到控制台的艺术，不得不提ASCII！在image-to-ascii模块（在NPM中你可以找到它）的帮助下，你可以非常简单地将一个普通的图片转换成对应的 ASCII 码。🖼另外，这个模块还提供了非常多的自定义设置和选项来以你想要的方式生成输出。这里有一个简单的示例：

import imageToAscii from "image-to-ascii";

imageToAscii(
"https://d2vqpl3tx84ay5.cloudfront.net/500x/tumblr_lsus01g1ik1qies3uo1_400.png",
{
    colored: false,
}, (err, converted) => {
    console.log(err || converted);
});

123456789

使用上面的代码，你可以生成令人惊叹的 JS 日志，就像现在出现在你控制台中的这样。

在 CSS 样式的帮助下，就像内间距、背景等等，你也可以输出一个非常完美的图片到你的控制台！比如说，你可以看一下 console.image模块，这个模块也可以在NPM中找到，使用这个模块也能做到这个效果。但是，我觉得 ASCII 会更时尚一点。

Modern logs

正如你说见，你的日志和调试过程可以不用这么单调！有很多比console.log()好得多的方式。使用在这篇文章中学到的知识，剩下的选择就出自你自己了！你可以保持传统的console.log()和浏览器自带的格式化效果，也可以通过上文介绍的内容在你的控制台中增添一些新鲜的东西。总之，怎么开心怎么来吧，即便你正在解决一个难缠的bug!🐞

我希望你喜欢这篇文章，同时也希望能给你带来一些新的知识。请一定要将这篇文章分享给那些想把他们的控制台变得丰富多彩的人，也欢迎在文末留下你的意见和评论！最后，希望大家关注我的推特、Facebook，不妨在newsletter注册一个账号！再次，感谢阅读，希望下篇文章还能看到你！

原文地址: https://medium.freecodecamp.org/es5-to-esnext-heres-every-feature-added-to-javascript-since-2015-d0c255e13c6e

原文作者: Flavio Copes

ES5 to ESNext —  自 2015 以来 JavaScript 新增的所有新特性

这篇文章的出发点是为了帮助前端开发者串联 ES6前后的 JavaScript 知识，并且可以快速了解 JavaScript 语言的最新进展。

JavaScript 在当下处于特权地位，因为它是唯一可以在浏览器中运行的语言，并且是被高度集成和优化过的。

JavaScript 在未来有着极好的发展空间，跟上它的变化不会比现在更加的困难。我的目标是让你能够快速且全面的了解这门语言可以使用的新内容。

点击这里获取 PDF/ePub/Mobi 版本

目录

ECMAScript 简介

ES2015

• let 和 const
• 箭头函数
• 类
• 默认参数
• 模板字符串
• 解构赋值
• 增强的对象字面量
• For-of 循环
• Promises
• 模块
• String 新方法
• Object 新方法
• 展开运算符
• Set
• Map
• Generators

ES2016

• Array.prototype.includes()
• 求幂运算符

ES2017

• 字符串填充
• Object.values()
• Object.entries()
• Object.getOwnPropertyDescriptors()
• 尾逗号
• 共享内存 and 原子操作

ES2018

• Rest/Spread Properties
• Asynchronous iteration
• Promise.prototype.finally()
• 正则表达式改进

ESNext

• Array.prototype.{flat,flatMap}
• try/catch 可选的参数绑定
• Object.fromEntries()
• String.prototype.{trimStart,trimEnd}
• Symbol.prototype.description
• JSON improvements
• Well-formed JSON.stringify()
• Function.prototype.toString()

ECMAScript 简介

每当阅读 JavaScript 相关的文章时，我都会经常遇到如下术语： ES3, ES5, ES6, ES7, ES8, ES2015, ES2016, ES2017, ECMAScript 2017, ECMAScript 2016, ECMAScript 2015 等等，那么它们是指代的是什么？

它们都是指代一个名为 ECMAScript 的标准。

JavaScript 就是基于这个标准实现的，ECMAScript 经常缩写为 ES。

除了 JavaScript 以外，其它基于 ECMAScript 实现语言包括：

• ActionScript ( Flash 脚本语言)，由于 Adobe 将于 2020 年末停止对 Flash 的支持而逐渐失去热度。
• JScript (微软开发的脚本语言),在第一次浏览器大战最激烈的时期，JavaScript 只被Netscape所支持，微软必须为 Internet Explorer 构建自己的脚本语言。

但是现在流传最广、影响最大的基于 ES 标准的语言实现无疑就是 JavaScript了

为啥要用这个奇怪的名字呢？Ecma International 是瑞士标准协会，负责制定国际标准。

JavaScript 被创建以后，经由 Netscape 和 Sun Microsystems 公司提交给欧洲计算机制造商协会进行标准化，被采纳的 ECMA-262 别名叫 ECMAScript。

This press release by Netscape and Sun Microsystems (the maker of Java) might help figure out the name choice, which might include legal and branding issues by Microsoft which was in the committee, according to Wikipedia.

IE9 之后微软的浏览器中就看不到对 JScript 这个命名的引用了，取而代之都统称为 JavaScript。

因此，截至201x，JavaScript 成为最流行的基于 ECMAScript 规范实现的语言。

ECMAScript 当前的版本。

目前的最新的 ECMAScript 版本是 ES2018。

于 2018 年 6 月发布。

TC39 是什么？

TC39（Technical Committee 39）是一个推动 JavaScript 发展的委员会。

TC39的成员包括各个主流浏览器厂商以及业务与浏览器紧密相连的公司，其中包括 Mozilla，Google ，Facebook，Apple，Microsoft，Intel，PayPal，SalesForce等。

每个标准版本提案都必须经过四个不同的阶段，这里有详细的解释。

ES Versions

令我费解的是 ES 版本的命名依据有时根据迭代的版本号，有时却根据年份来进行命名。而这个命名的不确定性又使得人们更加容易混淆 JS/ES 这个两个概念😄。

在 ES2015 之前，ECMAScript 各个版本的命名规范通常与跟着标准的版本更新保持一致。因此，2009年 ECMAScript 规范更新以后的的正式版本是 ES5。

Why does this happen? During the process that led to ES2015, the name was changed from ES6 to ES2015, but since this was done late, people still referenced it as ES6, and the community has not left the edition naming behind — the world is still calling ES releases by edition number.
为什么会发生这一切？在ES2015诞生的过程中，名称由ES6更改为ES2015，但由于最终完成太晚，人们仍然称其为ES6，社区也没有将版本号完全抛之于后 — 世界仍然使用 ES 来定义版本号。

下图比较清晰的展示了版本号与年份的关联:

接下来，我们来深入了解 JavaScript 自 ES5 以来增加的特性。

let和const

ES2015 之前, var 是唯一可以用来声明变量的语句。

var a = 0

上面语句如果你遗漏了 var，那么你会把这个值（0）赋给一个未声明的变量，其中声明和未声明变量之间存在一些差异。

在现代浏览器开启严格模式时，给未声明的变量赋值会抛出 ReferenceError 异常，在较老的浏览器（或者禁用严格模式）的情况下，未声明的变量在执行赋值操作时会隐式的变为全局对象的属性。

当你声明一个变量却没有进行初始化，那么它的值直到你对它进行赋值操作之前都是 undefined 。

var a //typeof a === 'undefined'

你可以对一个变量进行多次重新声明，并覆盖它：

var a = 1
var a = 2

你也可以在一条声明语句中一次声明多个变量：

var a = 1, b = 2

作用域是变量可访问的代码部分。

在函数之外用 var 声明的会分配给全局对象，这种变量可以在全局作用域中被访问到。而在函数内部声明的变量只能在函数局部作用域被访问到，这类似于函数参数。

在函数中定义的局部变量名如何跟全局变量重名，那么局部变量的优先级更高，在函数内无法访问到同名的全局变量。

需要注意的是，var 是没有块级作用域（标识符是一对花括号）的，但是 var 是有函数作用域的，所以在新创建的块级作用域或者是函数作用域里面声明变量会覆盖全局同名变量，因为 var 在这两种情况下没有创建新的作用域。

在函数内部，其中定义的任何变量在所有函数代码中都是可见的，因为JavaScript在执行代码之前实际上将所有变量都移到了顶层（被称为悬挂的东西）。
在函数的内部定义的变量在整个函数作用域中都是可见（可访问），即使变量是在函数体末尾被声明，但是仍然可以再函数体开头部分被引用，因为 JavaScript存在变量提升机制。为避免混淆，请在函数开头声明变量，养成良好的编码规范。

Using let

let 是ES2015中引入的新功能，它本质上是具有块级作用域的 var 。它可以被当前作用域（函数以及块级作用域）以及子级作用域访问到。

现代 JavaScript 开发者在 let 和 var 的选择中可能会更倾向于前者。

如果 let 看起来是一个很抽象的术语，当你阅读到 let color = 'red' 这一段，因为使用 let 定义了color 为红色，那么这一切就变的有意义了。

在任何函数之外用 let 声明变量，和 var相反的是 它并不会创建全局变量。

Using const

使用变量 var 或 let 声明的变量可以被重新赋值。 使用 const 声明的变量一经初始化，它的值就永远不能再改变，即不可重新被赋值。

const a = 'test'

我们不能再为 a 进行赋值操作。然而，a 如果它是一个具有属性或者方法的对象，那么我们可以改变它的属性或者方法。

const 并不意味着具有不可变性，只是保证用 const 声明的变量的引用地址不被变更。

类似于 let，const 也具有块级作用域。

现代 JavaScript 开发者在遇到不会进行二次赋值的变量声明时，应该尽量使用 const。

箭头函数

箭头函数的引入极大的改变了代码的书写风格和一些工作机制。

在我看来，箭头函数很受开发者欢迎，现在很少在比较新的代码库中看到 function 关键字了，虽然它并未被废弃。

箭头函数看起来会更加的简洁，因为它允许你使用更短的语法来书写函数：

const myFunction = function() {
  //...
}

到

const myFunction = () => {
  //...
}

如果函数体中只包含一条语句，你甚至可以省略大括号并直接书写这条语句：

const myFunction = () => doSomething()

参数在括号中传递：

const myFunction = (param1, param2) => doSomething(param1, param2)

如果该函数只有一个参数，那么可以省略掉括号：

const myFunction = param => doSomething(param)

由于这种简短的语法，使得我们可以更便捷的使用比较简短的函数

隐式返回

箭头函数支持隐式返回：可以正常的 return 一个返回值但是可以不使用 return 关键字。

隐式返回只在函数体内只包含一条语句的情况下生效：

const myFunction = () => 'test'
myFunction() //'test'

需要注意的一种情况，当返回一个对象时，记得将大括号括在括号中以避免产生歧义，误将其（大括号）解析为函数体的大括号。

const myFunction = () => ({ value: 'test' })
myFunction() //{value: 'test'}

箭头函数中的 this

this 可能是一个很难掌握的概念，因为它会根据上下文而进行变化，并且会在不同的 JavaScript的模式（是否为严格模式）下表现出差异。

理解 this 这个概念对于箭头函数的使用很重要，因为与常规函数相比，箭头函数的表现非常不同。

对象的方法为常规函数时，方法中的this指向这个对象，因此可以这样做：

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: function() {
    return `${this.manufacturer} ${this.model}`
  }
}

执行 car.fullName() 会返回 "Ford Fiesta"。

如果上述方法使用是是箭头函数，由于箭头中的 this 的作用域继承自执行上下文，箭头函数自身不绑定 this，因此 this 的值将在调用堆栈中查找，因此在此代码 car.fullName() 中不会返回常规函数那样的结果，实际会返回字符串 "undefined undefined"：

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: () => {
    return `${this.manufacturer} ${this.model}`
  }
}

因此，箭头函数不适合作为对象方法。

同样，箭头函数也不适合使用在作为创建构造函数，因为在实例化对象时会抛出 TypeError。

所以在不需要动态上下文时请使用常规函数。

当然，在事件监听器上使用箭头函数也会存在问题。因为 DOM 事件侦听器会自动将 this 与目标元素绑定，如果该事件处理程序的逻辑依赖 this，那么需要常规函数：

const link = document.querySelector('#link')
link.addEventListener('click', () => {
  // this === window
})
const link = document.querySelector('#link')
link.addEventListener('click', function() {
  // this === link
})

Classes类

JavaScript 实现继承的方式比较罕见：原型继承。原型继承虽然在我看来很棒，但与其它大多数流行的编程语言的继承实现机制不同，后者是基于类的。

因此 Java、Python 或其它语言的开发者很难理解原型继承的方式，因此 ECMAScript 委员会决定在原型继承之上实现 class 的语法糖，这样便于让其它基于类实现继承的语言的开发者更好的理解 JavaScript 代码。

注意：class 并没有对 JavaScript 底层做修改，你仍然可以直接访问对象原型。

class 定义

如下是一个 class 的例子：

class Person {
  constructor(name) {
    this.name = name
  }
  hello() {
    return 'Hello, I am ' + this.name + '.'
  }
}

class 具有一个标识符，我们可以使用 new ClassIdentifier() 来创建一个对象实例。

初始化对象时，调用 constructor方法，并将参数传递给此方法。

类声明语句中也可以增加类需要的一些原型方法。在这种情况下 hello 是 Person 类的一个原型方法，可以在这个类的对象实例上调用：

const flavio = new Person('Flavio')
flavio.hello()

Class 继承

一个子类可以 extend 另一个类，通过子类实例化出来的对象可以继承这两个类的所有方法。

如果子类中的方法与父类中的方法名重复，那么子类中的同名方法优先级更高：

class Programmer extends Person {
  hello() {
    return super.hello() + ' I am a programmer.'
  }
}
const flavio = new Programmer('Flavio')
flavio.hello()

(上述代码会打印出：“Hello, I am Flavio. I am a programmer.”)

类没有显示的类变量声明，但你必须在初始化构造函数 constructor 中去初始化类成员变量。

在子类中，你可以通过调用super()引用父类。

静态方法

在类中，通常会把方法直接挂载到实例对象上，直接在实例对象上调用。

而静态方法则是直接使用类名来调用，而不是通过对象实例调用：

class Person {
  static genericHello() {
    return 'Hello'
  }
}
Person.genericHello() //Hello

私有方法

JavaScript 没有内置真正意义上的受保护的私有方法。

社区有解决方法，但我不会在这里做讲解。

Getters 和 setters

你可以通过增加方法 前缀 get 或者 set 创建一个 getter 和 setter，getter 和 setter会在你去获取特定值或者修改特定值的时候执行 get 或者 set内的相关方法。

class Person {
  constructor(name) {
    this._name = name
  }
  set name(value) {
    this._name = value
  }
  get name() {
    return this._name
  }
}

如果你只有 getter，该属性无法被设置，并且设置此属性的操作都会被忽略：

class Person {
  constructor(name) {
    this._name = name
  }
  get name() {
    return this._name
  }
}

如果你只有一个 setter，则可以更改该值，但不能从外部访问它：

class Person {
  constructor(name) {
    this._name = name
  }
  set name(value) {
    this._name = value
  }
}

默认参数

函数 doSomething 接收一个 param1 参数。

const doSomething = (param1) => {
}

我们可以给 param1 设定默认值，如果在调用函数时未传入参数，那么该参数自动设定未默认值。

const doSomething = (param1 = 'test') => {
}

当然，这种机制同样适用于多个参数：

const doSomething = (param1 = 'test', param2 = 'test2') => {
}

假如你的函数是一个具有特定属性的对象该怎么处理？

曾几何时，如果我们必须要取一个对象的特定属性值，为了做兼容处理（对象格式不正确），你必须在函数中添加一些代码：

const colorize = (options) => {
  if (!options) {
    options = {}
  }
  const color = ('color' in options) ? options.color : 'yellow'
  ...
}

通过解构，你可以给特定属性提供默认值，如此可以大大简化代码：

const colorize = ({ color = 'yellow' }) => {
  ...
}

如果在调用 colorize 函数时没有传递任何对象，我们同样可以得到一个默认对象作为参数以供使用：

const spin = ({ color = 'yellow' } = {}) => {
  ...
}

模板字符串

模板字符串不同于 ES5 以前的版本，你可以用新颖的方式使用字符串。

这个语法看起来非常简便，只需要使用一个反引号替换掉单引号或双引号：

const a_string = `something`

这个用法是独一无二的，因为它提供了许多普通字符串所没有的功能，如下：

• 它为定义多行字符串提供了一个很好的语法
• 它提供了一种在字符串中插入变量和表达式的简单方法
• 它允许您创建带有模板标签的DSL (DSL意味着领域特定语言，例如：就如同在 React 中使用 styled-components 定义你组件的 CSS 一样)

下面让我们深入每个功能的细节。

多行字符串

在 ES6 标准之前，创建跨越两行的字符串只能在一行的结尾使用 '' 字符：

const string =
  'first part \
second part'

这样使得你创建的字符串虽然跨越了两汉，但是渲染时仍然表现成一行：

first part second part

需要渲染为多行的话，需要在一行结尾添加 '\n'，比如这样：

const string =
  'first line\n \
second line'

或者

const string = 'first line\n' + 'second line'

模板字符串使得定义多行字符串变得更加简便。

一个模板字符串由一个反引号开始，你只需要按下回车键来创建新的一行，不需要插入特殊符号，最终的渲染效果如下所示：

const string = `Hey
this
string
is awesome!`

需要特别留意空格在这里是有特殊意义的，如果这样做的话：

const string = `First
                Second`

那么它会创建出像下面的字符串：

First
                Second

有一个简单的方法可以修复这个问题，只需要将第一行置为空，然后添加了右边的翻译好后调用一个 trim() 方法，就可以消除第一个字符前的所有空格：

const string = `
First
Second`.trim()

插值

模板字符串提供了插入变量和表达式的便捷方法

你只需要使用 ${...} 语法

const var = 'test'
const string = `something ${var}` //something test

在 ${} 里面你可以加入任何东西，甚至是表达式：

const string = `something ${1 + 2 + 3}`
const string2 = `something ${foo() ? 'x' : 'y'}`

Template tags

标记模板可能是一个听起来不太有用的功能，但它实际上被许多流行的库使用，如 Styled Components 、Apollo 、GraphQL客户端/服务器库，因此了解它的工作原理至关重要。

在 Styled Components 模板标签中用于定义CSS字符串

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

在 Apollo 中，模板标签用于定义 GraphQL 查询模式：

const query = gql`
  query {
    ...
  }
`

上面两个例子中的styled.button和gql模板标签其实都是函数:

function gql(literals, ...expressions) {}

这个函数返回一个字符串，可以是任意类型的计算结果。

字面量(literals)是一个包含了表达式插值的模板字面量的序列。
表达式(expressions)包含了所有的插值。

举个例子：

const string = `something ${1 + 2 + 3}`

这个例子里面的字面量是由2个部分组成的序列。第1部分就是something，也就是第一个插值位置(${})之前的字符串，第2部分就是一个空字符串，从第1个插值结束的位置直到字符串的结束。

这个例子里面的表达式就是只包含1个部分的序列，也就是6。

举一个更复杂的例子：

const string = `something
another ${'x'}
new line ${1 + 2 + 3}
test`

这个例子里面的字面量的序列里面，第1个部分是：

;`something
another `

第2部分是：

;`
new line `

第3部分是：

;`
test`

这个例子里面的表达式包含了2个部分：x和6。

拿到了这些值的函数就可以对其做任意处理，这就是这个特性的威力所在。

比如最简单的处理就是字符串插值，把字面量和表达式拼接起来：

const interpolated = interpolate`I paid ${10}€`

插值的过程就是：

function interpolate(literals, ...expressions) {
  let string = ``
  for (const [i, val] of expressions) {
    string += literals[i] + val
  }
  string += literals[literals.length - 1]
  return string
}

解构赋值

给定一个object，你可以抽取其中的一些值并且赋值给命名的变量：

const person = {
  firstName: 'Tom',
  lastName: 'Cruise',
  actor: true,
  age: 54, //made up
}
const {firstName: name, age} = person

name和age就包含了对应的值。

这个语法同样可以用到数组当中：

const a = [1,2,3,4,5]
const [first, second] = a

下面这个语句创建了3个新的变量，分别取的是数组a的第0、1、4下标对应的值：

const [first, second, , , fifth] = a

更强大的对象字面量

ES2015赋予了对象字面量更大的威力。

简化了包含变量的语法

原来的写法：

const something = 'y'
const x = {
  something: something
}

新的写法：

const something = 'y'
const x = {
  something
}

原型

原型可以这样指定：

const anObject = { y: 'y' }
const x = {
  __proto__: anObject
}

super()

const anObject = { y: 'y', test: () => 'zoo' }
const x = {
  __proto__: anObject,
  test() {
    return super.test() + 'x'
  }
}
x.test() //zoox

动态属性

const x = {
  ['a' + '_' + 'b']: 'z'
}
x.a_b //z

For-of循环

2009年的ES5引入了forEach()循环，虽然很好用，但是它跟for循环不一样，没法break。

ES2015引入了**for-of** 循环，就是在forEach的基础上加上了break的功能：

//iterate over the value
for (const v of ['a', 'b', 'c']) {
  console.log(v);
}
//get the index as well, using `entries()`
for (const [i, v] of ['a', 'b', 'c'].entries()) {
  console.log(index) //index
  console.log(value) //value
}

留意一下const的使用。这个循环在每次迭代中都会创建一个新的作用域，所以我们可以使用const来代替let。

它跟for...in的区别在于：

• for...of 遍历属性值
• for...in 遍历属性名

Promises

promise的一般定义： 它是一个代理，通过它可以最终得到一个值.

Promise是处理异步代码的一种方式，可以少写很多回调。

异步函数是建立在promise API上面的，所以理解Promise是一个基本的要求。

promise的原理简述

一个promise被调用的时候，首先它是处于pending状态。在promise处理的过程中，调用的函数（caller）可以继续执行，直到promise给出反馈。

此时，调用的函数等待的promise结果要么是resolved状态，要么是rejected状态。但是由于JavaScript是异步的，所以promise处理的过程中，函数会继续执行。

为什么JS API使用promises?

除了你的代码和第三方库的代码之外，promise在用在现代的Web API中，比如：

• 电池API
• Fetch API
• Service Workers

在现代的JavaScript中，不使用promise是不太可能的，所以我们来深入研究下promise吧。

创建一个promise

Promise API暴露了一个Promise构造函数，可以通过new Promise()来初始化：

let done = true
const isItDoneYet = new Promise((resolve, reject) => {
  if (done) {
    const workDone = 'Here is the thing I built'
    resolve(workDone)
  } else {
    const why = 'Still working on something else'
    reject(why)
  }
})

promise会检查done这个全局变量，如果为true，就返回一个resolved promise，否则就返回一个rejected promise。

通过resolve和reject，我们可以得到一个返回值，返回值可以是字符串也可以是对象。

使用一个promise

上面讲了怎么创建一个promise，下面就讲怎么使用（consume）这个promise。

const isItDoneYet = new Promise()
//...
const checkIfItsDone = () => {
  isItDoneYet
    .then(ok => {
      console.log(ok)
    })
    .catch(err => {
      console.error(err)
    })
}

运行checkIfItsDone()方法时，会执行isItDoneYet()这个promise，并且等待它resolve的时候使用then回调，如果有错误，就用catch回调来处理。

链式promise

一个promise可以返回另一个promise，从而创建promise链条（chain）。

一个很好的例子就是Fetch API，它是基于XMLHttpRequest API的一个上层API，我们可以用它来获取资源，并且在获取到资源的时候链式执行一系列promise。

Fetch API是一个基于promise的机制，调用fetch()相当于使用new Promise()来声明我们自己的promise。

链式promise的例子

const status = response => {
  if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
  }
  return Promise.reject(new Error(response.statusText))
}
const json = response => response.json()
fetch('/todos.json')
  .then(status)
  .then(json)
  .then(data => {
    console.log('Request succeeded with JSON response', data)
  })
  .catch(error => {
    console.log('Request failed', error)
  })

在这个例子当中，我们调用fetch()，从根目录的todos.json文件中获取一系列的TODO项目，并且创建一个链式promise。

运行fetch()方法会返回一个response，它包含很多属性，我们从中引用如下属性：

• status, 一个数值，表示HTTP状态码
• statusText, 一个状态消息，当请求成功的时候返回OK

response还有一个json()方法，它返回一个promise，返回内容转换成JSON后的结果。

所以这些promise的调用过程就是：第一个promise执行一个我们定义的status()方法，检查response status，判断是否一个成功的响应(status在200和299之间)，如果不是成功的响应，就reject这个promise。

这个reject操作会导致整个链式promise跳过后面的所有promise直接到catch()语句，打印Request failed和错误消息。

如果这个promise成功了，它会调用我们定义的json()函数。因为前面的promise成功之后返回的response对象，我们可以拿到并作为第2个promise的参数传入。

在这个例子里面，我们返回了JSON序列化的数据，所以第3个promise直接接收这个JSON：

.then((data) => {
  console.log('Request succeeded with JSON response', data)
})

然后我们把它打印到console。

处理错误

在上一节的的例子里面，我们有一个catch接在链式promise后面。

当promise链中的任意一个出错或者reject的时候，就会直接跳到promise链后面最近的catch()语句。

new Promise((resolve, reject) => {
  throw new Error('Error')
}).catch(err => {
  console.error(err)
})
// or
new Promise((resolve, reject) => {
  reject('Error')
}).catch(err => {
  console.error(err)
})

级联错误

如果在catch()里面抛出一个错误，你可以在后面接上第二个catch()来处理这个错误，以此类推。

new Promise((resolve, reject) => {
  throw new Error('Error')
})
  .catch(err => {
    throw new Error('Error')
  })
  .catch(err => {
    console.error(err)
  })

组织多个promise

Promise.all()

如果你要同时完成不同的promise,可以用Promise.all()来声明一系列的promise，然后当它们全部resolve的时候再执行一些操作。

例子：

const f1 = fetch('/something.json')
const f2 = fetch('/something2.json')
Promise.all([f1, f2])
  .then(res => {
    console.log('Array of results', res)
  })
  .catch(err => {
    console.error(err)
  })

结合ES2015的解构赋值语法，你可以这样写：

Promise.all([f1, f2]).then(([res1, res2]) => {
  console.log('Results', res1, res2)
})

当然这不限于使用fetch， 这适用于任何promise.

Promise.race()

Promise.race()运行所有传递进去的promise，但是只要有其中一个resolve了，就会运行回调函数，并且只执行一次回调，回调的参数就是第一个resolve的promise返回的结果。

例子：

const promiseOne = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one')
})
const promiseTwo = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two')
})
Promise.race([promiseOne, promiseTwo]).then(result => {
  console.log(result) // 'two'
})

模块

ES Module是用于处理模块的ECMAScript标准。

虽然 Node.js 多年来一直使用 CommonJS标准，但浏览器却从未有过模块系统，因为模块系统的决策首先需要 ECMAScript 标准化后才由浏览器厂商去实施实现。

这个标准化已经完成在 ES2015中，浏览器也开始实施实现这个标准，大家试图保持一致，以相同的方式工作。现在 ES Module 可以在 Chrome Safari Edge 和 Firefox（从60版本开始） 中使用。

模块非常酷，他们可以让你封装各种各样的功能，同时将这些功能作为库暴露给其它 JavaScript 文件使用。

ES 模块语法

引入模块的语法:

import package from 'module-name'

CommonJS 则是这样使用：

const package = require('module-name')

一个模块是一个 JavaScript 文件，这个文件使用 export 关键字 导出 一个或多个值（对象、函数或者变量）。例如，下面这个模块提供了一个将字符串变成大写形式的函数：

uppercase.js

export default str => str.toUpperCase()

在这个例子中，这个模块定义了唯一一个 default export，因此可以是一个匿名函数。否则，需要一个名称来和其它 导出 做区分。

现在，任何其它的 JavaScript 模块 可以通过 import 导入 uppercase.js 的这个功能。

一个 HTML 页面可以通过使用了特殊的 type=module 属性的 <script> 标签添加一个模块。

<script type="module" src="index.js"></script>

注意: 这个模块导入的行为就像 *defer* 脚本加载一样。具体可以看 efficiently load JavaScript with defer and async

需要特别注意的是，任何通过 type="module" 载入的脚本会使用 严格模式 加载。

在这个例子中，uppercase.js 模块定义了一个 default export，因此当我们在导入它的时候，我们可以给他起一个任何我们喜欢的名字：

import toUpperCase from './uppercase.js'

同时我们可以这样使用它:

toUpperCase('test') //'TEST'

你也可以通过一个绝对路径来导入模块，下面是一个引用来自其它域底下定义的模块的例子：

import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'

下面同样是一些合法的 import语法：

import { toUpperCase } from '/uppercase.js'
import { toUpperCase } from '../uppercase.js'

下面是错误的使用:

import { toUpperCase } from 'uppercase.js'
import { toUpperCase } from 'utils/uppercase.js'

因为这里既不是使用绝对地址，也不是使用的相对地址。

其它的 import/export 语法

我们了解了上面的例子：

export default str => str.toUpperCase()

这里生成了一个 default export。然而，你可以通过下面的语法在一个文件里面 导出 多个功能：

const a = 1
const b = 2
const c = 3
export { a, b, c }

另外一个模块可以使用下面的方式 import 导入所有：

import * from 'module'

你也可以通过解构赋值的方式仅仅 import 导出一部分：

import { a } from 'module'
import { a, b } from 'module'

为了方便，你还可以使用 as 重命名任何 import 的东西：

import { a, b as two } from 'module'

你可以导入模块中的默认出口以及通过名称导入任何非默认的出口：

import React, { Component } from 'react'

这是一篇关于 ES 模块的文章，可以看一下： https://glitch.com/edit/#!/flavio-es-modules-example?path=index.html

CORS(跨域资源共享)

进行远程获取模块的时候是遵循 CORS 机制的。这意味着当你引用远程模块的时候，必须使用合法的 CORS 请求头来允许跨域访问（例如：Access-Control-Allow-Origin: *）。

对于不支持模块的浏览器应该怎么做？

结合 type="module"、nomodule 一起使用：

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

包装模块

ES 模块是现代浏览器中的一大特性。这些特性是 ES6 规范中的一部分，要在浏览器中全部实现这些特性的路还很漫长。

我们现在就能使用它们！但是我们同样需要知道，有一些模块会对我们的页面性能产生性能影响。因为浏览器必须要在运行时执行它们。

Webpack 可能仍然会被大量使用，即使 ES 模块可以在浏览器中执行。但是语言内置这个特性对于客户端和 nodejs 在使用模块的时候是一种巨大的统一。

新的字符串方法

任何字符串有了一些实例方法：

• repeat()
• codePointAt()

repeat()

根据指定的次数重复字符串：

'Ho'.repeat(3) //'HoHoHo'

没有提供参数以及使用 0 作为参数的时候返回空字符串。如果给一个负数参数则会得到一个 RangeError 的错误。

codePointAt()

这个方法能用在处理那些需要 2 个 UTF-16 单元表示的字符上。

使用 charCodeAt 的话，你需要先分别得到两个 UTF-16 的编码然后结合它们。但是使用 codePointAt() 你可以直接得到整个字符。

下面是一个例子，中文的 “𠮷” 是由两个 UTF-16 编码组合而成的：

"𠮷".charCodeAt(0).toString(16) //d842
"𠮷".charCodeAt(1).toString(16) //dfb7

如果你将两个 unicode 字符组合起来：

"\ud842\udfb7" //"𠮷"

你也可以用 codePointAt() 得到同样的结果:

"𠮷".codePointAt(0) //20bb7

如果你将得到的 unicode 编码组合起来：

"\u{20bb7}" //"𠮷"

更多关于 Unicode 的使用方法，参考我的Unicode guide。

新的对象方法

ES2015 在 Object 类下引入了一些静态方法：

• Object.is() 确定两个值是不是同一个
• Object.assign() 用来浅拷贝一个对象
• Object.setPrototypeOf 设置一个对象的原型

Object.is()

这个方法用来帮助比较对象的值：

使用方式:

Object.is(a, b)

返回值在下列情况之外一直是 false：

• a 和 b 是同一个对象
• a 和 b 是相等的字符串(用同样的字符组合在一起的字符串是相等的)
• a 和 b 是相等的数字
• a 和 b 都是 undefined, null, NaN, true 或者都是 false

0 和 -0 在 JavaScript 里面是不同的值, 所以对这种情况要多加小心（例如在比较之前，使用 + 一元操作符将所有值转换成 +0）。

Object.assign()

在 ES2015 版本中引入，这个方法拷贝所有给出的对象中的可枚举的自身属性到另一个对象中。

这个 API 的基本用法是创建一个对象的浅拷贝。

const copied = Object.assign({}, original)

作为浅拷贝，值会被复制，对象则是拷贝其引用（不是对象本身），因此当你修改了源对象的一个属性值，这个修改也会在拷贝出的对象中生效，因为内部引用的对象是相同的。:

const original = {
  name: 'Fiesta',
  car: {
    color: 'blue'
  }
}
const copied = Object.assign({}, original)
original.name = 'Focus'
original.car.color = 'yellow'
copied.name //Fiesta
copied.car.color //yellow

我之前提到过，源对象可以是一个或者多个:

const wisePerson = {
  isWise: true
}
const foolishPerson = {
  isFoolish: true
}
const wiseAndFoolishPerson = Object.assign({}, wisePerson, foolishPerson)
console.log(wiseAndFoolishPerson) //{ isWise: true, isFoolish: true }

Object.setPrototypeOf()

设置一个对象的原型。可以接受两个参数：对象以及原型。

使用方法:

Object.setPrototypeOf(object, prototype)

例子:

const animal = {
  isAnimal: true
}
const mammal = {
  isMammal: true
}
mammal.__proto__ = animal
mammal.isAnimal //true
const dog = Object.create(animal)
dog.isAnimal  //true
console.log(dog.isMammal)  //undefined
Object.setPrototypeOf(dog, mammal)
dog.isAnimal //true
dog.isMammal //true

展开操作符

你可以展开一个数组、一个对象甚至是一个字符串，通过使用展开操作符 ...。

让我们以数组来举例，给出：

const a = [1, 2, 3]

你可以使用下面的方式创建出一个新的数组：

const b = [...a, 4, 5, 6]

你也可以像下面这样创建一个数组的拷贝：

const c = [...a]

这中方式对于对象仍然有效。使用下面的方式克隆一个对象：

const newObj = { ...oldObj }

用在字符串上的时候，展开操作符会以字符串中的每一个字符创建一个数组：

const hey = 'hey'
const arrayized = [...hey] // ['h', 'e', 'y']

这个操作符有一些非常有用的应用。其中最重要的一点就是以一种非常简单的方式使用数组作为函数参数的能力：

const f = (foo, bar) => {}
const a = [1, 2]
f(...a)

（在之前的语法规范中，你只能通过 f.apply(null, a) 的方式来实现，但是这种方式不是很友好和易读。）

剩余参数（rest element）在和数组解构（array destructuring）搭配使用的时候非常有用。

const numbers = [1, 2, 3, 4, 5]
[first, second, ...others] = numbers

下面是展开元素 （spread elements）:

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sum = sum(...numbers)

ES2018 引入了 剩余属性 ，同样的操作符但是只能用在对象上。

剩余属性（Rest properties）:

const { first, second, ...others } = {
  first: 1,
  second: 2,
  third: 3,
  fourth: 4,
  fifth: 5
}
first // 1
second // 2
others // { third: 3, fourth: 4, fifth: 5 }

属性展开（Spread properties）允许我们结合跟在 ... 操作符之后对象的属性：

const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

Set

一个 Set 数据结构允许我们在一个容器里面增加数据。

一个 Set 是一个对象或者基础数据类型（strings、numbers或者booleans）的集合，你可以将它看作是一个 Map，其中值作为映射键，map 值始终为 true。

初始化一个 Set

Set 可以通过下面的方式初始化：

const s = new Set()

向 Set 中添加一项

你可以使用 add 方法向 Set 中添加项：

s.add('one')
s.add('two')

Set 仅会存贮唯一的元素，因此多次调用 s.add('one') 不会重复添加新的元素。

你不可以同时向 set 中加入多个元素。你需要多次调用 add() 方法。

检查元素是否在 set 中

我们可以通过下面的方式检查元素是否在 set 中：

s.has('one') //true
s.has('three') //false

从 set 中删除一个元素：

使用 delete() 方法：

s.delete('one')

确定 set 中元素的数量

使用 size 属性：

s.size

删除 set 中的全部元素

使用 clear() 方法：

s.clear()

对 set 进行迭代

使用 keys() 或者 values() 方法 - 它们等价于下面的代码：

for (const k of s.keys()) {
  console.log(k)
}
for (const k of s.values()) {
  console.log(k)
}

entries() 方法返回一个迭代器，你可以这样使用它：

const i = s.entries()
console.log(i.next())

调用 i.next() 将会以 { value, done = false } 对象的形式返回每一个元素，直到迭代结束，这时 done 是 true。

你也可以调用 set 的 forEach() 方法：

s.forEach(v => console.log(v))

或者你就直接使用 for..of 循环吧：

for (const k of s) {
  console.log(k)
}

使用一些初始值初始化一个 set

你可以使用一些值初始化一个 set：

const s = new Set([1, 2, 3, 4])

将 set 转换为一个数组

const a = [...s.keys()]
// or
const a = [...s.values()]

WeakSet

一个 WeakSet 是一个特殊的 Set.

在 set 中，元素不会被 gc（垃圾回收）。一个 weakSet 让它的所有元素都是可以被 gc 的。weakSet 中的每个键都是一个对象。当这个对象的引用消失的时候，对应的值就可以被 gc 了。

下面是主要的不同点：

1. WeakSet 不可迭代
2. 你不能清空 weakSet 中的所有元素
3. 不能够得到 weakSet 的大小

一个 weakSet 通常是在框架级别的代码中使用，仅仅暴露了下面的方法：

• add()
• has()
• delete()

Map

一份map结构的数据允许我们建立数据和key的关系

在ES6之前

在引入Map之前，开发者通常把对象(Object)当Map使用，把某个object或value值与指定的key进行关联:

const car = {}
car['color'] = 'red'
car.owner = 'Flavio'
console.log(car['color']) //red
console.log(car.color) //red
console.log(car.owner) //Flavio
console.log(car['owner']) //Flavio

引入Map之后

ES6引入了Map数据结构，它为我们处理这种数据结构提供了一种合适的工具

Map的初始化:

const m = new Map()

添加条目到Map中

你可以通过set()方法把条目设定到map中：

m.set('color', 'red')
m.set('age', 2)

通过key值从map中获取条目

你可以通过get()方法从map中取出条目:

const color = m.get('color')
const age = m.get('age')

通过key值从map中删除条目

使用delete()方法：

m.delete('color')

从map中删除所有条目

使用clear()方法：

m.clear()

通过key值检查map中是否含有某个条目

使用has()方法

const hasColor = m.has('color')

获取map中的条目数量

使用 size 属性:

const size = m.size

用value值初始化一个map

你可以用一组value来初始化一个map：

const m = new Map([['color', 'red'], ['owner', 'Flavio'], ['age', 2]])

Map 的key值

任何值(对象，数组，字符串，数字)都可以作为一个map的value值(使用key-value键值的形式)，任何值也可以用作key，即使是object对象。

如果你想通过get()方法从map中获取不存在的key，它将会返回undefined

在真实世界中你几乎不可能找到的诡异情况

const m = new Map()
m.set(NaN, 'test')
m.get(NaN) //test
const m = new Map()
m.set(+0, 'test')
m.get(-0) //test

使用Iterate迭代器获取map的keys值

Map提供了keys()方法，通过该方法我们可以迭代出所有的key值:

for (const k of m.keys()) {
  console.log(k)
}

使用Iterate迭代器获取map的values值

Map提供了values()方法，通过该方法我们可以迭代出所有的value值:

for (const v of m.values()) {
  console.log(v)
}

使用Iterate迭代器获取key-value组成的键值对

Map提供了entries()方法，通过该方法我们可以迭代出所有的键值对:

for (const [k, v] of m.entries()) {
  console.log(k, v)
}

使用方法还可以简化为：

for (const [k, v] of m) {
  console.log(k, v)
}

将map的keys值转换为数组

const a = [...m.keys()]

将map的values值转换为数组

const a = [...m.values()]

WeakMap

WeakMap是一种特殊的Map

在一个map对象中，定义在其上数据永远不会被垃圾回收，WeakMap替而代之的是它允许在它上面定义的数据可以自由的被垃圾回收走，WeakMap的每一个key都是一个对象，当指向该对象的指针丢失，与之对应的value就会被垃圾回收走。

这是WeakMap的主要不同处：

1. 你不可以在WeakMap上迭代keys值和values值(或者key-value键值对)
2. 你不可以从WeakMap上清除所有条目
3. 你不可以获取WeakMap的大小

WeakMap提供了如下几种方法，这些方法的使用和在Map中一样：

• get(k)
• set(k, v)
• has(k)
• delete(k)

关于WeakMap的用例不如Map的用例那么明显，你可能永远也不会在哪里会用到它，但从实际出发，WeakMap可以构建不会干扰到垃圾回收机制的内存敏感性缓存，还可以满足封装的严谨性及信息的隐藏性需求。

Generators生成器

Generators是一种特殊的函数，它能够暂停自身的执行并在一段时间后再继续运行，从而允许其它的代码在此期间运行(有关该主题的详细说明，请参阅完整的“javascript生成器指南”)。

Generators的代码决定它必须等待，因此它允许队列中的其它代码运行，并保留“当它等待的事情”完成时恢复其操作的权力。

所有这一切都是通过一个简单的关键字“yield`”完成的。当生成器包含该关键字时，将停止执行。

generator生成器可以包含许多yield关键字，从而使自己能多次停止运行，它是由*function关键字标识(不要将其与C、C++或Go等低级语言中使用的取消指针引用操作符混淆)。

Generators支持JavaScript中全新的编程范式，包括：

• 在generator运行时支持双向通信
• 不会“冻结”长期运行在程序中的while循环

这里有一个解释generator如何工作的例子：

function *calculator(input) {
  var doubleThat = 2 * (yield (input / 2))
  var another = yield (doubleThat)
  return (input * doubleThat * another)
}

我们先初始化它：

const calc = calculator(10)

然后我们在generator中开始进行iterator迭代：

calc.next()

第一个迭代器开始了迭代，代码返回如下object对象：

{
  done: false
  value: 5
}

具体过程如下：代码运行了函数，并把input=10传入到生成器构造函数中，该函数一直运行直到抵达yield，并返回yield输出的内容: input / 2 = 5，因此，我们得到的值为5，并告知迭代器还没有done(函数只是暂停了)。

在第二个迭代处，我们输入7：

calc.next(7)

然后我们得到了结果：

{
  done: false
  value: 14
}

7被作为doubleThat的值，注意：你可能会把input/2作为输入参数，但这只是第一次迭代的返回值。现在我们忽略它，使用新的输入值7，并将其乘以2.

然后，我们得到第二个yield的值，它返回doubleThat，因此返回值为14。

在下一个，也是最后一个迭代器，我们输入100

calc.next(100)

这样我们得到:

{
  done: true
  value: 14000
}

当迭代器完成时(没有更多的yield关键字)，我们返回input * doubleThat * another，这相当于10 * 14 * 100。

这些都是在2015年的ES2015引入的特性，现在我们深入了解下ES2016，它的作用域范围更小。

Array.prototype.includes()

该特性引入了一种更简洁的语法，同来检查数组中是否包含指定元素。

对于ES6及更低版本，想要检查数组中是否包含指定元素，你不得不使用indexOf方法，它检查数组中的索引，如果元素不存在，它返回-1，由于-1被计算为true，你需对其进行取反操作，例子如下：

if (![1,2].indexOf(3)) {
  console.log('Not found')
}

通过ES7引入的新特性，我们可以如此做：

if (![1,2].includes(3)) {
  console.log('Not found')
}

求幂运算符

求幂运算符**相当于Math.pow()方法，但是它不是一个函数库，而是一种语言机制：

Math.pow(4, 2) == 4 ** 2

对于需要进行密集数学运算的程序来说，这个特性是个很好的增强，在很多语言中，**运算符都是标准(包括Python、Ruby、MATLAB、Perl等其它多种语言)。

这些都是2016年引入的特性，现在让我们进入2017年。

字符串填充

字符串填充的目的是给字符串添加字符，以使其达到指定长度。

ES2017引入了两个String方法：padStart()和padEnd()。

padStart(targetLength [, padString])
padEnd(targetLength [, padString])

使用例子：

Object.values()

该方法返回一个数组，数组包含了对象自己的所有属性，使用如下：

const person = { name: 'Fred', age: 87 }
Object.values(person) // ['Fred', 87]

Object.values()也可以作用于数组：

const people = ['Fred', 'Tony']
Object.values(people) // ['Fred', 'Tony']

Object.entries()

该方法返回一个数组，数组包含了对象自己的所有属性键值对，是一个[key, value]形式的数组，使用如下：

const person = { name: 'Fred', age: 87 }
Object.entries(person) // [['name', 'Fred'], ['age', 87]]

Object.entries()也可以作用于数组：

const people = ['Fred', 'Tony']
Object.entries(people) // [['0', 'Fred'], ['1', 'Tony']]

Object.getOwnPropertyDescriptors()

该方法返回自己(非继承)的所有属性描述符，JavaScript中的任何对象都有一组属性，每个属性都有一个描述符，描述符是属性的一组属性(attributes)，由以下部分组成：

• value: 熟悉的value值
• writable: 属性是否可以被更改
• get: 属性的getter函数, 当属性读取时被调用
• set: 属性的setter函数, 当属性设置值时被调用
• configurable: 如果为false, 不能删除该属性，除了它的value值以为，也不能更改任何属性。
• enumerable: 该属性是否能枚举

Object.getOwnPropertyDescriptors(obj)接受一个对象，并返回一个带有描述符集合的对象。

In what way is this useful?

ES6给我们提供了Object.assign()方法，它从一个一个或多个对象中复制所有可枚举的属性值，并返回一个新对象。

但是，这也存在着一个问题，因为它不能正确的复制一个具有非默认属性值的属性。

如果对象只有一个setter，那么它就不会正确的复制到一个新对象上，使用Object.assign()进行如下操作：

const person1 = {
    set name(newName) {
        console.log(newName)
    }
}

这将不会起作用：

const person2 = {}
Object.assign(person2, person1)

但这将会起作用：

const person3 = {}
Object.defineProperties(person3,
  Object.getOwnPropertyDescriptors(person1))

通过一个简单的console控制台，你可以查看以下代码：

person1.name = 'x'
"x"
person2.name = 'x'
person3.name = 'x'
"x"

person2没有setter，它没能复制进去，对象的浅复制限定也出现在**Object.create()**方法中。

尾逗号

该特性允许在函数定义时有尾逗号，在函数使用时可以有尾逗号：

const doSomething = (var1, var2,) => {
  //...
}
doSomething('test2', 'test2',)

该改变将鼓励开发者停止“在一行开始时写逗号”的丑陋习惯

异步函数

JavaScript在很短的时间内从回调函数进化到Promise函数(ES2015)，并自从ES2017以来，异步JavaScript的async/wait语法变得更加简单。
异步函数是Promise和generator的结合，基本上，它是比Promise更高级的抽象，我再重复一般：async/await是基于Promise建立的

为什么要引入async/await

它减少了围绕promise的引用，并打破了Promise — “不要打断链式调用”的限制。

当Promise在ES2015中引入时，它的本意是来解决异步代码的问题，它也确实做到了，但在ES2015和ES2017间隔的这两年中，大家意识到：Promise不是解决问题的终极方案。

Promise是为了解决著名的回调地狱而被引入的，但它本身也带来了使用复杂性和语法复杂性。

Promise是很好的原生特性，围绕着它开发人员可以探索出更好的语法，因此当时机成熟后，我们得到了async函数

async函数使代码看起来像是同步函数一样，但其背后却是异步和非堵塞的。

它如何工作

一个async函数会返回一个promise，如下例：

const doSomethingAsync = () => {
  return new Promise(resolve => {
    setTimeout(() => resolve('I did something'), 3000)
  })
}

当你想要调用该函数时，你在前面加上了一个wait，这样调用就会被停止，直到该promise进行resolve或reject，需注意的是：外层函数必须定义为async，这是例子：

const doSomething = async () => {
  console.log(await doSomethingAsync())
}

一个上手示例

这是一个使用async/await进行异步函数的简单示例：

const doSomethingAsync = () => {
  return new Promise(resolve => {
    setTimeout(() => resolve('I did something'), 3000)
  })
}
const doSomething = async () => {
  console.log(await doSomethingAsync())
}
console.log('Before')
doSomething()
console.log('After')

上面的代码将会在浏览器的console中打印出如下结果：

Before
After
I did something //after 3s

关于 Promise

将 async 关键字标记在任何函数上，意味着这个函数都将返回一个 Promise，即使这个函数没有显式的返回，它在内部也会返回一个 Promise，这就是下面这份代码有效的原因：

const aFunction = async () => {
  return 'test'
}
aFunction().then(alert) // This will alert 'test'

下面的例子也一样:

const aFunction = async () => {
  return Promise.resolve('test')
}
aFunction().then(alert) // This will alert 'test'

更易于阅读的代码

正如上述的例子，我们将它与普通回调函数或链式函数进行比较，我们的代码看起来非常的简单。

这是一个很简单的例子，当代码足够复杂时，它会产生更多的收益。

例如，使用 Promise 来获取 JSON 资源并解析它：

const getFirstUserData = () => {
  return fetch('/users.json') // get users list
    .then(response => response.json()) // parse JSON
    .then(users => users[0]) // pick first user
    .then(user => fetch(`/users/${user.name}`)) // get user data
    .then(userResponse => response.json()) // parse JSON
}
getFirstUserData()

这是使用 async/await 实现相同功能的例子：

const getFirstUserData = async () => {
  const response = await fetch('/users.json') // get users list
  const users = await response.json() // parse JSON
  const user = users[0] // pick first user
  const userResponse = await fetch(`/users/${user.name}`) // get user data
  const userData = await user.json() // parse JSON
  return userData
}
getFirstUserData()

串行多个异步功能

async 函数非常容易，并且它的语法比 Promise 更易读。

const promiseToDoSomething = () => {
  return new Promise(resolve => {
    setTimeout(() => resolve('I did something'), 10000)
  })
}
const watchOverSomeoneDoingSomething = async () => {
  const something = await promiseToDoSomething()
  return something + ' and I watched'
}
const watchOverSomeoneWatchingSomeoneDoingSomething = async () => {
  const something = await watchOverSomeoneDoingSomething()
  return something + ' and I watched as well'
}
watchOverSomeoneWatchingSomeoneDoingSomething().then(res => {
  console.log(res)
})

打印结果:

I did something and I watched and I watched as well

更简单的调试

调试 Promise 就很困难，因为调试器无法跨越异步代码，但调试 async/await 就非常的简单，调试器会像调试同步代码一样来处理它。

共享内存和原子

WebWorkers 可以在浏览器中创建多线程程序。

它们通过事件的方式来传递消息，从 ES2017 开始，你可以使用 SharedArrayBuffer 在每一个 Worker 中和它们的创建者之间共享内存数组.

由于不知道写入内存部分需要多长的周期来广播，因此在读取值时，任何类型的写入操作都会完成，Atomics 可以避免竞争条件的发生。

关于它的更多细节可以在proposal中找到。

这是 ES2017，接下来我将介绍 ES2018 的功能。

Rest/Spread Properties

ES2015 引入了解构数组的方法，当你使用时：

const numbers = [1, 2, 3, 4, 5]
[first, second, ...others] = numbers

and 展开参数:

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sum = sum(...numbers)

ES2018 为对象引入了同样的功能。

解构:

const { first, second, ...others } = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }
first // 1
second // 2
others // { third: 3, fourth: 4, fifth: 5 }

展开属性 允许通过组合在展开运算符之后传递的对象属性而创建新对象：

const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

异步迭代器

for-await-of 允许你使用异步可迭代对象做为循环迭代：

for await (const line of readLines(filePath)) {
  console.log(line)
}

因为它使用的了 await，因此你只能在 async 函数中使用它。

Promise.prototype.finally()

当一个 Promise 是 fulfilled 时，它会一个接一个的调用 then。

如果在这个过程中发生了错误，则会跳过 then 而执行 catch。

而 finally() 允许你运行一些代码，无论是成功还是失败：

fetch('file.json')
  .then(data => data.json())
  .catch(error => console.error(error))
  .finally(() => console.log('finished'))

正则表达式改进

ES2018 对正则表达式引入了许多改进，这些都可以在 https://flaviocopes.com/javascript-regular-expressions/ 上找到。

以下是关于 ES2018 正则表达式改进的具体补充：

RegExp lookbehind assertions: 根据前面的内容匹配字符串

这是一个 lookahead: 你可以使用 ?= 来匹配字符串，后面跟随一个特定的字符串：