尚融宝06-ECMAScript基本介绍和使用

川长思鸟来 2023-10-11 21:14 6阅读 0赞

**目录**

一、ECMAScript

1、ECMA

2、ECMAScript

3、什么是 ECMA-262

4、ECMA-262 历史

5、ECMAScript 和 JavaScript 的关系

二、基本语法

1、let声明变量

2、const声明常量

3、解构赋值

4、模板字符串

5、声明对象简写

6、定义方法简写

7、参数的默认值

8、对象拓展运算符

9、箭头函数

10、Promise

--------------------

## **一、ECMAScript** ##

### 1、ECMA ###

ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际。

### 2、ECMAScript ###

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。

### 3、什么是 ECMA-262 ###

Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个

### 4、ECMA-262 历史 ###

ECMA-262（ECMAScript）历史版本查看网址

[ECMA-262 - Ecma International][]

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:177px;"> 第&nbsp;1&nbsp;版 </td> 
 <td style="vertical-align:top;width:183px;"> 1997&nbsp;年 </td> 
 <td style="vertical-align:top;width:480px;"> 制定了语言的基本语法 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:177px;"> 第&nbsp;2&nbsp;版 </td> 
 <td style="vertical-align:top;width:183px;"> 1998&nbsp;年 </td> 
 <td style="vertical-align:top;width:480px;"> 较小改动 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:177px;"> 第&nbsp;3&nbsp;版 </td> 
 <td style="vertical-align:top;width:183px;"> 1999&nbsp;年 </td> 
 <td style="vertical-align:top;width:480px;"> 引入正则、异常处理、格 式化输出等。IE&nbsp;开始支持 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:177px;"> 第&nbsp;4&nbsp;版 </td> 
 <td style="vertical-align:top;width:183px;"> 2007&nbsp;年 </td> 
 <td style="vertical-align:top;width:480px;"> 过于激进，未发布 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:177px;"> 第&nbsp;5&nbsp;版 </td> 
 <td style="vertical-align:top;width:183px;"> 2009&nbsp;年 </td> 
 <td style="vertical-align:top;width:480px;"> 引入严格模式、JSON，扩 展对象、数组、原型、字符串、日期方法 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:177px;"> 第&nbsp;6&nbsp;版 </td> 
 <td style="vertical-align:top;width:183px;"> 2015&nbsp;年 </td> 
 <td style="vertical-align:top;width:480px;"> 模块化、面向对象语法、 Promise、箭头函数、let、const、数组解构赋值等等 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:177px;"> 第 7&nbsp;版 </td> 
 <td style="vertical-align:top;width:183px;"> 2016&nbsp;年 </td> 
 <td style="vertical-align:top;width:480px;"> 幂运算符、数组扩展、 Async/await 关键字 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:177px;"> 第 8&nbsp;版 </td> 
 <td style="vertical-align:top;width:183px;"> 2017&nbsp;年 </td> 
 <td style="vertical-align:top;width:480px;"> Async/await、字符串扩展 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:177px;"> 第 9&nbsp;版 </td> 
 <td style="vertical-align:top;width:183px;"> 2018&nbsp;年 </td> 
 <td style="vertical-align:top;width:480px;"> 对象解构赋值、正则扩展 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:177px;"> 第 10&nbsp;版 </td> 
 <td style="vertical-align:top;width:183px;"> 2019&nbsp;年 </td> 
 <td style="vertical-align:top;width:480px;"> 扩展对象、数组方法 </td> 
 </tr> 
 <tr> 
 <td style="width:177px;"> ES.next </td> 
 <td style="width:183px;"> 动态指向下一个版本 </td> 
 <td style="width:480px;"> </td> 
 </tr> 
 </tbody> 
</table>

### 5、ECMAScript 和 JavaScript 的关系 ###

一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？

要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）

## 二、基本语法 ##

