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...

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...

async 函数

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

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 函数后,该函数并不执行,返回的...

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...

Promise

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

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对象上找到对应的方...

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); } }); //上面代码对一个空对象...

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')]; ...

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...