JavaScript从入门到放弃 -（七）ES6

小鱼儿 2023-03-03 08:56 24阅读 0赞

### 目录 ###

*  1. ES6相关概念
 *   *  1.1 什么是 ES6 ?
     *  1.2 为什么使用 ES6 ?
 *  2 ES6新增语法
 *   *  2.1 新增关键字
     *   *  2.1.1 let 关键字
         *  小结
         *  2.1.2 const 关键字
         *  小结
         *  2.1.3 let、const、var 的区别
     *  2.2 解构赋值
     *   *  2.2.1 数组解构
         *  2.2.2 对象解构
         *  小结
     *  2.3 箭头函数
     *   *  2.3.1 语法规范
         *  2.3.2 箭头函数的调用
         *  2.3.3 this关键字
     *  2.4 剩余参数
     *  2.5 剩余参数和解构配合使用
 *  3 ES6的内置对象扩展
 *   *  3.1 Array 的扩展方法
     *   *  3.1.1 扩展运算符（展开语法）
         *  3.1.2 构造函数方法：Array.from()
         *  3.1.3 实例方法： find()
         *  3.1.4 实例方法：findIndex()
         *  3.1.5 实例方法：includes()
     *  3.2 String 的扩展方法
     *   *  3.2.1 模板字符串
         *   *  3.2.2 模板字符串的特点
         *  3.2.3 实例方法：startsWith() 和 endsWith()
         *  3.2.4 实例方法：repeat()
     *  3.3 Set 数据结构
     *   *  3.3.1 利用Set数据结构做数组去重
         *  3.3.2 Set对象实例方法
         *  3.3.3 遍历
 *  ~~待续

**学习目标**

*  能够说出使用let关键字声明变量的特点；
 *  能够使用解构赋值从数组中提取值；
 *  能够说出箭头函数拥有的特性；
 *  能够使用剩余参数接收剩余的函数参数；
 *  能够使用拓展运算符拆分数组；
 *  能够说出模板字符串拥有的特性。

# 1. ES6相关概念 #

## 1.1 什么是 ES6 ? ##

**ES** 的全称是 **ECMAScript** , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的**标准化规范**。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]  
**ES6** 实际上是一个泛指，泛指 **ES2015** 及后续的版本。

## 1.2 为什么使用 ES6 ? ##

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript 语言本身也有一些令人不满意的地方。

*  变量提升特性增加了程序运行时的不可预测性；
 *  语法过于松散，实现相同的功能，不同的人可能会写出不同的代码。

# 2 ES6新增语法 #

ES6 中新增了用于**声明变量**的**关键字**。它的出现是为了替换`var`关键字。

## 2.1 新增关键字 ##

### 2.1.1 let 关键字 ###

**1）`let`声明的变量只在所处的块级有效**。  
**块级作用域** \- 在大括号 `{}`中。

if (true) {  
         let a = 10;
     }
    console.log(a) // a is not defined

**注意：** 使用`let`关键字声明的变量才具有**块级作用域**特性，使用`var`声明的变量不具备。

**2）不存在变量提升**

console.log(a); // a is not defined 
    let a = 20;
    // 报错

`let`声明的变量没有变量提升，必须先声明再使用。

**3）暂时性死区**  
利用`let`声明的变量会绑定在这个块级作用域，不会受外部代码影响。

var tmp = 123;
     if (true) {  
         tmp = 'abc';
         let tmp; 
     }

**解释：** 报错“初始化前无法访问tmp ”，它不会向上查找“`var tmp = 123`”。  
原因是，在块级中使用了`let`关键字，而它会将`num`变量与块级这个整体进行绑定。

**4）经典面试题（一）**

var arr = [];
     for (var i = 0; i < 2; i++) { 
         arr[i] = function () { 
             console.log(i); 
         }
     }
     arr[0]();
     arr[1]();

解释：`i`是全局作用域下的变量，当循环到`2`时，不满足循环条件，跳出循环，此时才执行`arr[0]`，输出`2`。循环时，函数是不执行的。

**5）经典面试题（二）**  
将上题中的`var`改为`let`。

let arr = [];
     for (let i = 0; i < 2; i++) { 
         arr[i] = function () { 
             console.log(i); 
         }
     }
     arr[0]();
     arr[1]();

**图解：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 1]

此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级）作用域下的`i`值。

### 小结 ###