ES6相对之前的版本语法更严格，新增了面向对象的很多特性以及一些高级特性。本部分只学习项目开发中涉及到ES6的最少必要知识，方便项目开发中对代码的理解。

### 1、let声明变量 ###

创建文件夹02-ES6-demo，创建 01-let.js

// 1、var可以重复声明，let不可以
    var a = 1;
    var a = true
    console.log(a);
    let a = 1;
    let a = true; // 未编译已经提示出错
    console.log(a)
    
    // 2、var没用块级作用域，let具备块级作用域
    var f = true;
    if (f) {
        var a = 'yes'
        console.log(a);
    }
    console.log(a);  // 这里也可以输出yes
    
    var f = true;
    if (f) {
        let a = 'yes'
        console.log(a);
    }
    console.log(a); // let报错
    
    3.var和let都具备函数作用域
    
    function check() {
        var a = "yes"
        let b = "no"
    }
    console.log(a) // 报错
    console.log(b) // 报错
    
    // 4.不存在变量提升
    
    console.log(a) // 输出undefined
    var a
    
    console.log(a) // 报错：Cannot access 'a' before initialization
    let a

可以使用visual studio 打开集成终端

![6d2dfeb53827461785c6a7407f4d62fd.png][]

使用 **node 文件名** 执行脚本

![bf8f36548c5a4de1b0eabdb6b0ad46f6.png][]

### 2、const声明常量 ###

创建 02-const.js

//1. 初始化时需要赋值
    const A = "yes"
    //2. 初始化后值不能改变
    //A = "no" // 报错：Assignment to constant variable.
    //3. 命名规范：大写字母和下划线
    const CONSOLE_OUT = "out"
    
    //4. 当常量的地址不变时，可以添加值
    const TAME = ['zyt', 'zjy', 'czh']
    TAME.push('zyj')
    console.log(TAME)
    
    TAME = 100 // 报错：TypeError: Assignment to constant variable.

### 3、解构赋值 ###

创建 03-解构赋值.js

// 1.数组结构
    const F4 = ['小沈阳', '刘能', '赵四', '宋小宝']
    // let shenyang = F4[0]  //这种方式也可以，但是如果数组有多个元素需要解析并赋值的话那样太麻烦了
    // let liunneng = F4[1]
    let [shenyang, liunneng, zhaosi, songxiaobao] = F4 // 使用中括号
    console.log(shenyang)
    console.log(liunneng)
    console.log(zhaosi)
    console.log(songxiaobao)
    
    // 2.对象解析
    const zbs = {
        username: '赵本山',
        age: '不详',
        sex: '男',
        xiaopin: function () {
            console.log("演小品")
        }
    }
    // let username1 = zbs.username  // 这种方式取值不需要相同的变量名也可以,但是如果对象有多个元素需要解析并赋值的话那样太麻烦了
    let { username, sex, xiaopin } = zbs;  // 使用大括号，设置对应同名属性获取值,不同名获取不到值
    // console.log(username1)
    console.log(username)
    console.log(sex)
    xiaopin()

### 4、模板字符串 ###

创建 04-模板字符串.js

