（8）ECMAScript语法详解

张国伟  论坛元老 | 6 天前 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1518|帖子 1518|积分 4554

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

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

  
第2章 ECMAScript

ECMAScript 是一种由 Ecma 国际（Ecma International，前身为欧洲计算机制造商协会），在标准 ECMA-262 中定义的脚本语言规范。这种语言在万维网上应用广泛，它通常被称为 JavaScript 或 JScript，但现实上后两者是 ECMA-262 标准的实现和扩展。
这种语言在万维网上应用广泛，被视为网页浏览器中的核心语言。ECMAScript 的发展进程中，经历了多个版本的更新和演进。下面我们将逐一先容这些版本。
尽管 JavaScript 和 JScript 与 ECMAScript 兼容，但包含超出 ECMAScript 的功能。
2.1 ECMAScript 的发展历史

版本发表日期与前版本的差异11997年6月首版21998年6月格式修正，以使得其形式与ISO/IEC16262国际标准一致31999年12月新增强大的正则表达式，更好的词法作用域链处理， 新的控制指令，异常处理，错误定义更加明确，数据输出的格式化及其它改变4放弃由于关于语言的复杂性出现分歧，第4版本被放弃。 此中的部分成为了第5版本及Harmony的根本；由ActionScript实现ES52009年12月新增“严格模式（strict mode）”，一个子集用作提供更彻底的错误查抄,以避免结构堕落。 澄清了很多第3版本的暗昧规范，并适应了与规范不一致的真实天下实现的行为。 增长了部分新功能，如getters及setters，支持JSON以及在对象属性上更完整的反射5.12011年6月ECMAScript标5.1版形式上完全一致于国际标准ISO/IEC 16262:2011。ES62015年6月ECMAScript 2015（ES2015），第 6 版，最早被称作是 ECMAScript 6（ES6）。 作为最早的 ECMAScript Harmony 版本，也被叫做ES6 Harmony。72016年6月ECMAScript 2016（ES2016），第 7 版，多个新的概念和语言特性82017年6月ECMAScript 2017（ES2017），第 8 版，多个新的概念和语言特性92018年6月ECMAScript 2018 （ES2018），第 9 版，包含了异步循环，天生器，新的正则表达式特性和 rest/spread 语法。102019年6月ECMAScript 2019 （ES2019），第 10 版112020年6月ECMAScript 2020 （ES2020），第 11 版122021年ECMAScript 2021 （ES2021），第 12 版132022年ECMAScript 2022 （ES2022），第 13 版142023年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关键字声明变量。无论声明在那边，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升比方
  1. function show(flag){
  2.     if(flag){
  3.         var test="hello";
  4.     }
  5.     console.log(test);
  6. }
  8. show(true)
复制代码
以上的代码现实上是:
  1. function show(flag){
  2.     var test;                //变量提升
  3.     if(flag){
  4.         test="hello";
  5.     }
  6.     console.log(test);
  7. }
  9. show(true)
复制代码
所以不用关心flag是否为true or false。现实上，无论怎样test都会被创建声明。
接下来ES6主角登场：
我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？在一个函数内部 ，在一个代码块内部。看以下代码
  1. function show(flag){
  2.     if(flag){
  3.         // var test="hello";
  4.         let test='hello';
  5.     }
  6.     //在这里访问不到
  7.     console.log(test)
  8. }
  9. show(true)
复制代码
2.3.2 常量声明

const 用于声明常量，看以下代码
  1. //定义常量
  2. const name='xiaohui';
  4. //常量不允许重新赋值
  5. name='xiaolan'
  7. console.log(name)
复制代码
2.3.3 模板字符串

es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。
第一个用途，根本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
  1. let str1='xiaolan';
  2. let str2='xiaobiao';
  4. //普通拼接方式
  5. console.log(str1+'-hello-'+str2)
  7. //ES6 模板字符串
  8. console.log(`${str1}-hello-${str2}`)
复制代码
第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
  1. //ES6之前多行字符串
  2. let str3 = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\n\
  3. bbbbbbb\n\
  4. ccccccc'
  6. //ES6多行字符串
  7. let str4 =`asdasdasdasd
  8. asdasdasdasd
  9. asdasdsadas`;
  11. console.log(str3)
  12. console.log('------------------------')
  13. console.log(str4)
复制代码
2.3.4 函数默认参数

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时利用。看例子代码
  1. function show(num=30){          //给函数参数默认值
  2.     console.log(num)
  3. }
  5. show()      //30
  6. show(50)      //50
复制代码
2.3.5 箭头函数

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特点。

  • 不需要function关键字来创建函数
  • 省略return关键字
  • 继承当前上下文的 this 关键字
看下面代码：
  1. function test1(a, b) {
  2.     return a + b;
  3. }
  5. //ES6定义函数
  6. test2 = (a, b) => {
  7.     return a + b;
  8. }
  10. //如果函数中就一句话那么return可以省略
  11. test3 = (a, b) => a + b;
  13. console.log(test1(10, 20));
  14. console.log(test2(10, 20));
  15. console.log(test3(10, 20));
