前端架构师之01_ES6_基础

冷不防 2023-10-16 16:07 54阅读 0赞

### 1 初识ES6 ###

简单来说，ECMAScript是JavaScript语言的国际标准，JavaScript是实现ECMAScript标准的脚本语言。

2011年，ECMA国际标准化组织在发布ECMAScript 5.1版本之后，就开始着手制定第6版规范。

存在的问题：这个版本引入的语法功能太多，而且制定过程当中，还有很多组织和个人不断提交新功能。很明显，在一个版本中不可能包含所有的要引入的新功能，这些功能要被发布在不同的版本中。

解决方法：标准的制定者决定在每年的6月份发布一次新标准，并且使用年份作为版本号。

<table> 
 <thead> 
  <tr> 
   <th>年份</th> 
   <th>版本</th> 
   <th>简称</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>2015年6月</td> 
   <td>ECMAScript 2015</td> 
   <td>ES6</td> 
  </tr> 
  <tr> 
   <td>2016年6月</td> 
   <td>ECMAScript 2016</td> 
   <td>ES7</td> 
  </tr> 
  <tr> 
   <td>2017年6月</td> 
   <td>ECMAScript 2017</td> 
   <td>ES8</td> 
  </tr> 
  <tr> 
   <td>2018年6月</td> 
   <td>ECMAScript 2018</td> 
   <td>ES9</td> 
  </tr> 
  <tr> 
   <td>2019年6月</td> 
   <td>ECMAScript 2019</td> 
   <td>ES10</td> 
  </tr> 
  <tr> 
   <td>2020年6月</td> 
   <td>ECMAScript 2020</td> 
   <td>ES11</td> 
  </tr> 
 </tbody> 
</table>

### 2 let和const关键字 ###

#### 2.1 let关键字 ####

let是ES6中新增的用于声明变量的关键字。在ES6之前，我们使用var关键字来声明变量。与var关键字相比，let关键字有一些新的特性。

let关键字的新的特性：

##### 块级作用域有效 #####

*  let关键字声明的变量只在所处的块级作用域有效。
 *  防止代码块内层变量覆盖外层变量

*  防止循环变量变成全局变量

##### 不存在变量提升 #####

*  let关键字声明的变量不存在变量提升。
 *  在使用var关键字声明变量时，变量可以先使用再声明，这种现象就是变量提升。但一般的编程习惯，变量应该在声明之后才可以使用。
 *  在ES6中，变量的使用规范更加严格，使用let关键字声明的变量只能在声明之后才可以使用，否则就会报错。

##### 有暂时性死区特性 #####

*  let关键字声明的变量具有暂时性死区特性。
 *  使用let关键字声明的变量具有暂时性死区特性。这是因为let关键字声明的变量不存在变量提升，其作用域都是块级作用域，在块级作用域内使用let关键字声明的变量会被整体绑定在这个块级作用域中形成封闭区域，不再受外部代码影响。
 *  所以在块级作用域内，使用let关键字声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。

#### 2.2 const关键字 ####

const是ES6中新增的用于声明常量的关键字。所谓常量就是值（内存地址）不能变化的量。

const关键字声明的常量的特点：

##### 块级作用域 #####

*  const关键字声明的常量具有块级作用域。

#####  #####

##### 必须赋值 #####

*  const关键字声明常量时必须赋值。

#####  #####

##### 值不能修改 #####

*  const关键字声明常量并赋值后常量的值不能修改。
 *  对于基本数据类型（如数值、字符串），一旦赋值，值就不可修改。

*  对于复杂数据类型（如数组、对象），虽然不能重新赋值，但是可以更改内部的值。

#### 2.3 let、const、var关键字之间的区别 ####

##### 变量的作用域范围不同 #####

*  使用var关键字声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
 *  使用let关键字声明的变量和使用const关键字声明的常量都具有块级作用域。

#####  #####

##### 变量提升 #####

*  使用var关键字声明的变量存在变量提升，可以先使用再声明。
 *  使用let关键字声明的变量和const关键字声明的常量不存在变量提升功能，只能先声明再使用。

#####  #####

##### 值是否可以更改 #####

*  使用var关键字和let关键字声明的变量，可以更改变量的值。
 *  但使用const关键字声明的常量，不能更改常量值对应的内存地址。

在编写程序的过程中，如果要存储的数据不需要更改，建议使用const关键字，如函数的定义、 π值或数学公式中一些恒定不变的值。