模板字符串相当于加强版的字符串，用反引号 \`，除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

// ES6 引入新的声明字符串的方式 『``』 '' ""
 //1. 声明
 let str1 = '我是一个字符串'
 let str2 = `我也是一个字符串`
 
 console.log(str1, typeof str1)
 console.log(str2, typeof str2)
 
 // 2.内容中可以直接出现换行符
 let list1 = `<ul>
 <li>沈腾</li>
 <li>玛丽</li>
 <li>贾玲</li>
 </ul>`
 // 使用单引号换行会报错
 let list2 = '<ul><li>沈腾</li><li>玛丽</li><li>贾玲</li></ul>' 
 console.log(list1)
 console.log(list2)
 
 // 3.变量拼接
 let name = '贾玲'
 let out = `我喜欢${name}这个演员`
 
 console.log(out)

### 5、声明对象简写 ###

创建 05-声明对象简写.js

let username = 'Tom'
    let age = 25
    let sing = function () {
        console.log('唱歌')
    }
    
    // 传统
    let person1 = {
        username: username,
        age: age,
        sing: sing
    }
    console.log(person1)
    person1.sing()
    
    // ES6：这样的书写更加简洁
    let person2 = {
        username,
        age,
        sing
    }
    console.log(person2)
    person2.sing()

### 6、定义方法简写 ###

创建 06-定义方法简写.js

// 传统
    let person1 = {
      sayHi: function () {
        console.log('Hi')
      },
    }
    person1.sayHi()
    
    // ES6
    let person2 = {
      sayHi() {
        console.log('Hi')
      },
    }
    person2.sayHi()

### 7、参数的默认值 ###

注意：函数在JavaScript中也是一种数据类型，JavaScript中没有方法的重载

创建 07-参数的默认值.js

//ES6 允许给函数参数赋值初始值
    //1. 形参初始值 具有默认值的参数
    function add(a, b, c = 0) {
      return a + b + c
    }
    let result = add(1, 2)
    console.log(result)
    
    //2. 与解构赋值结合
    function connect({ host = '127.0.0.1', username, password, port }) {
      console.log(host)
      console.log(username)
      console.log(password)
      console.log(port)
    }
    connect({
      host: 'atguigu.com',
      username: 'root',
      password: 'root',
      port: 3306,
    })

### 8、对象拓展运算符 ###

创建 08-对象扩展运算符.js

扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

// 展开对象
    let person = { name: '路飞', age: 25 }
    
    // let someone = person // 引用赋值，此时对someone修改就是对person修改
    let someone = { ...person }  // 对象拷贝
    someone.name = '索隆'
    console.log(person)
    console.log(someone)

### 9、箭头函数 ###

创建 09-箭头函数.js

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：

参数 => 函数体

箭头函数多用于匿名函数的定义

//声明一个函数
    let fn = function(a){
      return a + 100
    }
    
    //箭头函数
    let fn = (a) => {
      return a + 100
    }
    
    //简写
    let fn = a => a + 100
    
    //调用函数
    let result = fn(1)
    console.log(result)

### 10、Promise ###

Promise 是ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数， 用来封装异步操作并可以获取其成功或失败的结果。

创建 10-Promise基本语法.js

const fs = require('fs')
    
    
    // 实例化Promise对象：
    // Promise对象有三个状态：初始化，成功，失败
    // resolve:函数类型的参数，可以将Promise的状态改为成功
    // rejecg:函数类型的参数，可以将Promise的状态改为失败
    const p = new Promise((resolve, reject) => {
        // 调用readFile方法读取磁盘文件，异步操作
        // 第一个参数：读取的文件路径
        // 第二个参数：读取过程中对响应结果的处理
        fs.readFile('./1.txt', (err, data) => {
            // 当文件读取失败时，可以获取到失败的信息
            if (err) reject(err) // 将Promise的状态修改为失败
    
            resolve(data) // 将Promise的状态修改为成功
        })
    })
    
    // 调用Promise的方法
    // then:当Promise状态成功时调用执行
    // catch:当Promise状态失败时调用执行
    p.then(response => {
        console.log(response.toString())
    }).catch(error => {
        console.log('出错了')
        console.error(error)
    })

总结：借助于Promise，可以使异步操作中的成功和失败的处理函数独立出来。

[ECMA-262 - Ecma International]: http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm
[6d2dfeb53827461785c6a7407f4d62fd.png]: https://img-blog.csdnimg.cn/6d2dfeb53827461785c6a7407f4d62fd.png
[bf8f36548c5a4de1b0eabdb6b0ad46f6.png]: https://img-blog.csdnimg.cn/bf8f36548c5a4de1b0eabdb6b0ad46f6.png