（8）ECMAScript语法详解

本系列教程目录：Vue3+Element Plus全套学习笔记-目录大纲

文章目录

第2章 ECMAScript
- 2.1 ECMAScript 的发展历史
- 2.2 什么是ES6
- 2.3 ES6语法新特性
- - 2.3.1 变量声明let
  - 2.3.2 常量声明
  - 2.3.3 模板字符串
  - 2.3.4 函数默认参数
  - 2.3.5 箭头函数
  - 2.3.6 对象初始化简写
  - 2.3.7 解构
  - 2.3.8 Spread Operator
  - 2.3.9 import 和 export
  - - 1）安装babel
    - 2）使用import和export

第2章 ECMAScript

ECMAScript 是一种由 Ecma 国际（Ecma International，前身为欧洲计算机制造商协会），在标准 ECMA-262 中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMA-262 标准的实现和扩展。

这种语言在万维网上应用广泛，被视为网页浏览器中的核心语言。ECMAScript 的发展历程中，经历了多个版本的更新和演进。下面我们将逐一介绍这些版本。

尽管 JavaScript 和 JScript 与 ECMAScript 兼容，但包含超出 ECMAScript 的功能。

2.1 ECMAScript 的发展历史

版本	发表日期	与前版本的差异
1	1997年6月	首版
2	1998年6月	格式修正，以使得其形式与ISO/IEC16262国际标准一致
3	1999年12月	新增强大的正则表达式，更好的词法作用域链处理，新的控制指令，异常处理，错误定义更加明确，数据输出的格式化及其它改变
4	放弃	由于关于语言的复杂性出现分歧，第4版本被放弃。其中的部分成为了第5版本及Harmony的基础；由ActionScript实现
ES5	2009年12月	新增“严格模式（strict mode）”，一个子集用作提供更彻底的错误检查,以避免结构出错。澄清了许多第3版本的模糊规范，并适应了与规范不一致的真实世界实现的行为。增加了部分新功能，如getters及setters，支持JSON以及在对象属性上更完整的反射
5.1	2011年6月	ECMAScript标5.1版形式上完全一致于国际标准ISO/IEC 16262:2011。
ES6	2015年6月	ECMAScript 2015（ES2015），第 6 版，最早被称作是 ECMAScript 6（ES6）。作为最早的 ECMAScript Harmony 版本，也被叫做ES6 Harmony。
7	2016年6月	ECMAScript 2016（ES2016），第 7 版，多个新的概念和语言特性
8	2017年6月	ECMAScript 2017（ES2017），第 8 版，多个新的概念和语言特性
9	2018年6月	ECMAScript 2018 （ES2018），第 9 版，包含了异步循环，生成器，新的正则表达式特性和 rest/spread 语法。
10	2019年6月	ECMAScript 2019 （ES2019），第 10 版
11	2020年6月	ECMAScript 2020 （ES2020），第 11 版
12	2021年	ECMAScript 2021 （ES2021），第 12 版
13	2022年	ECMAScript 2022 （ES2022），第 13 版
14	2023年	ECMAScript 2023 （ES2023），第 14 版

ECMAScript官网：https://ecma-international.org/publications-and-standards/standards/ecma-262/

2.2 什么是ES6

编程语言JavaScript是ECMAScript的实现和扩展。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的[Web API]，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似[node.js]的非浏览器环境。

ECMAScript标准的历史版本分别是1、2、3、5。

那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。

ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话：ECMAScript是一门充满活力的语言，并在不断进化中。未来版本的规范中将持续进行重要的技术改进。

ECMAScript 6.0（以下简称ES6）2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ES6的特性比较多，在 ES5 发布近 6 年（2009-11 至 2015-6）之后才将其标准化。两个发布版本之间时间跨度很大，所以ES6中的特性比较多。在这里列举几个常用的：

类
模块化
箭头函数
函数参数默认值
模板字符串
解构赋值
延展操作符
对象属性简写
Promise
Let与Const

2.3 ES6语法新特性

2.3.1 变量声明let

我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如

function show(flag){if(flag){var test="hello";}console.log(test);
}show(true)

以上的代码实际上是:

function show(flag){var test;		//变量提升if(flag){test="hello";}console.log(test);
}show(true)

所以不用关心flag是否为true or false。实际上，无论如何test都会被创建声明。

接下来ES6主角登场：

我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？在一个函数内部，在一个代码块内部。看以下代码

