ES6+ 详解教程
- 前言
- 《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性。
- ECMAScript 6 简介
- ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
- let 和 const 命令
- ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。const声明一个只读的常量。一旦声明,常量的值就不能改变。
- 变量的解构赋值
- 数组的解构赋值基本用法ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。以前,为变量赋值,只能直接指定值。let a = 1;let b = 2;let c = 3;ES6 允许写成下面这样。let[a, b, c]=[1, 2, 3];上面
- 字符串的扩展
- 本章介绍 ES6 对字符串的改造和增强,下一章介绍字符串对象的新增方法。字符的 Unicode 表示法ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。"\u0061"//"a"但是,这种表示法只限于码点在\u0000~\u
- 字符串的新增方法
- 章介绍字符串对象的新增方法。String.fromCodePoint()ES5 提供String.fromCharCode()方法,用于从 Unicode 码点返回对应字符,但是这个方法不能识别码点大于0xFFFF的字符。String.fromCharCode(0x20BB7)//"ஷ"上面代码中,
- 正则的扩展
- RegExp 构造函数在 ES5 中,RegExp构造函数的参数有两种情况。第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag)。var regex = new RegExp('xyz','i');//等价于var regex =/xyz/i;第二种情况是,参数是一个正则表示
- 数值的扩展
- 二进制和八进制表示法ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。0b111110111 === 503 // true0o767 === 503 // true从 ES5 开始,在严格模式之中,八进制就不再允许使用前缀0表示,ES6 进一步明确,要使用前
- 数组的扩展
- 扩展运算符含义扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1,...[2, 3, 4], 5)// 1 2 3 4 5[...documen
- 对象的扩展
- 对象(object)是 JavaScript 最重要的数据结构。ES6 对它进行了重大升级,本章介绍数据结构本身的改变,下一章介绍Object对象的新增方法。属性的简洁表示法ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。const foo ='bar';co
- 对象的新增方法
- 本章介绍 Object 对象的新增方法。Object.is()ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。JavaScript 缺乏一种运算,在所有环境中,只要两个值是一样的
- 运算符的扩展
- 本章介绍 ES6 后续标准添加的一些运算符。指数运算符ES2016 新增了一个指数运算符(**)。2 ** 2 // 42 ** 3 // 8这个运算符的一个特点是右结合,而不是常见的左结合。多个指数运算符连用时,是从最右边开始计算的。//相当于 2 **(3 ** 2)2 ** 3 ** 2//
- Symbol 数据类型
- 概述ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symb
- Set 和 Map 数据结构
- Set基本用法ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for(
- Proxy 代理
- 概述Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写
- Reflect 映射
- 概述Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。(1)将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上。现阶段,某些方法同时在Object和Re
- Promise 对象
- Promise 的含义Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步
- Iterator 和 for...of 循环
- Iterator(遍历器)的概念JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set。这样就有了四种数据集合,用户还可以组合使用它们,定义自己的数据结构,比如数组的成员是Map,Map的成员是对象。这样就需要一种统一的接口
- Generator 函数的语法
- 简介基本概念Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。本章详细介绍 Generator 函数的语法和 API,它的异步编程应用请看《Generator 函数的异步应用》一章。Generator 函数有多种理解角度。语法上,首先可以把它理解成,Gene
- Generator 函数的异步应用
- 异步编程对 JavaScript 语言太重要。JavaScript 语言的执行环境是“单线程”的,如果没有异步编程,根本没法用,非卡死不可。本章主要介绍 Generator 函数如何完成异步操作。传统方法ES6 诞生以前,异步编程的方法,大概有下面四种。回调函数事件监听发布/订阅Promise 对象
- async、await 异步函数
- 含义ES2017 标准引入了 async 函数,使得异步操作变得更加方便。async 函数是什么?一句话,它就是 Generator 函数的语法糖。前文有一个 Generator 函数,依次读取两个文件。const fs = require('fs');const readFile = functi
- Class 的基本语法
- 类的由来JavaScript 语言中,生成实例对象的传统方法是通过构造函数。下面是一个例子。function Point(x, y){this.x = x; this.y = y;}Point.prototype.toString = function(){return '('+ this.x +'
- Class 的继承
- 简介Class 可以通过extends关键字实现继承,让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承,要清晰和方便很多。class Point{}class ColorPoint extends Point{}上面示例中,Point是父类,ColorPoint是子类,它通
- Module 的语法
- 概述历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持
- Module 的加载实现
- 上一章介绍了模块的语法,本章介绍如何在浏览器和 Node.js 之中加载 ES6 模块,以及实际开发中经常遇到的一些问题(比如循环加载)。浏览器加载传统方法HTML 网页中,浏览器通过<script>标签加载 JavaScript 脚本。<!--页面内嵌的脚本--><s
- 异步遍历器
- 同步遍历器的问题《遍历器》一章说过,Iterator 接口是一种数据遍历的协议,只要调用遍历器对象的next方法,就会得到一个对象,表示当前遍历指针所在的那个位置的信息。next方法返回的对象的结构是{value, done},其中value表示当前的数据的值,done是一个布尔值,表示遍历是否结束
- ArrayBuffer 对象
- ArrayBuffer对象、TypedArray视图和DataView视图是 JavaScript 操作二进制数据的一个接口。这些对象早就存在,属于独立的规格(2011 年 2 月发布),ES6 将它们纳入了 ECMAScript 规格,并且增加了新的方法。它们都是以数组的语法处理二进制数据,所以统
- Decorator 装饰器
- [说明] Decorator 提案经历了重大的语法变化,目前(2022年)处于第三阶段,定案之前不知道是否还有变化。本章现在属于草稿阶段,凡是标注“新语法”的章节,都是基于当前的语法,不过没有详细整理,只是一些原始材料;未标注“新语法”的章节基于以前的语法,是过去遗留的稿子。之所以保留以前的内容,有
- 编程风格
- 本章探讨如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的、易于阅读和维护的代码。多家公司和组织已经公开了它们的风格规范,下面的内容主要参考了 Airbnb 公司的 JavaScript 风格规范。块级作用域(1)let 取代 varES6 提出
- 读懂 ECMAScript 规格
- 概述规格文件是计算机语言的官方标准,详细描述语法规则和实现方法。一般来说,没有必要阅读规格,除非你要写编译器。因为规格写得非常抽象和精炼,又缺乏实例,不容易理解,而且对于解决实际的应用问题,帮助不大。但是,如果你遇到疑难的语法问题,实在找不到答案,这时可以去查看规格文件,了解语言标准是怎么说的。规格