ES6(ECMAscript6)最全学习笔记总结（二）

前言

2021.7.15

★ 参数默认值

ES6允许给函数参数赋值初始值

1.形参初始值
具有默认值的参数，一般位置要靠后（潜规则）

function add(a,b,c= 10) {
         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: 'hao123.com',
      username:'root',
      password:'root',
      port: 3306
})

★ rest参数

ES6引入rest参数，用于获取函数的实参，用来代替arguments

1.ES5获取实参的方式

function date(){
       console.log(arguments);
}
date('aa','bb','cc');

此时返回的date为对象

2.rest参数

function date(...args){
          console.log(args);//filter some every map
}
date('aa','bb','cc');

此时返回的date为数组，我们可以对其进行数组api操作，简化了我们对参数的调用。

注意：rest参数必须要放到参数最后，如下：

function fn(a,b,...args){
        console.log(a);
         console.log(b);
          console.log(args);
}
fn(1,2,3,4,5,6);

此时输出为如下，如果将...args放在中间或者前面，则会报错。

★spread拓展运算符

… 能将数组转换为逗号分隔的参数序列

//声明一个数组
const tfboys = ['易烊千玺','王源','王俊凯'];

//声明一个函数
function chunwan() {
      console.log(arguments);
}
chunwan(...tfboys); //chunwan(''易烊千玺','王源','王俊凯'')

注意这里和rest是有区别的，rest参数是放在函数声明时形参的位置，而拓展运算符是可以放在在函数调用时的实参位置。

1.数组的合并

const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
//传统合并：
const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
//es6合并：
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];

2.数组的克隆

const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua];
console.log(sanyecao);

3.将伪数组转为真正的数组

<div></div>
<div></div>
<div></div>
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr);

我们通过拓展运算符将3个对象转为了数组。

★Symbol

JavaScript引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。

特点：

1. symbol的值是唯一的，用来解决命名冲突的问题。
2. symbol值不能与其他数据进行运算。
3. symbol定义的对象属性不能使用for…in进行遍历，但是可以使用Refleyc.ownKeys来获取对象的所有键名。

1.创建Symbol

let s1 = Symbol('mark');
let s2 = Symbol('mark');
注意：这里的s1 != s2
let s3 = Symbol.for('mark');
let s4 = Symbol.for('mark');
注意：这里的s3 == s4

2.不能与其他数据进行运算

3.js数据类型

USONB you are so niubility

//u  undefined
//s string symbol
//o object
//n null number
//b boolean

★迭代器

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

1.ES6创造了一种新的遍历命令for…of循环，iterator接口主要供for…of消费
2.原生具备iterator接口的数据包括：

array,arguments,set,map,string,typedarray,nodelist

3.工作原理

a.创建一个指针对象，指向当前数据结构的起始位置。
b.第一次调用对象的next方法，指针自动指向数据结构的第一个成员。
c.接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员。

★生成器

生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。

生成器其实就是一个特殊的函数：

function * gen(){
      console.log("hello generator")
}
let iterator = gen();
iterator.next();

注意在这里，我们如果直接调用gen();,不会返回输出，只能借助next（）;。

生成器函数实例

//回调地狱
setTimeout(()=>{
            console.log(111);
            setTimeout(()=>{
                console.log(222);
                setTimeout(()=>{
                    console.log(333);
           },3000)
       },2000)
  },1000)

使用生成器函数：


我们发现，代码的缩进是有限制的，很好的解决了回调地狱的问题。

★Promise

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

1.promise基本语法