由于使用const声明的常量，其值不能更改，且JavaScript解析引擎不需要实时监控值的变化，所以使用const关键字要比let关键字效率更高。

### 3 解构赋值 ###

解构表示对数据结构进行分解，赋值指变量的赋值。也就是拆解架构，重新赋值。

在ES6中，允许按照一一对应的方式，从数组或对象中提取值，然后将提取出来的值赋给变量。

解构赋值的优点是它可以让编写的代码简洁易读，语义更加清晰，并且可以方便地从数组或对象中提取值。

#### 3.1 数组的解构赋值 ####

数组的解构赋值，就是将数组中的值提取出来，然后赋值给另外的变量。

*  变量的数量和数组中值的数量相一致的情况

*  变量的数量和数组中值的数量不一致的情况

#### 3.2 对象的解构赋值 ####

对象解构允许使用变量的名字匹配对象中属性，如果匹配成功就将对象中属性的值赋值给变量。

使用另外一种形式去实现对象的解构赋值，该形式支持变量的名字和对象中属性的名字不一样的情况，等号左边的大括号代表对象解构。

#### 3.3 字符串解构赋值 ####

字符串能够使用解构赋值的原因是: 字符串时特殊的数组(字符串能够被转换成一个类似数组的对象)

let [a, b, c, d, e] = "Hello";
    console.log(a, b, c, d, e);

#### 3.4 解构赋值的用途 ####

*  交换变量的值

let a = 3, b = 5;
    [a, b] = [b, a];
    console.log(a, b);

*  从函数内部返回多个值

let {
        dataObj} = {
        code: 200, msg: 'ok', dataObj: ['jack','rose','bob','小明']}; 
    console.log(dataObj);

*  快速提取一个对象中的属性或方法

let {
        floor, random, sin} = Math;
    console.log('======');
    console.log(Math.floor(Math.random() * 256)); // 原来的操作
    console.log(floor(random() * 256));	// 现在的操作

### 4 箭头函数 ###

箭头函数是ES6中新增的函数，它用于简化函数的定义语法，有自己的特殊语法，接收一定数量的参数，并在其封闭的作用域的上下文（即定义它们的函数或其他代码）中操作。

#### 4.1 箭头函数的语法 ####

// 箭头函数基本语法
    () => {
         }

*  箭头函数以小括号开头，在小括号中可以放置参数。小括号的后面要跟着箭头（=>），箭头后面要写一个大括号来表示函数体，这是箭头函数的固定语法。
 *  箭头函数调用：因为箭头函数没有名字，我们通常的做法是把箭头函数赋值给一个变量，变量名就是函数名，然后通过变量名去调用函数即可。

#### 4.2 箭头函数的特点 ####

##### 省略大括号 #####

*  在箭头函数中，如果函数体中只有一句代码，且代码的执行结果就是函数的返回值，此时可以省略函数体大括号。

##### 省略参数外部的小括号 #####

*  在箭头函数中，如果参数只有一个，可以省略参数外部的小括号。

*  定义带有一个参数的函数，并在浏览器的弹出框中弹出参数值。

#### 4.3 箭头函数中的this关键字 ####

*  ES6前，JavaScript的this关键字指向的对象是在运行时基于函数的执行环境绑定的，在全局函数中，this指向的是window；当函数被作为某个对象的方法调用时，this就指向那个对象。
 *  ES6中，箭头函数不绑定this关键字，它没有自己的this关键字，如果在箭头函数中使用this关键字，那么this关键字指向的是箭头函数定义位置的上下文this。也就是说，箭头函数被定义在哪，箭头函数中的this就指向谁。
 *  箭头函数解决了this执行环境所造成的一些问题，如解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout()和setInterval()中使用this所造成的问题。

### 5 剩余参数 ###

#### 5.1 剩余参数的语法 ####

剩余参数是指在函数中，当函数实参个数大于形参个数时，剩余的实参可以存放到一个数组中。

剩余参数语法允许将一个不确定数量的参数表示为数组。这种不确定参数的定义方式对于声明一个具有未知参数个数的函数非常方便。

剩余参数是程序员自定义的一个普通标识符，接收剩余参数的变量是一个数组（Array的实例），能够直接使用所有的数组方法，如 sort()、map()、forEach()或pop()方法等。

#### 5.2 剩余参数和解构赋值配合使用 ####

### 6 扩展运算符 ###

#### 6.1 扩展运算符的语法 ####

