教程

Module

ModuleES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。export 命令模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口。import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。export输出变量的写法：// profile.js export var firstName = 'Michael'; export var lastName = 'Jackson'; export var year = 1958;还可以：// profile.js var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; export {firstName, lastName, year}; //跟上面写法等价，推荐这种写法。export命令除了输出变量，还可以输出函数或类（c...

2019-01-13

21分钟阅读

教程

Class

Class用法class跟let、const一样：不存在变量提升、不能重复声明...es5面向对象写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。//es5 function Fn(x, y) { this.x = x; this.y = y; } Fn.prototype.add = function () { return this.x + this.y; }; //等价于 //es6 class Fn{ constructor(x,y){ this.x = x; this.y = y; } add(){ return this.x + this.y; } } var F = new F...

2019-01-13

24分钟阅读

教程

async 函数

async 函数含义ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是 Generator 函数的语法糖。什么是语法糖？意指那些没有给计算机语言添加新功能，而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式，有益于更好的编码风格，更易读。不过其并没有给语言添加什么新东西。反向还有语法盐：主要目的是通过反人类的语法，让你更痛苦的写代码，虽然同样能达到避免代码书写错误的效果，但是编程效率很低，毕竟提高了语法学习门槛，让人齁到忧伤。。。async函数使用时就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。async函数对 Generator 函数的区别：（1）内置执行器。Generator 函数的执行必须靠执行器，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。（2）更好的语义。async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。（3）正常情况下，...

2019-01-13

11分钟阅读

教程

Generator

Generator简介基本概念Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。跟普通函数的区别function关键字与函数名之间有一个星号；函数体内部使用yield表达式，定义不同的内部状态。Generator函数不能跟new一起使用，会报错。function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } var hw = helloWorldGenerator();上面代码定义了一个 Generator 函数helloWorldGenerator，它内部有两个yield表达式（hello和world），即该函数有三个状态：hello，world 和 return 语句（结束执行）。调用 Generator 函数后，该函数并不执行，返回的...

2019-01-13

23分钟阅读

教程

Iterator

Iterator概念迭代器是一种接口、是一种机制。为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator 的作用有三个：为各种数据结构，提供一个统一的、简便的访问接口；使得数据结构的成员能够按某种次序排列；主要供for...of消费。Iterator本质上，就是一个指针对象。过程是这样的：（1）创建一个指针对象，指向当前数据结构的起始位置。（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。普通函数实现Iteratorfunction myIter(obj){ let i = 0; return { next(){ let done = (i>=obj.length); let value = !done ? obj[i++] : undefined; retu...

2019-01-13

8分钟阅读

教程

Promise

Promise概念Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所`Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。特点对象的状态不受外界影响。一旦状态改变，就不会再变，任何时候都可以得到这个结果。状态Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。缺点无法取消Promise，一旦新建它就会立即执行，无法中途取消。如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。注意，为了行文方便，本章后面的 resolved 统一只指 fulfilled 状态，不包含 rejected 状态。用法写js必然不会对异步事件陌生。settimeout(()=>{ console.log("123") },0) c...

2019-01-13

30分钟阅读

教程

Reflect

Reflect概述Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。设计目的将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方...

2019-01-13

4分钟阅读

教程

Proxy

Proxy概述Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。var obj = new Proxy({}, { get: function (target, key, receiver) { console.log(`getting ${key}!`); return Reflect.get(target, key, receiver); }, set: function (target, key, value, receiver) { console.log(`setting ${key}!`); return Reflect.set(target, key, value, receiver); } }); //上面代码对一个空对象...

2019-01-13

18分钟阅读

教程

Set 和 Map 数据结构

Set 和 Map 数据结构Set基本用法ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); } // 2 3 5 4 //通过add方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。Set 函数可以接受一个数组作为参数，用来初始化。// 例一 const set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] // 例二 const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]); items.size // 5 // 例三 function divs () { return [...document.querySelectorAll('div')]; ...

2019-01-13

32分钟阅读

教程

Symbol

Symbol为啥需要SymbolES5里面对象的属性名都是字符串，如果你需要使用一个别人提供的对象，你对这个对象有哪些属性也不是很清楚，但又想为这个对象新增一些属性，那么你新增的属性名就很可能和原来的属性名发送冲突，显然我们是不希望这种情况发生的。所以，我们需要确保每个属性名都是独一无二的，这样就可以防止属性名的冲突了。因此，ES6里就引入了Symbol，用它来产生一个独一无二的值。Symbol是什么Symbol实际上是ES6引入的一种原始数据类型，除了Symbol，JavaScript还有其他6种数据类型，分别是Undefined、Null、Boolean、String、Number、对象，这6种数据类型都是ES5中就有的。怎么生成一个Symbol类型的值既然我们已经知道了Symbol是一种原始的数据类型，那么怎么生成这种数据类型的值呢？Symbol值是通过Symbol函数生成的，如下：let s = Symbol(); console.log(s); // Symbol() typeof s; // "symbol"Symbol函数前不能用newSym...

2019-01-13

14分钟阅读