*  `let`关键字是用来声明变量的；
 *  使用let关键字声明的变量具有块级作用域特性；
 *  在一个大括号中使用`let`关键字声明的变量才具有块级作用域特性，`var`关键字不具备；
 *  防止循环变量变成全局变量；
 *  使用`let`关键字声明的变量没有变量提升；
 *  使用`let`关键字声明的变量具有暂时性死区特性。

### 2.1.2 const 关键字 ###

**作用**：用来声明常量，**常量**就是值（内存地址）不能变化的量。

**const 特点：**

1.  具有块级作用域；

if (true) {  
         const a = 10;
     }
    console.log(a) // a is not defined

**解释：** 在块级作用域内声明的常量，外部代码是找不到的，所以会报错。

1.  声明常量时必须赋初始值；

const PI; // Missing initializer in const declaration
    // 报错：常量声明中缺少初始值

1.  常量赋值后，值不能修改。

const PI = 3.14;
    PI = 100; // Assignment to constant variable.

const ary = [100, 200];
    ary[0] = 'a';
    ary[1] = 'b';
    console.log(ary); // ['a', 'b']; 
    ary = ['a', 'b']; // Assignment to constant variable.

### 小结 ###

*  `const`声明的是一个常量。
 *  常量不能重新赋值；
    
     *  如果是基本数据类型，不能更改值；
     *  如果是复杂数据类型，数据结构内部的值可以更改，但数据值本身不可更改（其实质是地址值不可更改）。
 *  声明`const`时候必须要给定值。

### 2.1.3 let、const、var 的区别 ###

1.  使用`var`声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
2.  使用`let`声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
3.  使用`const`声明的是常量，在后面出现的代码中不能修改该常量的值。

## 2.2 解构赋值 ##

**ES6** 中允许我们按照一一对应的方式，从数组或对象中提取值，再将提取出来的值，赋值给变量（按照对应位置，对变量赋值）。

**解构：** 表示分解数据结构；**赋值：** 给变量赋值。

*  数组解构
 *  对象解构

### 2.2.1 数组解构 ###

从数组中提取值，按照对应位置，对变量赋值。如果解构不成功，变量的值为`undefined`。

let [a, b, c] = [1, 2, 3];
     console.log(a)//1
     console.log(b)//2
     console.log(c)//3
    //如果解构不成功，变量的值为undefined

**解释：** 数组解构中，“`=`”右边是数组，里面有3个值，分别为1、2、3，左边的中括号`[ ]`不是表示数组，而是表示结构。中括号内是用`let`关键字声明的变量。“`=`” 左、右两边是一一对应的关系。

### 2.2.2 对象解构 ###

从对象中提取值，将提取出来的值，赋给另外的变量。

let person = {  
    		name: 'zhangsan', 
    		age: 20 
    	}; 
    let {  name, age } = person;
    console.log(name); // 'zhangsan' 
    console.log(age); // 20

let { name: myName, age: myAge} = person; // myName myAge 属于别名
    console.log(myName); // 'zhangsan' 
    console.log(myAge); // 20

**解释：** 对象解构中，“`=`”左边用大括号`{}`表示，大括号中依然是关键字`let`声明的变量；“`=`”的右边，是具体的被解构的**对象**。

*  对象解构，实际上是属性匹配。即变量名称匹配对象中**属性**的名称；
 *  如果匹配成功，就将对象中属性的值，赋值给变量。

### 小结 ###

*  解构赋值就是把数据结构分解，然后给变量进行赋值；
 *  如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined；
 *  **数组解构用中括号**包裹，多个变量用逗号隔开，**对象解构用花括号**包裹，多个变量用逗号隔开；
 *  利用解构赋值能够让我们方便的获取对象中的属性跟方法。

## 2.3 箭头函数 ##

**作用：** 用来简化函数定义语法；是ES6中新增的定义函数的方式。

### 2.3.1 语法规范 ###

( ) => { }

**解释：** `():`代表函数（小括号里面放形参）； `=>:`必须的符号，指向哪一个代码块；`{}:`函数体；

### 2.3.2 箭头函数的调用 ###

通常，将箭头函数赋值给一个变量，变量名就是函数名，通过变量名来调用函数。

// 函数调用
    const fn = () => { }//代表把一个函数赋值给fn

1）如果函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号。

A、**普通写法：**

function sum(num1, num2) {  
         return num1 + num2; 
     }

B、**省略**`{}`**大括号后的ES6写法**

//es6写法
     const sum = (num1, num2) => num1 + num2;

2）如果 **形参** 只有一个，可以省略小括号`()`。