扩展运算符和剩余参数的作用是相反的，扩展运算符可以将数组或对象转换为用逗号分隔的参数序列。扩展运算符也用3个点 `…` 表示。

使用扩展运算符将ary数组拆分成以逗号分隔的参数序列后，又将参数序列放在了console.log()方法中，此时参数序列中的逗号会被当成console.log()方法的参数分隔符，所以输出结果中没有逗号。

#### 6.2 扩展运算符的应用 ####

*  利用扩展运算符合并数组

*  利用扩展运算符将伪数组转换为真正的数组
    
     *  伪数组：可以应用数组的length属性但是无法直接调用数组方法，它也可以像数组一样进行遍历。典型的伪数组包括函数中的arguments、document.getElementsByTagName()返回的元素集合，以及document.childNodes等。

<body>
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    	<div>6</div>
    	<script>
    		var oDivs = document.getElementsByTagName('div');
    		console.log(oDivs);	// 输出结果：HTMLCollection(6) [div, div, div, div, div, div]
    		var ary = [...oDivs];
    		ary.push('a');	// 在数组中追加a
    		console.log(ary);	// 输出结果：(7) [div, div, div, div, div, div, "a"]
    	</script>
    </body>

### 7 模板字符串 ###

#### 7.1 模板字符串的语法 ####

模板字符串是ES6新增的创建字符串的方式，它使用反引号进行定义。

#### 7.2 模板字符串的应用 ####

*  模板字符串可以解析变量

*  在模板字符串中可以换行

*  在模板字符串中可以调用函数

### 8 ES6的内置对象扩展 ###

#### 8.1 数组的扩展方法 ####

ES6为Array（数组）、String（字符串）等内置对象提供了许多扩展方法，从而帮助开发人员提高开发效率。

通过扩展方法可以实现很多方便的功能，如将伪数组转换为真正的数组、在数组中查找出符合条件的数组成员等。

##### Array.from()方法 #####

*  Array构造函数提供了一个from()方法，它可以接收一个伪数组作为参数，返回值为转换后的结果，这个结果是一个真正的数组。

*  在Array构造函数中，from()方法还可以接收两个参数，这与数组中的map()方法类似，它用于处理数组中的每个元素并将处理后的结果放入返回的数组中。

##### Array.of() 方法 #####

*  将一组数转为数组。

console.log(Array.of(9, 4, 2, 7)); // [9, 4, 2, 7]

##### 数组实例的copyWithin()方法 #####

*  用于操作当前数组自身，用来把某些个位置的元素复制并覆盖到其他位置上去。
 *  copyWithin(target\[, start, end\])
 *  target 从该位置开始替换数据
 *  start 可选值，默认为 0，从该位置开始读取值
 *  end 可选值，默认为 数组长度，到该位置前停止读取
 *  注意：三个参数都应该是 数值，如果不是，系统会自动转为数值
 *  该方法会影响到原数组

const numArr = [1,2,3,4,5,6,7,8];
    // 从0的位置开始替换，从5开始读取值，到8这个位置停止读取
    const relArr = numArr.copyWithin(0,5,8); 
    console.log(relArr);
    console.log(numArr);

##### 数组实例的find()方法 #####

*  在数组实例中，ES6提供了一个find()方法，它用于在数组中查找出第一个符合条件的数组成员。

#####  #####

##### 数组实例的findIndex()方法 #####

*  数组实例提供了一个findIndex()方法，用于在数组中查找出第一个符合条件的数组成员的索引，如果没有找到则返回-1。

#####  #####

##### 数组实例的includes()方法 #####

*  ES6中为数组实例提供了includes()方法来检查某个数组是否包含给定的值，返回一个布尔值，true表示包含给定的值，false表示不包含给定的值。

##### keys() 遍历键名，values() 遍历值 #####

##### 数组实例的 entries() 键值对 #####

let numArr = [9, 5, 2, 7];
    for (const [i, v] of numArr.entries()) {
        
    	console.log(i, v);
    }

#### 8.2 字符串的扩展方法 ####

前面我们学习了数组的includes()方法，它用于在数组中查找出第一个符合条件的数组成员的位置。

ES6也提供了字符串的includes()方法用来确定一个字符串是否包含在另一个字符串中。

除此之外，ES6还提供了startsWith()方法和endsWith()方法同样可以用于字符串的查找。

##### 字符串实例的startsWith()方法和endsWith()方法 #####

