前言 (介绍 ECMAScript)

最后 JavaScript 语言有 2 份规范：

ECMA-262：主规范，由 ECMA 国内组织（Ecma International）负责管理（为了让最后的JavaScript 与最后的 JScript 能遵循同一套规范倒退而诞生的 ECMAScript ，正好排到了作为 Ecma 的 262 号规范，所以失去 ECMA-262 编号。）

ISO/IEC 16262：第二规范，由国际标准化组织（ISO，International Organization for Standardization）和国内电子技术委员会（IEC，International Electrotechnical Commission）负责管理

出于商标版权的起因，标准规范中将这门语言称为 ECMAScript ，所以原则上 JavaScript 与 ECMAScript 指的是同一个货色，但有时也会加以辨别：

  • JavaScript：指语言及其实现
  • ECMAScript：指语言规范及语言版本，比方 ES6 示意语言（规范）的第 6 版

ECMAScript 倒退历史

  • ECMAScript 1（1997 年 6 月）：标准第一版
  • ECMAScript 2（1998 年 6 月）：为了同步 ISO 规范，引入了一些小更新
  • ECMAScript 3（1999 年 12 月）：减少了正则表达式、字符串解决、管制语句（do-while、switch）、异样解决（try-catch）等泛滥外围个性
  • ECMAScript 4（2008 年 7 月破除)：原本是一次大规模降级（动态类型、模块、命名空间等），但跨度过大，呈现了一致，最终没能推广应用
  • ECMAScript 5（2009 年 12 月）：变动不大，加了一些规范库个性和严格模式
  • ECMAScript-5.1（2011 年 6 月）：又一次小更新，为了同步 ISO 规范
  • ECMAScript 6（2015 年 6 月）：一大波更新，实现了当年 ES4 的许多构想，并正式改为按年份命名标准版本
  • ECMAScript 2016（2016 年 6 月）：第一个年度版本，与 ES6 相比，公布周期较短，新个性也绝对少些
  • ECMAScript 2017（2017 年 6 月）：第二个年度版本...
当前的 ECMAScript 版本（ES2018、ES2019、ES2020 等）都在 6 月正式获准失效

开始 （聚焦 ES6）

这里援用 阮一峰 老师的 ES6规范入门 一书中的总结：ES6 既是一个历史名词，也是一个泛指，含意是 5.1 版本当前的 JavaScript 的下一代规范，涵盖了 ES2015、ES2016、ES2017 等，而 ES2015 则是正式名称，特指当年公布的正式版本的语言规范 市面上提到的 ES6 个别是指 ES2015 规范，但有时也是泛指 下一代 JavaScript

本文次要解说以下内容:

  • 块级作用域（Block scoping，ES2015）
  • 解构（Destructuring，ES2015）
  • 箭头函数（Arrow Functions，ES2015）
  • 模板字符串（template string，ES2015）
  • 残余参数 / 开展语法（Rest and spread parameters，ES2015）
  • 对象字面量简写语法（Object shorthand，ES2015）
  • 数组实例的 includes() （ES2016）
  • Async/await 异步语法 (ES2017)

块级作用域

为什么须要块级作用域?

ES5 只有全局作用域和函数作用域，没有块级作用域，这导致很多场景不合理。

  • 第一种场景，内层变量可能会笼罩外层变量。
var tmp = new Date()function fn() {  console.log(tmp)  if (false) {    var tmp = 'hello world'  }}fn() // undefined

以上代码的原意是， if 代码块的内部应用外层的 tmp 变量，外部应用内层的 tmp 变量。然而，函数 fn 执行后，输入后果为 undefined ，起因在于变量晋升导致内层的 tmp 变量笼罩了外层的 tmp 变量。

  • 第二种场景，用来计数的循环变量泄露为全局变量。
var s = 'hello'for (var i = O; i < s.length; i++) {  console.log(s[i])}console.log(i) // 5

下面的代码中，变量 i 只用来管制循环，然而循环完结后，它并没有隐没，而是泄露成了全局变量。

let 实际上为 JavaScript 新增了块级作用域。