function fn (v) { 
    return v;
    }
    // 省略小括号后
    const fn = v => v;

### 2.3.3 this关键字 ###

*  传统函数当中，谁调用了函数，函数内部的this关键字就指向谁。
 *  箭头函数中，没有自己的this，也就不具有这个特性；
 *  箭头函数不绑定this关键字，箭头函数中的`this`，指向的是函数定义位置的上下文this。

## 2.4 剩余参数 ##

当函数实参个数大于形参个数时，我们可以将剩余的实参放到一个数组中（剩余参数语法，允许我们将一个不定数量的参数表示为一个数组）。

**示例1**

function sum (first, ...args) { 
    console.log(first); // 10
    console.log(args); // [20, 30]
    }
    sum(10, 20, 30)

…args表示接收所有的实参

**示例2**

回调函数形参`item`表示循环的当前项（数组中有多少个值就循环几次）。  
由于箭头函数只有一个形参，因此包围`item`的小括号可以去掉，并且箭头函数体的内部也只有一句代码，所以`{}`也可以去掉。则整段代码可以简写：

## 2.5 剩余参数和解构配合使用 ##

let students = ['wangwu', 'zhangsan', 'lisi'];
    let [s1, ...s2] = students;
    console.log(s1); // 'wangwu'
    console.log(s2); // ['zhangsan', 'lisi']

s1 接收“wangwu”这个变量，s2接收剩余的变量

# 3 ES6的内置对象扩展 #

## 3.1 Array 的扩展方法 ##

### 3.1.1 扩展运算符（展开语法） ###

**扩展运算符**：正好和剩余参数是相反的，它可以将数组或者对象转为用逗号分隔的参数序列。

let ary = [1, 2, 3];
    ...ary
    console.log(...ary);  // 输出 1 2 3

数组变量ary前面加“…”，表示将数组元素拆分为以逗号分隔的参数序列。输出中没有逗号，是因为console.log方法中，逗号会被当做方法的参数分隔符。

**应用：** 扩展运算符应用于**合并数组**。

// 方法一
    let ary1 = [1, 2, 3]; 
    let ary2 = [3, 4, 5];
    let ary3 = [...ary1, ...ary2];
    console.log(ary3)  // 输出[1,2,3,3,4,5]

// 方法二
    ary1.push(...ary2);

方法二中的`push()`方法，可以向数组中追加元素。`push`方法可以接收多个参数

将类数组或可遍历对象转换为真正的数组：

let oDivs = document.getElementsByTagName('div');
    oDivs = [...oDivs];

### 3.1.2 构造函数方法：Array.from() ###

`Array.from()` 方法，它接收一个伪数组做参数，返回值（转换后的结果）是一个真正的数组（也即将类数组或可遍历对象转换为真正的数组）：

let arrayLike = { 
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
    };
    let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

上面这段代码中的`arrayLike`变量，是一个伪数组。然后将此伪数组做为参数，传递到方法中，方法的返回值即是真正的数组。

`Array.from()` 方法还可以接收第二个参数。第二个参数是一个函数。它的作用是对数组中的元素进行加工处理。数组中有多少个元素，函数就会被调用多少次。此函数有一个**形参**，代表要处理的值。只需将处理的结果返回即可。

let arrayLike = { 
    "0": 1,
    "1": 2,
    "length": 2
    }
    let newAry = Array.from(aryLike, (item) => { 
    		return item *2
    });

由于只有一个形参，且函数体内只有一句代码，因此可简写为：

let arrayLike = { 
    "0": 1,
    "1": 2,
    "length": 2
    }
    let newAry = Array.from(aryLike, item => item *2)

**解释：** 在函数内部，将数组中的每个值都乘以了2

### 3.1.3 实例方法： find() ###

查找数组中第一个符合条件的数组成员，它接收一个函数作为参数。在参数的函数体中，要返回一个布尔值。如果没有找到返回undefined

> **find( )** 方法，它的内部其实就是查找条件

let ary = [{ 
    id: 1,
    name: '张三‘
    }, { 
    id: 2,
    name: '李四‘
    }];
    let target = ary.find((item, index) => item.id == 2);

`item`和`index`是参数函数中的两个形参。`item`代表当前循环到的值，`index`是当前循环到的值的索引。由于当前没有用到index索引，因此index也可以省略不写。

let ary = [{ 
    id: 1,
    name: '张三‘
    }, { 
    id: 2,
    name: '李四‘
    }];
    let target = ary.find(item=> item.id == 2);
    console.log(target)  // 输出 “李四”

