冴羽的JavaScript博客

冴羽写JS文章的地方，预计写四个系列：JavaScript深入系列、JavaScript专题系列、ES6系列、React系列。

171

ES6 完全使用手册

冴羽 11月28日发布
140 收藏

前言这里的 "ES6" 泛指 ES5 之后的新语法这里的 "完全" 是指本文会不断更新这里的 "使用" 是指本文会展示很多 ES6 的使用场景这里的 "手册" 是指你可以参照本文将项目更多的重构为 ES6 语法此外还要注意这里...

ES6 系列之私有变量的实现

冴羽 11月20日发布
13 收藏

前言在阅读《ECMAScript 6 入门》的时候，零散的看到有私有变量的实现，所以在此总结一篇。 1. 约定实现 {代码...} 优点写法简单调试方便兼容性好缺点外部可以访问和修改语言没有配合的机制，如 for in ...

ES6 系列之我们来聊聊装饰器

冴羽 11月14日发布
11 收藏

Decorator 装饰器主要用于: 装饰类装饰方法或属性装饰类 {代码...} 装饰方法或属性 {代码...} Babel 安装编译我们可以在 Babel 官网的 Try it out，查看 Babel 编译后的代码。不过我们也可以选择本地编译： {...

ES6 系列之模块加载方案

冴羽 11月13日发布
17 收藏

前言本篇我们重点介绍以下四种模块加载规范： AMD CMD CommonJS ES6 模块最后再延伸讲下 Babel 的编译和 webpack 的打包原理。 require.js 在了解 AMD 规范之前，我们先来看看 require.js 的使用方式。项目目...

ES6 系列之 defineProperty 与 proxy

冴羽 11月9日发布
44 收藏

我们或多或少都听过“数据绑定”这个词，“数据绑定”的关键在于监听数据的变化，可是对于这样一个对象：var obj = {value: 1}，我们该怎么知道 obj 发生了改变呢？

ES6 系列之 Babel 是如何编译 Class 的(下)

冴羽 11月7日发布
3 收藏

在上一篇《 ES6 系列 Babel 是如何编译 Class 的(上)》，我们知道了 Babel 是如何编译 Class 的，这篇我们学习 Babel 是如何用 ES5 实现 Class 的继承。

ES6 系列之 Babel 是如何编译 Class 的(上)

冴羽 11月5日发布
29 收藏

在了解 Babel 是如何编译 class 前，我们先看看 ES6 的 class 和 ES5 的构造函数是如何对应的。毕竟，ES6 的 class 可以看作一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法...

ES6 系列之 Babel 将 Async 编译成了什么样子

冴羽 10月31日发布
17 收藏

regeneratorRuntime 相关的代码我们在《ES6 系列之 Babel 将 Generator 编译成了什么样子》中已经介绍过了，这次我们重点来看看 _asyncToGenerator 函数：

ES6 系列之 Babel 将 Generator 编译成了什么样子

冴羽 10月30日发布
9 收藏

具体的执行过程就不说了，我们直接在 Babel 官网的 Try it out 粘贴上述代码，然后查看代码被编译成了什么样子：

ES6 系列之异步处理实战

冴羽 10月25日发布
16 收藏

前言我们以查找指定目录下的最大文件为例，感受从回调函数 -> Promise -> Generator -> Async 异步处理方式的改变。 API 介绍为了实现这个功能，我们需要用到几个 Nodejs 的 API，所以我们来简单介绍...

109

ES6 系列之我们来聊聊 Async

冴羽 10月23日发布
79 收藏

async ES2017 标准引入了 async 函数，使得异步操作变得更加方便。在异步处理上，async 函数就是 Generator 函数的语法糖。举个例子： {代码...} 当你使用 async 时： {代码...} 其实 async 函数的实现原理，就...

ES6 系列之 Generator 的自动执行

冴羽 10月18日发布
10 收藏

单个异步任务 {代码...} 为了获得最终的执行结果，你需要这样做： {代码...} 首先执行 Generator 函数，获取遍历器对象。然后使用 next 方法，执行异步任务的第一阶段，即 fetch(url)。注意，由于 fetch(url) ...

138

ES6 系列之我们来聊聊 Promise

冴羽 10月16日发布
105 收藏

前言 Promise 的基本使用可以看阮一峰老师的《ECMAScript 6 入门》。我们来聊点其他的。回调说起 Promise，我们一般都会从回调或者回调地狱说起，那么使用回调到底会导致哪些不好的地方呢？ 1. 回调嵌套使用...

ES6 系列之 WeakMap

冴羽 7月26日发布
22 收藏

前言我们先从 WeakMap 的特性说起，然后聊聊 WeakMap 的一些应用场景。特性 1. WeakMap 只接受对象作为键名 {代码...} 2. WeakMap 的键名所引用的对象是弱引用这句话其实让我非常费解，我个人觉得这句话真正想...

ES6 系列之模拟实现一个 Set 数据结构

冴羽 7月18日发布
23 收藏

Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

ES6 系列之迭代器与 for of

冴羽 7月10日发布
32 收藏

看着很简单，但是再回顾这段代码，实际上我们仅仅是需要数组中元素的值，但是却需要提前获取数组长度，声明索引变量等，尤其当多个循环嵌套的时候，更需要使用多个索引变量，代码的复杂度就会大大增加，比如我们...

ES6 系列之模拟实现 Symbol 类型

冴羽 6月12日发布
14 收藏

实际上，Symbol 的很多特性都无法模拟实现……所以先让我们回顾下有哪些特性，然后挑点能实现的……当然在看的过程中，你也可以思考这个特性是否能实现，如果可以实现，该如何实现。

ES6 系列之箭头函数

冴羽 6月4日发布
30 收藏

回顾我们先来回顾下箭头函数的基本语法。 ES6 增加了箭头函数： {代码...} 相当于： {代码...} 如果需要给函数传入多个参数： {代码...} 如果函数的代码块需要多条语句： {代码...} 如果需要直接返回一个对象： ...

ES6 系列之模板字符串

冴羽 5月30日发布
1 收藏

基础用法 {代码...} 如果你碰巧要在字符串中使用反撇号，你可以使用反斜杠转义： {代码...} 值得一提的是，在模板字符串中，空格、缩进、换行都会被保留： {代码...} 注意，打印的结果中第一行是一个换行，你可以...

ES6 系列之 let 和 const

冴羽 5月21日发布
34 收藏

初学者可能会觉得只有 condition 为 true 的时候，才会创建 value，如果 condition 为 false，结果应该是报错，然而因为变量提升的原因，代码相当于：