雾里看花叹朦胧

MiddleAware.jsexport default functions => { function * generator(arr) { for (let item of arr) { yield item; } } const it = generator(functions); const...

Git源码：https://github.com/slhuang520/study/tree/master/web/es6/test/src/promise整体结构图如下：MyPromise .js// require("babel-register"); //自动编译// import "core-js"; //引入 polyfill// import "regenerator-r...

出现如下错误：internal/modules/cjs/loader.js:583 throw err; ^Error: Cannot find module 'MyPromise.js' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Functio...

关于 Gulp 的环境配置，请参考如下文章：使用Gulp(V3.+) + Babel + Browserify 配置ES6的开发环境如果使用的 Gulp 版本是 V4 以上的，配置相对于 V3 有些许的变化。1.注意点往往我们使用的 Gulp 编译命令是使用的全局的 Gulp，而非局部的。所以，如果局部使用了 V4的版本，而全局的Gulp 是 V3 版本的，那么在执行 gulp 命令时，会...

这里使用的Gulp 版本有 V3.9.1，大版本为3.0，如果使用了V4.0版本，配置上会有比较大的改变，具体可以参考另外一篇文章：1.简单说明一下：gulp 是工具，Babel 编译 ES6 => ES5,Browserify 添加浏览器支持。2. 整体项目结构3. 测试代码3.1 App.jsclass App{ constructor(name) { ...

RegExp 具名组匹配ES2018 引入了具名组匹配（Named Capture Groups），允许为每一个组匹配指定一个名字，既便于阅读代码，又便于引用。同时，数字序号（matchObj[1]）依然有效。const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})

使用 Webstrom 搭建一个运行环境，通过手动编译的方式实现 ES6 向 ES5 的转码。若是需要了解 Webstrom 中自己实现 ES6 转码环境的搭建，请参考如下文章：webstrom 配置 es6 的运行环境整体目录结构如下：node_modules 目录是存放下载的 library 的，在使用 npm 时会自动添加这个目录out 是转码后的文件输出目录(先放一个空的)s...

请参考：ES5 使用 NodeJS 逐行读取文件的内容简单搭建 ES6 的运行环境在 ES6 中使用 NodeJS 实现逐行读取文件内容，具体代码实现如下：先看一下目录结构：//ObserverMode.jsconst queuedObservers = new Set();const observe = fn => queuedObservers.add(fn);co...

观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。const person = observable({ name: '张三', age: 20});function print() { console.log(`${person.name}, ${person.age}`)}observe(print);person...

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

Promise.resolve方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve方法。需要注意的是，立即resolve的 Promise 对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。setTimeout(fu...

项目整体结构如下：详细代码如下：//ObserverMode.jsconst queuedObservers = new Set();const observe = fn => queuedObservers.add(fn);const observable = obj => new Proxy(obj, {set});function set(target, key...

如下是项目的整体结构：实现代码如下：const preLoadImg = function (path) { return new Promise(function (resolve, reject) { const img = new Image(); img.onload = resolve; img.onerror = rejec...

遍历器对象除了具有next方法，还可以具有return方法和throw方法。如果你自己写遍历器对象生成函数，那么next方法是必须部署的，return方法和throw方法是否部署是可选的。return方法的使用场合是，如果for…of循环提前退出（通常是因为出错，或者有break语句），就会调用return方法。如果一个对象在完成遍历前，需要清理或释放资源，就可以部署return方法。如下是代...

WeakSetWeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。首先，WeakSet 的成员只能是 对象，而不能是其他类型的值。const ws = new WeakSet();ws.add(1)// TypeError: Invalid value used in weak setws.add(Symbol())// TypeErr...

私有方法是常见需求，但 ES6 不提供，只能通过变通方法模拟实现。一种做法是在命名上加以区别，比如使用下划线表示私有方法。但是，这种命名是不保险的，在类的外部，还是可以调用到这个方法。class Widget { // 公有方法 foo (baz) { this._bar(baz); } // 私有方法 _bar(baz) { return th...

使用 let 声明的变量与 var 声明的变量有许多的不同，比如： 1. 变量作用域提升 2. 暂时性死区 3. 不可重复声明 4. 块级作用域 5. 脱离顶层作用域 6. 等等….暂时性死区，就是其中的一种表现。只要块级作用域内存在 let 命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。var tmp = 123;if (true) {

网络地址： http://es6.ruanyifeng.com/结构如下：

基本用法ES6允许使用“箭头”（=>）定义函数。var f = v => v;上面的箭头函数等同于：var f = function(v) { return v;};如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。var f = () => 5;// 等同于var f = function () { return 5 };var sum = (num1, num2)

Win7 下 WebStrom 配置 es6 的运行环境，WebStrom 的版本是 11.0.3，其他的版本，可能略有所不同。1. node.js 安装首先 WebStrom 需要安装 node.js，以支持 npm 指令。安装node.js程序，按照提示一步步安装即可，注意在安装时，勾选自动添加到 系统环境 中的选项。Node.js安装完成后，检查环境变量path中是否配置了Node.js；在命

Unicode 属性类目前，有一个提案，引入了一种新的类的写法\p{…}和\P{…}，允许正则表达式匹配符合 Unicode 某种属性的所有字符。const regexGreekSymbol = /\p{Script=Greek}/u;regexGreekSymbol.test('π') // true上面代码中，\p{Script=Greek}指定匹配一个希腊文字母，所以匹配π成功。Unicod

这里列出来一个简单的例子，使用箭头函数的链式调用，形成管道函数形式。let pipeline = (...funs) => val => funs.reduce((a, b) => b(a), val);let plus = a => a + 1;let mult = a => a * 2;let addThenMult = pipeline(plus, mult);console.log(

先看一个正常的递归函数。function sum(x, y) { if (y > 0) { return sum(x + 1, y - 1); } else { return x; }}sum(1, 100000)// Uncaught RangeError: Maximum call stack size exceeded(…)上面代码中，sum是一个递归函数，参数

我们知道，this关键字总是指向函数运行时所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。let prop = { name: "zhang"};const a = { find(){ //对象的方法 return super.name; }};Object.setPrototypeOf(a, prop);co

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值，插入顺序。Set 本身是一个构造函数，用来生成 Set 数据结构。const set = new Set();set.add(1);set.add(4);set.add(2);set.add(3);for (let val of set) { console.log(val); //1 4 2

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。const data = {};const element = document.getElementById('myDiv');data[element] = 'metadata';data['[object HTMLDivElement]'] // "metadata"上面代码

如果是类数组对象，可以直接使用 Array 的 Iteratorlet iterable = { 0: 'a', 1: 'b', 2: 'c', length: 3, [Symbol.iterator]: Array.prototype[Symbol.iterator]};for (let item of iterable) { console.log(item); //

ES6 中规定， Generator 函数内部使用 this 无效，而且不能使用 new 关键字来获取 Generator 的一个实例。内部使用 this如下方法可以使得 Generator 内部的 this 关键字有效：function* a() { this.a = 1; yield "hello"; yield "world"};let b = a();consol

以下只是个人的学习笔记：super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。1、当作函数使用class A {}class B extends A { constructor() { super(); //ES6 要求，子类的构造函数必须执行一次super函数。 }}注意，super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即

class Polygon { constructor(width, height) { console.log("first!");//调用静态方法时，constructor 并没有执行 this.width = width; this.height = height; this.name = "Polygon";

typeof 非安全 在使用 let 声明的变量前，使用 typeof函数检测变量是否存在，现在是非安全的了，会出现异常，原因是因为 let的暂时性死区引起的。typeof a;//ReferenceError: a is not definedlet a = 2;不允许重复声明 let不允许在相同作用域内，重复声明同一个变量。// 报错function () { let a =