### 3.1.4 实例方法：findIndex() ###

**作用：** `findIndex()`方法，用于查找数组中第一个符合条件的值在数组中的索引。如果找不到，则返回-1。  
它的使用方法同`find()`一样。

let ary = [1, 5, 10, 15];
    let index = ary.findIndex((value, index) => value > 9);
    console.log(index); // 2

### 3.1.5 实例方法：includes() ###

includes()方法的作用是，判断数组中是否包含某一个元素（给定的值），返回布尔值。  
括号内的参数，就是要判断的元素。

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

> includes：“包含”的意思

## 3.2 String 的扩展方法 ##

### 3.2.1 模板字符串 ###

ES6新增的声明字符串的方式，使用反引号定义。

**示例：**

let name = `zhangsan`;

#### 3.2.2 模板字符串的特点 ####

1）模板字符串中可以解析变量。

let name = '张三';
    let sayHello = `hello,my name is ${ name}`; // hello, my name is zhangsan

`$`和`{}`组合使用，即可解析变量内容，不需要用+连接字符串。

2）模板字符串中可以换行

let result = { 
    name: 'zhangsan',
    age: 20, sex: '男'
    }
    let html = ` <div> <span>${ result.name}</span> <span>${ result.age}</span> <span>${ result.sex}</span> </div> `;

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

const fn = () => { 
    	return '我是fn函数';
    };
    let str = `模板字符串：${ fn()}`; // 模板字符串：我是fn函数

字符串中调用函数的位置，会显示函数执行后的返回值。

### 3.2.3 实例方法：startsWith() 和 endsWith() ###

*  `startsWith()`：判断参数字符串是否以某字符串的开头，返回布尔值；
 *  `endsWith()`：判断参数字符串是否以某字符串的结尾，返回布尔值。

let str = 'Hello world!';
    str.startsWith('Hello') // true
    str.endsWith('!') // true

### 3.2.4 实例方法：repeat() ###

将原字符串进行重复，返回一个新字符串。它接收一个数值`n`做为参数，表示将字符串重复`n`次

'x'.repeat(3) // "xxx"
    'hello'.repeat(2) // "hellohello"

## 3.3 Set 数据结构 ##

**ES6** 提供了新的数据结构 `Set`。它类似于数组，但是成员的值都是唯一的，没有重复的值。

**应用场景** ，比如：  
电商网站中的搜索功能，用户搜索完成后，网站要记录用户搜索的关键字，方便用户下次直接点击搜索历史关键字就可以进行搜索。

`Set`本身是一个构造函数。用来生成 `Set` 数据结构。  
创建此构造函数的实例对象，就是在创建`Set`数据结构。

const s = new Set();

Set函数可以接受一个数组作为参数，用来初始化。

const set = new Set([1, 2, 3, 4, 4]);

### 3.3.1 利用Set数据结构做数组去重 ###

const s1 = new Set();
    console.log(s1.size)
    const s2=new Set(["a","b"]);
    const.log(s2.size);
    const s3= new Set(['a','a','b','b'])
    console.log(s3.size);
    const ary = [...s3];
    const.log(ary)

### 3.3.2 Set对象实例方法 ###

**常用实例方法：**

*  add(value)：添加某个值，返回 Set 结构本身；
 *  delete(value)：删除某个值，返回一个布尔值，表示删除是否成功；
 *  has(value)：返回一个布尔值，表示该值是否为 Set 的成员；
 *  clear()：清除所有成员，没有返回值

const s = new Set();
    s.add(1).add(2).add(3); // 向 set 结构中添加值
    s.delete(2) // 删除 set 结构中的2值
    s.has(1) // 表示 set 结构中是否有1这个值 返回布尔值
    s.clear() // 清除 set 结构中的所有值

### 3.3.3 遍历 ###

从`Set`数据结构中取值。  
`Set` 结构的实例与数组一样，也拥有`forEach`方法，用于对每个成员执行某种操作，没有返回值。

// forEach方法遍历取值
    const s = new Set(['a','b','c']);
    s.forEach(value => { 
    	console.log(value)  // 输出 a b c
    })

# ~~待续 #

上一篇：[JavaScript从入门到放弃 -（六）正则表达式][JavaScript_ -]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]: /images/20230208/429dfabd8daf42b0af1b2279b521183c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 1]: /images/20230208/ee67ab48d58e47c592f5a47fdb215b72.png
[JavaScript_ -]: https://blog.csdn.net/zglibk/article/details/107645196