ES6详细知识点汇总

﹏ヽ暗。殇╰゛Y 2022-12-21 13:57 285阅读 0赞

### 目录 ###

*  ES6最常用知识清单
 *   *  1.let关键字
     *  2.const关键字
     *  3.解构赋值
     *  4.模板字符串
     *  5.简化对象写法
     *  6.箭头函数
     *  7.rest参数
     *  8.扩展运算符
     *  9.Symbol数据类型
     *   *  9.1Symbol的内置属性
     *  10.迭代器(iterator)
     *  11.生成器函数
     *  12. Promise基本用法
     *   *  12.1 Promise读取文件
         *  12.2 Promise封装AJAX
         *  12.3 Promise的then方法
         *  12.3 Promise的catch方法
     *  13. Set与Map
     *  14.class的相关知识
     *   *  14.1使用ES6来实现类的继承
     *  15.有关数值的扩展
     *  16.有关对象方法的扩展

# ES6最常用知识清单 #

## 1.let关键字 ##

let关键字可以用来声明变量，其用let声明的变量具有以下特点：  
1.不允许重复声明  
2.let声明的变量具有块级作用域  
3.let声明的变量不具有变量提升  
4.let声明的变量不影响作用域链

## 2.const关键字 ##

const关键字用来声明 常量(不可以修改的量)，其用const声明的常量具有以下特点  
1.一定要赋初始值  
2.一般常量使用大写声明  
3.常量的值不可以修改  
4.const声明的常量也具有块级作用域  
5.对于数组和对象的元素修改，不算作对常量的修改，不会报错  
6.不允许重复声明

**应用场景，声明对象类型使用const，非对象类型声明选择let**

## 3.解构赋值 ##

允许按照一定的模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。  
频繁使用对象方法、数组元素，就可以使用解构赋值形式。

## 4.模板字符串 ##

在ES6中，可以使用 ·· 来引住字符串，模板字符串的特点  
1.字符串中可以出现换行符  
2.可以使用模板字符串直接对变量进行拼接 在 ·· 中使用 $\{变量名\} 来完成拼接  
**当遇到字符串与变量拼接的情况使用模板字符串**

## 5.简化对象写法 ##

在ES6中，允许在大括号里边，直接写入变量和函数，作为对象的属性和方法。

## 6.箭头函数 ##

在ES6中，可以使用箭头来定义函数。使用箭头函数需要注意以下事项  
1.如果形参只有一个，小括号可以省略不写  
2.函数体如果只有一条语句，或括号可以省略，函数的返回值为该条语句的执行结果  
3.箭头函数this指向声明时所在作用域下this的值  
4.箭头函数不能作为构造函数实例化  
5.不能使用arguments变量 （arguments变量用来保存实参）

**箭头函数不会更改this的指向，适合用来指定回调函数；  
箭头函数适合于与this无关的问题，定时器，数组的方法回调  
箭头函数不适合与this有关的问题，事件的回调，对象的方法**

## 7.rest参数 ##

rest参数用来获取函数的实参，用来代替arguments。arguments返回的是对象，而reset返回的是数组。

## 8.扩展运算符 ##

扩展运算符就是三个点 … **可以将数组转换为逗号分割的参数序列**

<body>
        <div></div>
        <div></div>
        <div></div>
    
        <script> const arr = ["小明","野马","泰迪"]; function fun() { console.log(arguments); } fun(...arr); //相当于 fun("小明","野马","泰迪") // 扩展运算符的应用 // 1.数组的合并 const oneArr = ["我","是","一"]; const twoArr = ["二","是","我"]; const connect = [...oneArr,...twoArr]; console.log(connect); // 2.数组的克隆 const rapStar = ["黄勇","小白","李佳隆"]; const rapStar2 = [...rapStar]; console.log(rapStar2); // 3.将伪数组转换为真数组 const divs = document.querySelectorAll('div'); const arrDivs = [...divs]; console.log(arrDivs); </script>
    </body>

## 9.Symbol数据类型 ##

Symbol是ES6引入的一种新的原始数据类型，表示独一无二的值，是一种类似于字符串的数据类型。Symbol具有以下特点  
1.Symbol的值是唯一的，用来解决命名冲突的问题  
2.Symbol值不能与其他数据进行计算  
3.Symbol定义的对象属性不能使用 for…in 循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名

### 9.1Symbol的内置属性 ###

11个内置的Symbol值

1.  Symbol.hasInstance 当用其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法
2.  Symbol.isConcatSpreadable 对象的Symbol.isConcatSpreadable属性等同于是一个布尔值，表示该对象用于Array.prototype.concat()时，是否可以展开
3.  Symbol.species 创建衍生对象时，会使用该属性
4.  Symbol.match 当执行str.match(myObject)时，如果该属性存在，会调用它，返回该方法的返回值
5.  Symbol.replace 当该对象被 str.replace(myObject)方法调用时，会返回该方法的返回值。
6.  Symbol.search 当该对象被 str.search (myObject)方法调用时，会返回该方法的返回值。
7.  Symbol.split 当该对象被 str.split(myObject)方法调用时，会返回该方法的返回值。
8.  Symbol.iterator 对象进行 for…of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器
9.  Symbol.toPrimitive 该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值
10. Symbol. toStringTag 在该对象上面调用 toString 方法时，返回该方法的返回值
11. Symbol. unscopables 该对象指定了使用 with 关键字时，哪些属性会被 with环境排除。