function show(flag){if(flag){// var test="hello";let test='hello';}//在这里访问不到console.log(test)
}
show(true)

2.3.2 常量声明

const 用于声明常量，看以下代码

//定义常量
const name='xiaohui';//常量不允许重新赋值
name='xiaolan'console.log(name)

2.3.3 模板字符串

es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

let str1='xiaolan';
let str2='xiaobiao';//普通拼接方式
console.log(str1+'-hello-'+str2)//ES6 模板字符串
console.log(`${str1}-hello-${str2}`)

第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

//ES6之前多行字符串
let str3 = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\n\
bbbbbbb\n\
ccccccc'//ES6多行字符串
let str4 =`asdasdasdasd
asdasdasdasd
asdasdsadas`;console.log(str3)
console.log('------------------------')
console.log(str4)

2.3.4 函数默认参数

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。看例子代码

function show(num=30){          //给函数参数默认值console.log(num)
}show()      //30
show(50)      //50

2.3.5 箭头函数

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。

箭头函数最直观的三个特点。

不需要function关键字来创建函数
省略return关键字
继承当前上下文的 this 关键字

看下面代码：

function test1(a, b) {return a + b;
}//ES6定义函数
test2 = (a, b) => {return a + b;
}//如果函数中就一句话那么return可以省略
test3 = (a, b) => a + b;console.log(test1(10, 20));
console.log(test2(10, 20));
console.log(test3(10, 20));

2.3.6 对象初始化简写

ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如

function showBook(name,author){return {name:name,author:author}
}//ES6新写法：如果key和val一样的话可以省略
function showBook2(name,author){return {name,author}
}console.log(showBook('《论语》','孔子'))
console.log(showBook2('《道德经》','老子'))

2.3.7 解构

数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程。

ES5我们提取对象中的信息形式如下

const book = {name: '《孟子》', author: '孟子'
}
const name = book.name;
const book = book.author;
console.log(name + ' --- ' + author);

是不是觉得很熟悉，没错，在ES6之前我们就是这样获取对象信息的，一个一个获取。现在，ES6的解构能让我们从对象或者数组里取出数据存为变量，例如

const book = {name: '《大学》', author: '曾子'
}//ES6之前取值方式
// var name=book.name;
// var author=book.author;//ES6新方式,相当于同时定义了两个变量,分别取出person中对应的值
var {name, address} = book;console.log(name, author)var nums = [32, 54, 43, 49];
var [num1, num2, num3] = nums;console.log(num1);          //nums[0]
console.log(num2);          //nums[1]
console.log(num3);          //nums[2]

2.3.8 Spread Operator

ES6中另外一个好玩的特性就是Spread Operator【传播操作符】，也是三个点儿…接下来就展示一下它的用途。组装对象或者数组

const books = ['大学', '中庸'];
const books2 = [...books, '论语', '孟子'];
console.log(books2)     // [ '大学', '中庸', '论语', '孟子' ]const user1 = {name: 'xiaohui', password:'admin'}
const user1 = {...info, age: 22,address: '湖北荆州'}
console.log(info2)      // { name: 'xiaohui',password:'admin', age: 22, address: '湖北荆州' }

2.3.9 import 和 export

1）安装babel

ES6+很多高级功能node是不支持的，就需要使用babel转换成ES5

（1）babel转换配置,项目根目录添加.babelrc 文件

{"presets" : ["es2015"]
}

（2）安装es6转换模块

npm install babel-preset-es2015 --save-dev

（3）全局安装命令行工具

npm install babel-cli -g

（4）将ES6语法转换为ES5：

# src: 源代码目录
# dist: 转码之后的目录
babel src -d dist

2）使用import和export

import用于导入模块、export用于导出模块。

ES6导入、导出的用法比较多样化，可以选择自己喜欢的用法来导入导出。

第一种方式：

创建一个demo01文件夹，准备一个demo01.js

let show=function(){console.log("千里之行，始于足下。")
}export {show}            //将方法导出

创建demo02.js，导入demo01

import {fun} from './demo01'       //导入其他模块的方法fun()       //调用导入进来的方法

将ES6语法转换为ES5：

babel demo01 -d demo01_dist

执行程序：

node ./demo01_dist/demo02

第二种方式：

修改demo01.js：

export function showContent_01() {console.log('上善若水，水善利万物而不争。')
}
export function showContent_02() {console.log('吾生也有涯，而知也无涯。')
}

修改demo02.js：

//只取需要的方法即可，多个方法用逗号分隔
import { showContent_01, showContent_02 } from "./demo01"
showContent_01()
showContent_02()

将ES6语法转换为ES5：

babel demo01 -d demo01_dist

执行程序：

node ./demo01_dist/demo02

第三种方式：

修改demo01.js：

export default {showContent_01() {console.log('夫唯不争，故天下莫能与之争。')},showContent_02() {console.log('知者不言，言者不知。')}
}

修改demo02.js：

import content from "./demo01"
content.showContent_01()
content.showContent_02()

将ES6语法转换为ES5：

babel demo01 -d demo01_dist

执行程序：

node ./demo01_dist/demo02