*  startsWith()方法表示参数字符串是否在原字符串的头部，用于判断字符串是否以某字符串开头；
 *  endsWith()方法表示参数字符串是否在原字符串的尾部，用于判断字符串是否以某字符串结尾。
 *  上述两个方法如果满足条件则返回true，反之返回false。

#####  #####

##### 字符串实例的repeat()方法 #####

*  repeat()方法表示将原字符串重复n次，它返回一个新字符串，并接收一个数值作为参数，表示将字符串重复多少次。

#### 8.3 字面量对象简写方式 ####

ES6中，如果对象的属性名和属性值对应的变量名相同，可以省略不写。

### 9 初识Symbol ###

#### 9.1 Symbol的基本使用 ####

Symbol是ES6中引入的原始数据类型，它的功能类似于一种标识唯一性的ID值，表示独一无二。

Symbol通过Symbol()函数创建。Symbol()函数可以接收一个字符串作为参数，为新创建的Symbol实例提供描述信息，该描述信息主要是在控制台中显示或转为字符串时使用，以便于区分。Symbol不是对象，所以Symbol()函数不能使用new命令。

每个Symbol实例都是唯一的，即使具有相同参数的两个Symbol()函数进行比较时，函数的返回结果都会是false。

#### 9.2 使用Symbol作为对象属性名 ####

因为每一个Symbol的值都是不相等的，所以Symbol作为对象的属性名，可以保证属性不重名。这适用于对象由多个模块组成的情况，可以防止某一个键被意外改写或覆盖。

###  ###

### 10 Set数据结构 ###

#### 10.1 Set数据结构基本使用 ####

ES6提供了新的数据结构Set。

Set类似于数组，但是成员的值都是唯一的，没有重复的值。

Set实例的方法分为两大类，即操作方法（用于操作数据）和遍历方法（用于遍历成员）。

Set数据结构常用于电商网站的搜索功能中，用户搜索完成后，网站要记录用户搜索的关键字，方便用户下次直接单击搜索历史关键字来完成搜索。

##### 创建Set数据结构 #####

Set本身是一个构造函数，创建此构造函数的实例对象就是创建Set数据结构。

#####  #####

##### 初始化Set数据结构 #####

在创建Set数据结构时，也可以传递一个数组作为参数，用来初始化。

##### 利用Set数据结构给数组去重 #####

在初始化Set构造函数时，可以传递一个数组作为参数，如果数组中有重复的值，那么Set数据结构会把重复的值过滤掉。

#### 10.2 Set实例的操作方法 ####

##### add()方法 #####

Set实例提供的add()方法用于向Set数据结构中添加某个值，它接收一个参数代表要添加的值，返回Set结构本身。

##### delete()方法 #####

Set实例提供的delete()方法用于删除Set数据结构中的某个值，它接收一个参数代表要删除的值，返回一个布尔值，如果结果为true则表示删除成功，为false则表示删除失败。

##### has()方法 #####

Set实例提供has()方法，该方法接收一个参数并判断该参数是否为Set数据结构中的成员，返回一个布尔值，如果结果为true则表示包含该成员，为false则表示不包含该成员。

##### clear()方法 #####

Set实例提供的clear()方法用于清除Set数据结构中的所有成员，该方法没有返回值。

#### 10.3 Set实例的遍历方法 ####

Set数据结构的实例与数组一样，也拥有一个forEach()方法，用于遍历Set数据结构中的成员，该方法可以对每个成员执行某种操作，没有返回值。

> 注：由于Set数据结构没有下标，所以不能使用通过下标方式获取数据。

### 11 Map数据结构 ###

#### 11.1 Map数据结构的基本使用 ####

JavaScript 的对象（Object），本质上是键值对的集合（属性值对），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

总的来说就是，Map数据结构类似于对象，用来存储键值对。但对象只能使用字符串作为属性名，而Map可以使用任意类型的数据做为属性名。

##### 创建初始化Map数据结构 #####

作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

let map = new Map([['a',1],['b',2]])
    let arr = [1,2,3]
    let map1 = new Map([[arr,5]])
    console.log(map1)

#### 11.2 Map实例的属性和方法 ####

##### size 属性 #####

let arr = [1,2,3]
    let map = new Map([['a',1],['b',2]])
    // 获取长度
    console.log(map.size); // 2

##### set()方法 #####

map.set("name","John")
    map.set(arr,'100')

##### get()方法 #####

console.log(map.get(arr));

##### has()方法 #####