## 10.迭代器(iterator) ##

迭代器是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署iterator接口，就可以完成遍历操作。

ES6创建了一种新的遍历命令，for…of 循环，Iterator接口主要提供给for…of消费。

原始具有iterator接口的数据（可用for of 遍历），有array、Arguments、Set、Map、String、TypedArray、NodeList。

工作原理：  
1.创建一个指针对象，指向当前数据结构的起始位置  
2.第一次调用对象的next方法，指针自动指向数据结构的第一个成员  
3.接下来不断调用next方法，指针一直往后移动，直到指针指向最后一个成员  
4.可以每次调用next方法返回一个包含value和done属性的对象（done表达的是度的完成时，遍历完true，未遍历完为false）  
**需要自定义遍历数据的时候，用到迭代器**

**使用迭代器自定义遍历数据**

## 11.生成器函数 ##

生成器函数是ES6提供的一种异步编程解决方案，函数书写如下：

function * gen(){}

1.\*的位置没有限制  
2.生成器函数返回的结果是迭代器对象，调用迭代器对象的next方法可以得到yield语句后的值  
3.yield相当于函数的暂停标记，也可以默认为是函数的分隔符，每调用一次next方法，执行一段代码  
4.next方法可以传递实参，作为yield语句的返回值

**生成器函数的参数传递**

## 12. Promise基本用法 ##

Promise用于解决异步编程的方案，语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或者失败的结果。  
`1.Promise构造函数：Promise(){}`  
`2.Promise.prototype.then方法`  
`3.Promise.prototype.catch方法`

通过调用 resolve 、reject 这两个函数来改变实例化对象的状态，从而执行Promise对象中的方法 ，若成功，执行对应的value函数，失败则执行对应的reason函数。

### 12.1 Promise读取文件 ###

// 1.引入 fs 模块
    const fs = require("fs");
    
    /* // 2.调用方法读取文件 fs.readFile("./01-let变量声明以及声明特性.html",(err,data) => { // 如果失败，则抛出错误 if(err){ throw err; } // 没有出错，输出内容 console.log(data.toString()); }); */
    
    // 3.使用 Promise 封装
    const p = new Promise(function (resolve,reject) {   
        fs.readFile("./01-let变量声明以及声明特性.html",(err,data) => { 
            // 判断如果失败
            if(err){ 
                reject(err);
            }
            // 如果成功
            resolve(data);
        });
    });
    
    // 执行then方法
    p.then(function (value) {   
        console.log(value.toString());
    },function (reason) {   
        console.log("读取失败！")
    })

### 12.2 Promise封装AJAX ###

### 12.3 Promise的then方法 ###

### 12.3 Promise的catch方法 ###

## 13. Set与Map ##

**Set集合**  
类似于数组，但是成员的值都是唯一的，集合实现了iterator接口，所以可以使用 扩展运算符 和 for…of… 进行遍历

**集合的属性和方法**  
1. size 返回集合的元素个数  
2. add() 添加一个新元素，返回当前集合  
3. delete() 删除元素，返回boolean值  
4. has() 检测集合中是否包含某个元素，返回boolean值  
5. clear() 清空集合

Map集合，是键值对集合。但是键的范围不限于字符串，各种类型的值（包括对象）都可以当做键。  
Map也实现了Iterator接口，所以可以使用 … 和 for…of 进行遍历。

**Map的属性和方法**  
1. size 返回Map的元素个数  
2. set() 增加一个新元素，返回当前Map  
3. get() 返回键名对象的键值  
4. has() 检测Map中是否包含某个元素，返回boolean值  
5. clear() 清空集合，返回undefined  
6. delete() 删除集合中的一个元素

## 14.class的相关知识 ##

使用class类来使用构造函数

class tel{
                // 构造方法，名字不可以修改
                constructor(brand,price){
                    this.brand = brand;
                    this.price = price;
                }
                // 方法必须使用该语法
                call(){
                    console.log("我能打电话");
                }
            }
    
            // 实例化对象
            let oppo = new tel("oppo","1699");
            console.log(oppo);

### 14.1使用ES6来实现类的继承 ###

## 15.有关数值的扩展 ##

1.  Number.EPSILON 是 JS 表示的最小精度
2.  二进制和八进制 十进制和十六进制
3.  Number.isFinite() 检测一个数值是否为有限数
4.  Number.isNaN() 检测一个数值是否为NaN
5.  Number.parseInt() Number.parseFloat() 字符串转整数
6.  Number.isInteger() 判断一个数是否为整数
7.  Math.trunc() 将数字的小数部分抹掉
8.  Math.sign() 判断一个数到底为 正数(返回1) 负数(返回-1) 还是0(返回0)

## 16.有关对象方法的扩展 ##

1.  Object.is() 判断两个值是否完全相等
2.  Object.assign() 对象的合并(覆盖) 后边的参数会将前面的覆盖,如果前一个参数有后一个参数没有的属性，则不会覆盖
3.  Object.setPrototypeOf()设置原型对象 Object.getPrototypeOf()读取原型对象