function fl() {  let n = 5  if (true) {    let n = 10  }  console.log(n) // 5}

下面的函数有两个代码块，都申明了变量 n，运行后输入 5 。这示意外层代码块不受内层代码块的影响。如果应用 var 定义变量 ，最初输入的值就是 10

那么咱们能利用块级作用域做什么呢？

咱们先来做道面试题

for (var i = 0; i < 5; i++) {  setTimeout(() => {    console.log(i)  }, 1000)}// 5 5 5 5 5

改成 ES6 中的 let

for (let i = 0; i < 5; i++) {  setTimeout(() => {    console.log(i)  }, 1000)}// 0 1 2 3 4

看到这，置信聪慧的你曾经了解块级作用域的益处了 O(∩_∩)O

那么 ES5 能不能实现 块级作用域 的成果呢? 能够的，咱们能够利用闭包

for (var i = 0; i < 5; i++) {  ;(function (index) {    setTimeout(() => {      console.log(index)    }, 1000)  })(i)}// 0 1 2 3 4

解构

解构 ：是将一个数据结构合成为更小的局部的过程。ES6 中，从数组和对象中提取值，对变量进行赋值。

那么解构有什么用途呢？

  1. 能够大大的简化变量申明操作。
// ES5var foo = 1var bar = 2var baz = 3// ES6let [foo, bar, baz] = [1, 2, 3]
  1. 变量替换：看起来如同镜像。赋值语句的左侧的解构模式，右侧是长期创立的数组字面量。x 被赋值为数组中的 y，y 被赋值为数组中的 x。
let x = 1let y = 2;[x, y] = [y, x]// x = 2, y = 1
  1. 对象解构
var obj = { x: 1, y: 2, c: 1 }let { x, y } = obj// x = 1// y = 2
  1. 字符串解构
const [a, b, c, d, e] = 'hello'// a => h// b => e// c => l// d => l// e => o
  1. 函数参数解构
const xueyue = {  name: '雪月',  age: 18,}function getAge({ name, age }) {  return `${name}往年${age}岁`}getAge(xueyue) // 雪月往年18岁

箭头函数

ES6 容许应用箭头 => 定义函数

var f = v => v// 等同于 ES5 的var f = function (v) {  return v}

如果箭头函数不须要参数或须要多个参数，就应用圆括号代表参数局部。

var f = () => 5// 等同于 ES5 的var f = function () {  return 5}var sum = (numl, num2) => numl + num2// 等同于 ES5 的var sum = function (numl, num2) {  return numl + num2}

箭头函数能够与解构联合应用。

canst full = ({ first , last }) => first + ' ' + last;// 等同于 ES5 的function full(person) {  return person.first + ' ' + person.last;}

箭头函数使得表白更加简洁

const isEven = n => n % 2 === 0const square = n => n * nvar result = values.sort((a, b) => a - b)// 等同于 ES5 的var result = values.sort(function (a, b) {  return a - b})

下面代码只用了两行，就定义了两个简略的工具函数。如果不必箭头函数，可能就要占用多行，而且还不如当初这样写醒目。

箭头函数应用留神点

  1. 函数体内的 this 对象，就是定义时所在的对象，而不是应用时所在的对象。
  2. 不能够当作构造函数，也就是说，不能够应用 new 命令，否则会抛出一个谬误。
  3. 不能够应用 arguments 对象，该对象在函数体内不存在。如果要用，能够用 rest 参数代替。
  4. 不能够应用 yield 命令，因而箭头函数不能用作 Generator 函数。

下面四点中，第一点尤其值得注意。this 对象的指向是可变的，然而在箭头函数中，它是固定的。

// ES6function foo() {  setTimeout(() => {    console.log('id:', this.id)  }, 100)}// 转换成ES5function foo() {  var _this = this  setTimeout(function () {    console.log('id:', _this.id)  }, 100)}

下面代码中，转换后的 ES5 版本分明地阐明了，箭头函数外面基本没有本人的 this，而是援用外层的 this。

模板字符串

模板字符串（ template string ）是增强版的字符串 ，用反引号 (`) ` 标识 。它能够当作一般字符串应用，也能够用来定义多行字符串，或者在字符串中嵌入变量。
const { log } = consoleconst name = '雪月'const age = 18// 一般字符串拼接const result = name + '往年' + age + '岁'// 应用模板字符串const result2 = `${name}往年${age}岁`log(result) // 雪月往年18岁log(result2) // 雪月往年18岁// ${} 大括号能够放入任意的 JavaScript 表达式，能够进行运算const result3 = `${name}往年${age * 2}岁`log(result3) // 雪月往年36岁

残余参数 / 开展语法

ES6 引入了 rest 参数（模式为...变量名），用于获取函数的多余参数，这样就不须要应用 arguments 对象了。 rest 参数搭配的变量是一个数组，该变量将多余的参数放入其中。

function sortNumbers() {  return Array.prototype.slice.call(arguments).sort()}// 应用 restconst sortNumbers = (...numbers) => numbers.sort()

比拟下面的两种写法能够发现， rest 参数的写法更天然也更简洁。

扩大运算符（ spread ）是三个点（...） 如同 rest 参数的逆运算 将一个数组转为用逗号分隔的参数序列

console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5

上面是扩大运算符取代 apply 办法的一个理论例子 利用 Math.max 办法简化求出数组中的最大元素。

// ESS 的写法Math.max.apply(null, [14, 3, 77])// ES6 的写法Math.max(...[14, 3, 77])// 等同于Math.max(14, 3, 77)

扩大运算符提供了数组合并的新写法。

//  ESS;[1, 2].concat(more)// ES6;[1, 2, ...more]

对象的扩大运算符（...）用于取出参数对象的所有可遍历属性，拷贝到以后对象之中。

let z = { a: 3, b: 'bb' }let n = { ...z }n // { a: 3, b: 'bb' }n === z // false

特地留神： ...扩大对象，只能做到当对象属性是 根本数据类型 才是 深拷贝，如果是 援用数据类型，那就是浅拷贝。

let z = { a: 3, b: 'bb', c: { name: 'ccc' } }let n = { ...z }n // { a: 3, b: 'bb', c: { name: 'ccc' } }n === z // falsen.c === z.c // true// n.c 跟 z.c 是同一个援用地址

对象字面量简写语法

const name = '雪月'// ES5写法const obj = {  name: name,  f: function () {    console.log(this.name)  },}// ES6简写const obj2 = {  name,  f() {    console.log(this.name)  },}obj.f() // 雪月obj2.f() // 雪月

应用 vue 的同学是不是感到很相熟

new Vue({  el: '#app',  data() {    return {      list: [],    }  },})

数组实例的 includes()

Array.prototype.includes 办法返回一个布尔值，示意某个数组是否蕴含给定的值，与字符串的 includes 办法相似。ES2016 引入了该办法。

;[1, 2, 3].includes(2) // true;[1, 2, 3].includes(4) // false;[1, 2, NaN].includes(NaN) // true

没有该办法之前，咱们通常应用数组的 indexOf 办法，查看是否蕴含某个值。

// ES5if (arr.indexOf(el) !== -1) {  // ...}// ES6if (arr.includes(el)) {  // ...}// 那么 indexOf 能不能做到相似于 includes 的写法呢？ 咱们能够利用 ~ 位运算符if (~arr.indexOf(el)) {  // ...}

indexOf 办法有两个毛病，一是不够语义化，它的含意是找到参数值的第一个呈现地位，所以要去比拟是否不等于-1，表白起来不够直观。二是，它外部应用严格相等运算符（===）进行判断，这会导致对 NaN 的误判。

;[NaN].indexOf(NaN)// -1

includes 应用的是不一样的判断算法，就没有这个问题

;[NaN].includes(NaN)// true

Async/await 异步语法

ES2017 规范引入了 async 函数，使得异步操作变得更加不便。

async 函数是什么？一句话，它就是 Generator 函数的语法糖。

async function getTitle(url) {  let response = await fetch(url)  let html = await response.text()  return html.match(/<title>([\s\S]+)<\/title>/i)[1]}getTitle('https://tc39.github.io/ecma262/').then((res) => console.log(res))

下面代码中，函数 getTitle 外部有三个操作：抓取网页、取出文本、匹配页面题目。只有这三个操作全副实现，才会执行 then 办法外面的 console.log

完结（意犹未尽）

文章介绍了 ES6 罕用的一些语法以及应用场景; 然而 ES6 内容远不止于此，感兴趣的同学能够去 阮一峰老师的 ES6 入门教程 一书中查看具体内容。如果您认可这本书，也能够去正版渠道购买书籍。这样能够使出版社不因出版开源书籍而亏钱，进而激励更多的作者开源本人的书籍。

后记（列举API）

还有很多 ES6 实用的 API 我就简略提及一下，敌人们看看平时是否有用到

;[1, 4, -5, 10].find(n => n < 0)// -5;[1, 5, 10, 15].findIndex((value, index, arr) => value > 9) // 2;[1, 2, [3, [4, 5]]].flat()// [1, 2, 3, [4, 5]];[1, 2, [3, [4, 5]]].flat(2)// [1, 2, 3, 4, 5]// 应用 reduce 求和; reduce性能及其弱小 ! yyds;[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){  return accumulator + currentValue;}); // 10// ES2017 引入了跟 Object.keys 配套的 Object.values 和 Object.entries，作为遍历一个对象的补充伎俩，// 供 for...of 循环应用。let { keys, values, entries } = Object;let obj = { a: 1, b: 2, c: 3 };for (let key of keys(obj)) {  console.log(key); // 'a', 'b', 'c'}for (let value of values(obj)) {  console.log(value); // 1, 2, 3}for (let [key, value] of entries(obj)) {  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]}