//实例化promise对象
const p = new Promise(function(resolve, reject){
      setTimeout(function(){
          let data = '数据库中的数据';
          resolve(data);
          let err = '数据读取失败';
          reject(err);
},1000);
//调用 promise对象 的then方法
p.then(function(value){ 
   console.log(value);
},function(reason){
   console.log(reason);
})

2.promise读取文件

//导入fs模块
const fs = require('fs');
//调用方法读取文件
 fs.readFile('./resources/为学.md',(err,data)=>{
   if(err) throw err;
   console.log(data.toString());
});
//使用Promise封装
const p = new Promise(function(resolve, reject){
    fs.readFile("./resources/为学.md",(err, data)=>{
       if(err) reject(err);
       resolve(data);
    })
});
p.then(function(value){
   console.log(value.toString());
}, function(reason){
   console.log("读取失败！");
});

文件目录如下：

当我们在控制台运行时候：

value一般作为成功的形参，reason一般作为后果的形参。

3.promise封装AJAX

const p = new Promise((resolve, reject) =>{
             //1.创建对象
             const xhr = new XMLHttpRequest();
             //2.初始化
             xhr.open("GET","http://api.apiopen.top/getJoke");
             //3.发送
             xhr.send();
             //4.绑定事件，处理响应结果
             xhr.onreadystatechange = function() {
                 if (xhr.readyState === 4) {
                     //判断响应状态码 200-299
                     if(xhr.status >= 200 && xhr.status < 300)
                     //表示成功
                     resolve(xhr.response);
                 } else{ 
                    reject(xhr.status);
                 }
             }
         })
         //指定回调
         p.then(function(value){
             console.log(value);
         },function(reason){
             console.error(reason);
         });

我们可以看到，在封装完请求函数后，再进行别的操作时，我们只需在函数后面调用或者添加即可，避免了回调地狱问题。
4.then方法
其返回结果是promise对象，对象的状态由回调函数的执行结果决定。

如果回调函数中返回的结果是 非promise类型的属性，状态为成功，返回值为对象的成功。如果是promise对象，则根据其是否成功决定。如果是抛出错误，则状态为reject。

链式调用

p.then(value=>{

}).then(value=>{

});

也是为了杜绝回调地狱。

catch方法

跟then差不多,设置p对象的状态为失败，并设置失败的值。

★Set

ES6提供了新的数据结构set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用【拓展运算符】和【for…of】进行遍历。

声明一个set

let s = new Set();
let s2 = new Set(['大事儿','小事儿']);

元素个数

console.log(s2,size);

添加新的元素

s2.add('喜事儿')

删除元素

s2.delete('小事儿');

检测

console.log(s2.has('糟心事'));

清空

s2.clear();

遍历

for (let v of s2){
      console.log(v);
};

★Map

ES6提供了Map数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值(包括对象)都可以当作键。Map也实现了iterator 接口，所以可以使用「扩展运算符」和fo… 进行遍历。
以及清空和遍历

★数值拓展

0. Number . EPSILON 是JavaScript 表示的最小精度

1. 二进制和八进制

2.Number.isFinite检测一个数值是否为有限数

3. Number. isNaN 检测一个数值是否为NaN

4. Number . parseInt Number . parseFloat字符串转整数

5. Number . isInteger 判断一个数是否为整数

6.Math.trunc将数字的小数部分抹掉

7. Math.sign 判断一个数到底为正数负数还是零

如果是正数返回1，负数返回-1.

★对象方法扩展

1.Object.is判断两个数是否完全相等

注意输出：第一行竟然为true，这与我们所知道的：nan和任何数包括自身取等都是false。这一理念相不同。

2.Object.assigin对象的合并

3.Object.setPrototypeof 设置原型对象

★模块化

模块化是值将一个大的程序文件，拆分为许多小的文件，然后将小文件组合起来。

优点：

1. 防止命名冲突
2. 代码复用
3. 高维护性

模块化规范产品

语法，主要由两个命令组成：export 和 import

• export命令用于规定模块的对外接口
• import命令用于输入其他模块提供的功能

例如：我们在m1.js文件夹中写入如下代码:

在index.html中导入即可：

//引入m1.js模块内容
import * as m1 from "./src/js/m1.js";

暴露方式汇总

1. 默认暴露

export default{
    school:'csdn';
}

2. 分别暴露
   在需要导出的函数前加上“export”。

export let school = 'csdn'; 

3. 统一暴露
   用对象的简化写法来统一实现导出。

export {school};

解构赋值形式:

import {school, teach} from "./src/js/m1.js";

注意这里，如果我们从多个文件中导入了重名的对象，则需要加入as作为别名来区分。

import {school as csdn, teach} from "./src/js/m1.js";

值得一提的是，当我们使用默认暴露的方法时：

import { default as m1} from "./src/js/m1.js";

简便形式:

impor m1 from import "./src/js/m1.js";

★Babel

babel可以将ES比较新的语法转化为浏览器可以兼容的版本。

1. 安装工具 babel-cli babel-preset-env browserify(webpack)
2. npx babel src/js -d dist/js
3. 打包 npx browserify dist/js.app.js -o dist/bundle.js

★引入NPM包

import $ from 'jquery';// const $ = require("jquery");
$('body').css('background1','pink');

★includes

类似于indexOf

★ **

console.log(2 ** 10);
console.log(Math.pow(2, 10));

★async和await

async和await两种语法结合可以让异步代码像同步代码一样

1.async函数

1. async函数的返回值为promise对象，
2. promise 对象的结果由async函数执行的返回值决定

2.await表达式

1. awaitp必须写在async函数中
2. await 右侧的表达式一般为promise对象
3. await 返回的是promise成功的值
4. await 的promise失败了,就会抛出异常,需要通过tr…catch捕获处理