复制代码
2.3.6 对象初始化简写

ES5我们对于对象都是以键值对的形式誊写，是有可能出现键值对重名的。比方
  1. function showBook(name,author){
  2.     return {
  3.         name:name,
  4.         author:author
  5.     }
  6. }
  8. //ES6新写法：如果key和val一样的话可以省略
  9. function showBook2(name,author){
  10.     return {
  11.         name,
  12.         author
  13.     }
  14. }
  16. console.log(showBook('《论语》','孔子'))
  17. console.log(showBook2('《道德经》','老子'))
复制代码
2.3.7 解构

数组和对象是JS中最常用也是最紧张表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程。
ES5我们提取对象中的信息形式如下
  1. const book = {
  2.     name: '《孟子》', author: '孟子'
  3. }
  4. const name = book.name;
  5. const book = book.author;
  6. console.log(name + ' --- ' + author);
复制代码
是不是觉得很熟悉，没错，在ES6之前我们就是这样获取对象信息的，一个一个获取。如今，ES6的解构能让我们从对象或者数组里取出数据存为变量，比方
  1. const book = {
  2.     name: '《大学》', author: '曾子'
  3. }
  5. //ES6之前取值方式
  6. // var name=book.name;
  7. // var author=book.author;
  9. //ES6新方式,相当于同时定义了两个变量,分别取出person中对应的值
  10. var {name, address} = book;
  12. console.log(name, author)
  14. var nums = [32, 54, 43, 49];
  15. var [num1, num2, num3] = nums;
  17. console.log(num1);          //nums[0]
  18. console.log(num2);          //nums[1]
  19. console.log(num3);          //nums[2]
复制代码
2.3.8 Spread Operator

ES6中另外一个好玩的特性就是Spread Operator【传播操纵符】，也是三个点儿…接下来就展示一下它的用途。 组装对象或者数组
  1. const books = ['大学', '中庸'];
  2. const books2 = [...books, '论语', '孟子'];
  3. console.log(books2)     // [ '大学', '中庸', '论语', '孟子' ]
  5. const user1 = {name: 'xiaohui', password:'admin'}
  6. const user1 = {...info, age: 22,address: '湖北荆州'}
  7. console.log(info2)      // { name: 'xiaohui',password:'admin', age: 22, address: '湖北荆州' }
复制代码
2.3.9 import 和 export

1）安装babel

ES6+很多高级功能node是不支持的，就需要利用babel转换成ES5
（1）babel转换设置,项目根目次添加.babelrc 文件
  1. {
  2.   "presets" : ["es2015"]
  3. }
复制代码
（2）安装es6转换模块
  1. npm install babel-preset-es2015 --save-dev
复制代码
（3）全局安装下令行工具
  1. npm install babel-cli -g
复制代码
（4）将ES6语法转换为ES5：
  1. # src: 源代码目录
  2. # dist: 转码之后的目录
  3. babel src -d dist
复制代码
2）利用import和export

import用于导入模块、export用于导出模块。
ES6导入、导出的用法比较多样化，可以选择自己喜好的用法来导入导出。


  • 第一种方式：
创建一个demo01文件夹，准备一个demo01.js
  1. let show=function(){
  2.     console.log("千里之行，始于足下。")
  3. }
  5. export {show}            //将方法导出
复制代码
创建demo02.js，导入demo01
  1. import {fun} from './demo01'       //导入其他模块的方法
  3. fun()       //调用导入进来的方法
复制代码
将ES6语法转换为ES5：
  1. babel demo01 -d demo01_dist
复制代码
实行程序：
  1. node ./demo01_dist/demo02
复制代码


  • 第二种方式：
修改demo01.js：
  1. export function showContent_01() {
  2.     console.log('上善若水，水善利万物而不争。')
  3. }
  4. export function showContent_02() {
  5.     console.log('吾生也有涯，而知也无涯。')
  6. }
复制代码
修改demo02.js：
  1. //只取需要的方法即可，多个方法用逗号分隔
  2. import { showContent_01, showContent_02 } from "./demo01"
  3. showContent_01()
  4. showContent_02()
复制代码
将ES6语法转换为ES5：
  1. babel demo01 -d demo01_dist
复制代码
实行程序：
  1. node ./demo01_dist/demo02
复制代码


  • 第三种方式：
修改demo01.js：
  1. export default {
  2.     showContent_01() {
  3.         console.log('夫唯不争，故天下莫能与之争。')
  4.     },
  5.     showContent_02() {
  6.         console.log('知者不言，言者不知。')
  7.     }
  8. }
复制代码
修改demo02.js：
  1. import content from "./demo01"
  2. content.showContent_01()
  3. content.showContent_02()
复制代码
将ES6语法转换为ES5：
  1. babel demo01 -d demo01_dist
复制代码
实行程序：
  1. node ./demo01_dist/demo02
复制代码



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

张国伟

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表