2018年01月_ixygj197875

06月 04月 03月 02月 01月

转载 es6 constructor 方法

constructor 方法constructor()方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加。class Point {}// 等同于class Point { constructor() {}}上面代码中，定义了一个空的类Point，J

2018-01-31 18:11:03 7925

转载 es6 Class的严格模式

严格模式类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。

2018-01-31 18:09:59 1489

转载 es6 Class简介

Class简介类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。

2018-01-31 18:08:28 253

转载 es6 async函数的异步迭代器

async函数的异步迭代器《迭代器》一章说过，Iterator 接口是一种数据遍历的协议，只要调用迭代器对象的next方法，就会得到一个对象，表示当前遍历指针所在的那个位置的信息。next方法返回的对象的结构是{value, done}，其中value表示当前的数据的值，done是一个布尔值，表示遍历是否结束。这里隐含着一个规定，next方法必须是同步的，只要调用就必须立刻返回

2018-01-31 18:07:49 2165

转载 es6 async函数实例：按顺序完成异步操作

async函数实例：按顺序完成异步操作实际开发中，经常遇到一组异步操作，需要按照顺序完成。比如，依次远程读取一组 URL，然后按照读取的顺序输出结果。ES6 Promise 的写法如下。function logInOrder(urls) { // 远程读取所有URL const textPromises = urls.map(url => { return fetch

2018-01-31 18:06:31 4301

转载 es6 async函数与其他异步处理方法的比较

async函数与其他异步处理方法的比较我们通过一个例子，来看 async函数与 Promise、Generator函数的比较。假定某个 DOM 元素上面，部署了一系列的动画，前一个动画结束，才能开始后一个。如果当中有一个动画出错，就不再往下执行，返回上一个成功执行的动画的返回值。首先是 ES6 Promise 的写法。function chainAnimationsPr

2018-01-31 18:05:41 617

转载 es6 async函数的实现原理

async函数的实现原理async函数的实现原理，就是将 Generator函数和自动执行器，包装在一个函数里。async function fn(args) { // ...}// 等同于function fn(args) { return spawn(function* () { // ... });}所有的ES6async函数都可以写成上面的第二种形式

2018-01-31 18:04:42 1722

转载 es6 async函数的语法

async函数的语法async函数的语法规则总体上比较简单，难点是错误处理机制。返回 Promise 对象async函数返回一个 Promise 对象。async函数内部return语句返回的值，会成为then方法回调函数的参数。async function f() { return 'hello world';}f().then(v => console.l

2018-01-31 18:03:43 1423

转载 es6 async函数的基本用法

async函数的基本用法async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。下面是一个例子。async function getStockPriceByName(name) { const symbol = await getStockSymbol(na

2018-01-31 18:02:40 7112

转载 es6 什么是async函数

什么是async函数ES2017 标准引入了 async函数，使得异步操作变得更加方便。async函数是什么？一句话，它就是 Generator函数的语法糖。前文有一个 Generator函数，依次读取两个文件。const fs = require('fs');const readFile = function (fileName) { return new Prom

2018-01-31 18:01:19 753

转载 es6 co模块

co模块基本用法co模块是著名程序员 TJ Holowaychuk 于 2013 年 6 月发布的一个小工具，用于 Generator函数的自动执行。下面是一个 Generator函数，用于依次读取两个文件。var gen = function* () { var f1 = yield readFile('/etc/fstab'); var f2 = yield r

2018-01-30 22:39:42 4808 1

转载 Thunk函数

Thunk函数Thunk函数是自动执行 Generator函数的一种方法。参数的求值策略Thunk函数早在上个世纪 60 年代就诞生了。那时，编程语言刚刚起步，计算机学家还在研究，编译器怎么写比较好。一个争论的焦点是"求值策略"，即函数的参数到底应该何时求值。var x = 1;function f(m) { return m * 2;}f(x + 5)上面代

2018-01-30 22:37:54 426

转载 Generator函数

Generator函数协程(coroutine)传统的编程语言，早有异步编程的解决方案（其实是多任务的解决方案）。其中有一种叫做"协程"（coroutine），意思是多个线程互相协作，完成异步任务。协程有点像函数，又有点像线程。它的运行流程大致如下。第一步，协程A开始执行。第二步，协程A执行到一半，进入暂停，执行权转移到协程B。第三步，（一段时间后）协程

2018-01-30 22:36:18 229

转载 Generator函数的基本概念

基本概念异步ES6 所谓"异步"，简单说就是一个任务不是连续完成的，可以理解成该任务被人为分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。比如，有一个任务是读取文件进行处理，任务的第一段是向操作系统发出请求，要求读取文件。然后，程序执行其他任务，等到操作系统返回文件，再接着执行任务的第二段（处理文件）。这种不连续的执行，就叫做异步。

2018-01-30 22:34:27 215

转载 es6 Generator函数的应用

Generator函数的应用es6 Generator 可以暂停函数执行，返回任意表达式的值。这种特点使得 Generator 有多种应用场景。异步操作的同步化表达Generator函数的暂停执行的效果，意味着可以把异步操作写在yield表达式里面，等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放在yield表达式下面，反

2018-01-30 22:31:53 565

转载 es6 Generator函数的含义

Generator函数的含义Generator 与状态机Generator 是实现状态机的最佳结构。比如，下面的clock函数就是一个状态机。var ticking = true;var clock = function() { if (ticking) console.log('Tick!'); else console.log('Tock!'); tick

2018-01-30 22:29:55 326

转载 es6 Generator函数的this

Generator函数的thisGenerator函数总是返回一个遍历器，ES6 规定这个遍历器是Generator函数的实例，也继承了Generator函数的prototype对象上的方法。function* g() {}g.prototype.hello = function () { return 'hi!';};let obj = g();obj instanceof g /

2018-01-29 20:00:17 468

转载 es6 作为对象属性的Generator函数

作为对象属性的Generator函数如果一个对象的属性是 Generator函数，可以简写成下面的形式。let obj = { * myGeneratorMethod() { ··· }};上面代码中，myGeneratorMethod属性前面有一个星号，表示这个属性是一个 Generator函数。它的完整形式如下，与上面的写法是等价的。let obj =

2018-01-29 19:59:23 334

转载 es6 yield表达式

yield表达式如果在 Generator函数内部，调用另一个 Generator函数，默认情况下是没有效果的。function* foo() { yield 'a'; yield 'b';}function* bar() { yield 'x'; foo(); yield 'y';}for (let v of bar()){ console.log(v);}// "x"/

2018-01-29 19:58:34 1410

转载 es6 next()、throw()、return() 的共同点

next()、throw()、return() 的共同点next()方法、throw()方法、return()方法这三个方法本质上是同一件事，可以放在一起理解。它们的作用都是让 Generator函数恢复执行，并且使用不同的语句替换yield表达式。next()方法是将yield表达式替换成一个值。const g = function* (x, y) { let resu

2018-01-29 19:57:44 2535

转载 es6 Generator.prototype.return()方法

Generator.prototype.return()方法Generator函数返回的遍历器对象，还有一个return()方法，可以返回给定的值，并且终结遍历 Generator函数。function* gen() { yield 1; yield 2; yield 3;}var g = gen();g.next() // { value: 1, done:

2018-01-29 19:56:15 429

转载 es6 Generator.prototype.throw()方法

Generator.prototype.throw()方法Generator函数返回的遍历器对象，都有一个throw()方法，可以在函数体外抛出错误，然后在 Generator函数体内捕获。var g = function* () { try { yield; } catch (e) { console.log('内部捕获', e); }};var i = g();i

2018-01-29 19:55:30 358

转载 es6 for...of循环

for...of循环for...of循环可以自动遍历 Generator函数时生成的Iterator对象，且此时不再需要调用next()方法。function *foo() { yield 1; yield 2; yield 3; yield 4; yield 5; return 6;}for (let v of foo()) { console.log(v);}// 1

2018-01-29 19:54:36 448

转载 es6 next()方法的参数

next()方法的参数yield表达式本身没有返回值，或者说总是返回undefined。next()方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。function* f() { for(var i = 0; true; i++) { var reset = yield i; if(reset) { i = -1; } }}var g = f();g

2018-01-29 19:53:47 17748 1

转载 es6 Generator函数概述

概述什么是Generator函数Generator函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。本章详细介绍 Generator函数的语法和 API，它的异步编程应用请看《Generator函数的异步应用》一章。Generator函数有多种理解角度。语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。执行 G

2018-01-29 19:52:46 392

转载 es6 for...of 循环

for...of 循环ES6 借鉴 C++、Java、C# 和 Python 语言，引入了for...of循环，作为遍历所有数据结构的统一的方法。一个数据结构只要部署了Symbol.iterator属性，就被视为具有 Iterator接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。for

2018-01-29 19:51:14 1995

转载 es6 迭代器对象的 return()，throw()

迭代器对象的 return()，throw()迭代器对象除了具有next()方法，还可以具有return()方法和throw()方法。如果你自己写迭代器对象生成函数，那么next()方法是必须部署的，return()方法和throw()方法是否部署是可选的。return()方法的使用场合是，如果for...of循环提前退出（通常是因为出错，或者有break语句或continue语句

2018-01-28 18:05:38 1500

转载 es6 Iterator 接口与 Generator 函数

Iterator 接口与 Generator 函数Symbol.iterator方法的最简单实现，还是使用下一章要介绍的 Generator函数。var myIterable = {};myIterable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3;};[...myIterable] // [1, 2,

2018-01-28 18:04:49 408

转载 es6 字符串的 Iterator 接口

字符串的 Iterator 接口字符串是一个类似数组的对象，也原生具有 Iterator接口。var someString = "hi";typeof someString[Symbol.iterator]// "function"var iterator = someString[Symbol.iterator]();iterator.next() // { value: "h",

2018-01-28 18:04:04 347

转载 es6 调用 Iterator 接口的场合

调用 Iterator 接口的场合有一些场合会默认调用 Iterator接口（即Symbol.iterator方法），除了下文会介绍的for...of循环，还有几个别的场合。（1）解构赋值对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法。let set = new Set().add('a').add('b').add('c');let

2018-01-28 18:03:27 540

转载 es6 默认的 Iterator 接口

默认的 Iterator 接口Iterator接口的目的，就是为所有数据结构，提供了一种统一的访问机制，即for...of循环（详见下文）。当使用for...of循环遍历某种数据结构时，该循环会自动去寻找 Iterator接口。一种数据结构只要部署了 Iterator接口，我们就称这种数据结构是”可遍历的“（iterable）。ES6 规定，默认的 Iterator接口

2018-01-28 18:02:43 579

转载 es6 Iterator（迭代器）的概念

Iterator（迭代器）的概念JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。迭代器（Iterator）就是这样一种机制。它是

2018-01-28 18:01:49 471

转载 es6 Promise.try()方法

Promise.try()方法实际开发中，经常遇到一种情况：不知道或者不想区分，函数f是同步函数还是异步操作，但是想用 Promise 来处理它。因为这样就可以不管f是否包含异步操作，都用then方法指定下一步流程，用catch方法处理f抛出的错误。一般就会采用下面的写法。Promise.resolve().then(f)上面的写法有一个缺点，就是如果f是同步函数，那么它会

2018-01-28 18:01:04 6032 2

转载 es6 Promise 的应用

Promise 的应用加载图片我们可以将图片的加载写成一个Promise，一旦加载完成，Promise的状态就发生变化。const preloadImage = function (path) { return new Promise(function (resolve, reject) { const image = new Image(); image.onl

2018-01-28 18:00:11 214

转载 es6 Promise.done(),Promise.finally()

Promise.done(),Promise.finally()ES6 的 Promise API 提供的方法不是很多，有些有用的方法可以自己部署。下面介绍如何部署两个不在 ES6 之中、但很有用的方法。done()Promise 对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为 Promise 内部的错误不会冒泡

2018-01-28 17:59:16 14321

转载 es6 Promise.reject()方法

Promise.reject()方法Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。const p = Promise.reject('出错了');// 等同于const p = new Promise((resolve, reject) => reject('出错了'))p.then(null, function

2018-01-28 17:58:34 57486

转载 es6 Promise.resolve()方法

Promise.resolve()方法有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。const jsPromise = Promise.resolve($.ajax('/whatever.json'));上面代码将 jQuery 生成的deferred对象，转为一个新的 Promise 对象。Promise.resolv

2018-01-27 22:29:06 64835

转载 es6 Promise.race()方法

Promise.race()方法Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。const p = Promise.race([p1, p2, p3]);上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。Promis

2018-01-27 22:28:21 8570

转载 es6 Promise.all()方法

Promise.all()方法Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。const p = Promise.all([p1, p2, p3]);上面代码中，Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数

2018-01-27 22:27:36 14793 2

转载 es6 Promise.prototype.catch()方法

Promise.prototype.catch()方法Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。getJSON('/posts.json').then(function(posts) { // ...}).catch(function(error) { // 处理 getJSON 和前

2018-01-27 22:26:48 1508