ES6学习笔记(二)

前言

这是学习es6的一些新特性整理出来的笔记，有看不懂的地方推荐阮一峰的ES6，写的很详细。
附上传送门阮一峰ES6，接上一集传送门ES6学习笔记（一）

14 、Set集合

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

1. size 返回集合的元素个数；
2. add 增加一个新元素，返回当前集合；
3. delete 删除元素，返回 boolean 值；
4. has 检测集合中是否包含某个元素，返回 boolean 值；
5. clear 清空集合，返回 undefined；

   // Set集合
        let s = new Set();
        console.log(s, typeof s);
        let s1 = new Set(["大哥", "二哥", "三哥", "四哥", "三哥"]);
        console.log(s1); // 自动去重
        // 1. size 返回集合的元素个数；
        console.log(s1.size);
        // 2. add 增加一个新元素，返回当前集合；
        s1.add("大姐");
        console.log(s1);
        // 3. delete 删除元素，返回 boolean 值；
        let result = s1.delete("三哥");
        console.log(result);
        console.log(s1);
        // 4. has 检测集合中是否包含某个元素，返回 boolean 值；
        let r1 = s1.has("二姐");
        console.log(r1);
        // 5. clear 清空集合，返回 undefined；
        s1.clear();
        console.log(s1);

   // Set集合实践
        let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
        // 数组去重
        let s1 = new Set(arr);
        console.log(s1);
        // 交集
        let arr2 = [3, 4, 5, 6, 5, 4, 3];

        let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
        console.log(result);
        // 并集
        // ... 为扩展运算符，将数组转化为逗号分隔的序列
        let union = [...new Set([...arr, ...arr2])];
        console.log(union);
        // 差集：比如集合1和集合2求差集，就是1里面有的，2里面没的.就是并集减去交集。
        let result1 = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
        console.log(result1);

15 、Map集合

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

Map 的属性和方法

1. size 返回 Map 的元素个数；
2. set 增加一个新元素，返回当前 Map；
3. get 返回键名对象的键值；
4. has 检测 Map 中是否包含某个元素，返回 boolean 值；
5. clear 清空集合，返回 undefined；

   // Map集合
        // 创建一个空 map
        let m = new Map();
        // 创建一个非空 map
        let m2 = new Map([
            ['name', '尚硅谷'],
            ['slogon', '不断提高行业标准']
        ]);
        // 1. size 返回 Map 的元素个数；
        console.log(m2.size);
        // 2. set 增加一个新元素，返回当前 Map；
        m.set("皇帝", "大哥");
        m.set("丞相", "二哥");
        console.log(m);
        // 3. get 返回键名对象的键值；
        console.log(m.get("皇帝"));
        // 4. has 检测 Map 中是否包含某个元素，返回 boolean 值；
        console.log(m.has("皇帝"));
        // 5. clear 清空集合，返回 undefined；
        m.clear();
        console.log(m);

16 、class类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已；

知识点

1. class 声明类；
2. constructor 定义构造函数初始化；
3. extends 继承父类；
4. super 调用父级构造方法；
5. static 定义静态方法和属性；
6. 父类方法可以重写；

class静态成员

 // class静态成员

        // ES5写法
        // function Phone() {}
        // Phone.name = "手机";

        // Phone.change = function () {
        //     console.log("我可以改变世界！");
        // }
        // let nokia = new Phone();
        // console.log(nokia.name); // undefined
        // // nokia.change();
        // // 报错：Uncaught TypeError: nokia.change is not a function
        // Phone.prototype.color = "黑色";
        // console.log(nokia.color); // 黑色
        // console.log(Phone.name);
        // Phone.change();

        // 注意：实例对象和函数对象的属性是不相通的

        // ES6写法
        class Phone {
            // 静态属性，只有类有，实例对象是没有的
            static name = "手机";
            static change() {
                console.log("我可以改变世界！");
            }
        }
        let nokia = new Phone();
        console.log(nokia.name);
        console.log(Phone.name);
        Phone.change();

ES5构造函数实现继承

 // ES5构造函数继承
        // 手机
        function Phone(brand, price) {
            this.brand = brand;
            this.price = price;
        }
        Phone.prototype.call = function () {
            console.log("我可以打电话！");
        }
        // 智能手机
        function SmartPhone(brand, price, color, size) {
            Phone.call(this, brand, price);
            this.color = color;
            this.size = size;
        }

        // 设置子级构造函数的原型
        SmartPhone.prototype = new Phone;
        SmartPhone.prototype.constructor = SmartPhone;
        
        // 声明子类的方法
        SmartPhone.prototype.photo = function () {
            console.log("我可以拍照！");
        }
        SmartPhone.prototype.game = function () {
            console.log("我可以玩游戏！");
        }
        const chuizi = new SmartPhone("锤子", 2499, "黑色", "5.5inch");
        console.log(chuizi);
        chuizi.call();
        chuizi.photo();
        chuizi.game();

ES6class类继承

注意：super只能用在子类的构造函数中，不能用于普通函数，且类的方法只能用 name(){};，不支持name:function(){};

   // ES6class类继承
        class Phone {
            constructor(brand, price) {
                this.brand = brand;
                this.price = price;
            }
            call() {
                console.log("我可以打电话！");
            }
        }
        class SmartPhone extends Phone {
            // 构造函数
            constructor(brand, price, color, size) {
                super(brand, price); // 调用父类构造函数
                this.color = color;
                this.size = size;
            }
            photo() {
                console.log("我可以拍照！");
            }
            game() {
                console.log("我可以玩游戏！");
            }
        }
        
        const chuizi = new SmartPhone("小米", 1999, "黑色", "5.15inch");
        console.log(chuizi);
        chuizi.call();
        chuizi.photo();
        chuizi.game();

class中的getter和setter设置

  // class中的getter和setter设置

        class Phone {

            get price() { //当price这个属性被读取，会执行这个函数
                console.log("价格属性被读取了！");
                // 返回值
                return 123;
            }
            set price(value) {//当price这个属性被修改，会执行这个函数
                console.log("价格属性被修改了！");
            }
        }

        // 实例化对象
        let s = new Phone();

        console.log(s.price); // 返回值
        s.price = 2999;

17 、数值扩展

Number.EPSILON：

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

EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16；

二进制和八进制：

ES6 提供了二进制和八进制数值的新的写法，分别用前缀 0b 和 0o 表示；

Number.isFinite() 与 Number.isNaN() ：

Number.isFinite() 用来检查一个数值是否为有限的；

Number.isNaN() 用来检查一个值是否为 NaN；

Number.parseInt() 与 Number.parseFloat()：

ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变；

Math.trunc：

用于去除一个数的小数部分，返回整数部分；

Number.isInteger：

Number.isInteger() 用来判断一个数值是否为整数；

 // 数值扩展
        // 0. Number.EPSILON 是 JavaScript 表示的最小精度
        // EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16

        function equal(a, b) {
            return Math.abs(a - b) < Number.EPSILON;
        }
        console.log("0、Number.EPSILON 是 JavaScript 表示的最小精度");

        // 箭头函数简化写法
        equal = (a, b) => Math.abs(a - b) < Number.EPSILON;
        console.log(0.1 + 0.2);
        console.log(0.1 + 0.2 === 0.3); // false
        console.log(equal(0.1 + 0.2, 0.3)); // true
        // 1. 二进制和八进制
        console.log("1、二进制和八进制");
        let b = 0b1010;
        let o = 0o777;
        let d = 100;
        let x = 0xff;
        console.log(x);
        // 2. Number.isFinite 检测一个数值是否为有限数
        console.log("2、Number.isFinite 检测一个数值是否为有限数");
        console.log(Number.isFinite(100));
        console.log(Number.isFinite(100 / 0));
        console.log(Number.isFinite(Infinity));
        // 3. Number.isNaN 检测一个数值是否为 NaN
        console.log("3. Number.isNaN 检测一个数值是否为 NaN");
        console.log(Number.isNaN(123));
        // 4. Number.parseInt Number.parseFloat字符串转整数
        console.log("4. Number.parseInt Number.parseFloat字符串转整数");
        console.log(Number.parseInt('5211314love'));
        console.log(Number.parseFloat('3.1415926神奇'));
        // 5. Number.isInteger 判断一个数是否为整数
        console.log("5. Number.isInteger 判断一个数是否为整数");
        console.log(Number.isInteger(5));
        console.log(Number.isInteger(2.5));
        // 6. Math.trunc 将数字的小数部分抹掉
        console.log("6. Math.trunc 将数字的小数部分抹掉 ");
        console.log(Math.trunc(3.5));

        // 7. Math.sign 判断一个数到底为正数 负数 还是零
        console.log("7. Math.sign 判断一个数到底为正数 负数 还是零");
        console.log(Math.sign(100));//1
        console.log(Math.sign(0));//0
        console.log(Math.sign(-20000));//-1

18 、对象扩展

ES6 新增了一些 Object 对象的方法：

1. Object.is比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）；
2. Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象；
3. proto 、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型；

      // 对象扩展
        // 1. Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）；
        console.log(Object.is(120, 120)); // ===
        // 注意下面的区别
        console.log(Object.is(NaN, NaN));
        console.log(NaN === NaN);
        // NaN与任何数值做===比较都是false，跟他自己也如此！
        // 2. Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象；
        const config1 = {
            host: "localhost",
            port: 3306,
            name: "root",
            pass: "root",
            test: "test" // 唯一存在
        }
        const config2 = {
            host: "http://zibo.com",
            port: 300300600,
            name: "root4444",
            pass: "root4444",
            test2: "test2"
        }
        // 如果前边有后边没有会添加，如果前后都有，后面的会覆盖前面的
        console.log(Object.assign(config1, config2));
        // 3. __proto__、setPrototypeOf、 getPrototypeOf 可以直接设置对象的原型；
        const school = {
            name: "尚硅谷"
        }
        const cities = {
            xiaoqu: ['北京', '上海', '深圳']
        }
        // 并不建议这么做
        Object.setPrototypeOf(school, cities);
        console.log(Object.getPrototypeOf(school));
        console.log(school);

19 、模块化

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

模块化的优势有以下几点：

1. 防止命名冲突；

2. 代码复用；

3. 高维护性；

ES6 之前的模块化规范有：

1. CommonJS => NodeJS、Browserify；
2. AMD => requireJS；
3. CMD => seaJS；

ES6 模块化语法

模块功能主要由两个命令构成：export 和 import；

1. export 命令用于规定模块的对外接口（导出模块）；
2. import 命令用于输入其他模块提供的功能（导入模块）；

ES6导出模块语法汇总

m.js（逐个导出）

export let school = "尚硅谷";
export function teach(){
	console.log("我们可以教你开发技术！");
}

n.js（统一导出）

// 统一暴露（导出）
let school = "尚硅谷";
function findJob(){
	console.log("我们可以帮你找到好工作！");
}
export {school,findJob}

o.js（默认导出）

export default{
	school : "尚硅谷",
	change : function(){
		console.log("我们可以帮你改变人生！");
	}
}

ES6导入模块语法汇总

 <script type="module">
        // 通用方式
        // 引入m.js模块内容
        import * as m from "./js/m.js";
        console.log(m);
        console.log(m.school);
        m.teach();
        // 引入n.js模块内容
        import * as n from "./js/n.js";
        console.log(n);
        console.log(n.school);
        n.findJob();
        // 引入o.js模块内容
        import * as o from "./js/o.js";
        console.log(o);
        // 注意这里调用方法的时候需要加上default
        console.log(o.default.school);
        o.default.change();
        // 解构赋值形式
        import { school, teach } from "./js/m.js";
        // 重名的可以使用别名
        import { school as xuexiao, findJob } from "./js/n.js";
        // 导入默认导出的模块，必须使用别名
        import { default as one } from "./js/o.js";
        // 直接可以使用
        console.log(school);
        teach();

        console.log(xuexiao);
        console.log(one);
        console.log(one.school);
        one.change();
        // 简便形式，只支持默认导出
        import oh from "./js/o.js";
        console.log(oh);
        console.log(oh.school);
        oh.change();
</script>

使用模块化的另一种方式

将js语法整合到一个文件app.js：

// 通用方式
// 引入m.js模块内容
import * as m from "./m.js";
console.log(m);
console.log(m.school);
m.teach();

使用模块化的另一种方式.html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用模块化的另一种方式</title>
	</head>
	<body>
		<script src="./js/app.js" type="module"></script>
	</body>
</html>

20 、Babel对ES6模块化代码转换

Babel 是一个 JavaScript 编译器；Babel 能够将新的ES规范语法转换成ES5的语法；

因为不是所有的浏览器都支持最新的ES规范，所以，一般项目中都需要使用Babel进行转换；步骤：使用Babel转换JS代码——打包成一个文件——使用时引入即可；

步骤

第一步：安装工具babel-cli（命令行工具） babel-preset-env（ES转换工具） browserify（打包工具，项目中使用的是webpack）；

第二步：初始化项目

npm init -y

第三步：安装

npm i babel-cli babel-preset-env browserify

第四步：使用babel转换

npx babel js（js目录） -d dist/js（转化后的js目录） --presets=babel-preset-env

第五步：打包

npx browserify dist/js/app.js -o dist/bundle.js

第六步：在使用时引入bundle.js

<script src="./js/bundle.js" type="module"></script>

21 、ES6模块化引入NPM包

第一步：安装jquery

npm i jquery

第二步：在app.js使用jquery

//入口文件
//修改背景颜色为粉色
import $ from 'jquery';// 相当于const $ = require("jquery");
$('body').css('background','pink');

21 、Array.prototype.includes

Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值；

判断数组中是否包含某元素，语法：arr.includes(元素值)；

js
// includes
let arr = [1,2,3,4,5];
console.log(arr.includes(1));//和indexOf类似，区别在于indexOf返回下标，其返回布尔

22 、指数操作符

在 ES7 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同；

幂运算的简化写法，例如： 2 的 10 次方：2**10；

// 指数操作符
console.log(Math.pow(2,10))
console.log(2**10);

23 、async 和 await

概述

• async 和 await 两种语法结合可以让异步代码看起来像同步代码一样；
• 简化异步函数的写法；

async 函数

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

        // async函数：异步函数
        async function fn() {
            // return 123; // 返回普通数据
            // 若报错，则返回的Promise对象也是错误的
            // throw new Error("出错啦！");
            // 若返回的是Promise对象，那么返回的结果就是Promise对象的结果
            return new Promise((resolve, reject) => {
                // resolve("成功啦！");
                reject("失败啦！");
            })
        }
        const result = fn();
        // console.log(result); // 返回的结果是一个Promise对象
        // 调用then方法
        result.then(value => {
            console.log(value);
        }, reason => {
            console.warn(reason);
        });

await 表达式

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

// async函数 + await表达式：异步函数

// 创建Prmise对象
const p = new Promise((resolve,reject)=>{
	resolve("成功啦！");
})
async function fn(){
	// await 返回的是 promise 成功的值
	let result = await p;
	console.log(result); // 成功啦！
}
fn();

async 和 await 读取文件案例

  // 导入模块
        const fs = require("fs");
        // 读取
        function readText() {
            return new Promise((resolve, reject) => {
                fs.readFile("../resources/text.txt", (err, data) => {
                    //如果失败
                    if (err) reject(err);
                    //如果成功
                    resolve(data);
                })
            })
        }
        function readTest1() {
            return new Promise((resolve, reject) => {
                fs.readFile("../resources/test1.txt", (err, data) => {
                    //如果失败
                    if (err) reject(err);
                    //如果成功
                    resolve(data);
                })
            })
        }
        function readTest2() {
            return new Promise((resolve, reject) => {
                fs.readFile("../resources/test2.txt", (err, data) => {
                    //如果失败
                    if (err) reject(err);
                    //如果成功
                    resolve(data);
                })
            })
        }
        //声明一个 async 函数
        async function main() {
            //获取为学内容
            let t0 = await readText();
            //获取插秧诗内容
            let t1 = await readTest1();
            // 获取观书有感
            let t2 = await readTest2();
            console.log(t0.toString());
            console.log(t1.toString());
            console.log(t2.toString());
        }
        main();

async 和 await 结合发送ajax请求

     // async 和 await 结合发送ajax请求
        function sendAjax(url) {
            return new Promise((resolve, reject) => {
                // 1、创建对象
                const x = new XMLHttpRequest();
                // 2、初始化
                x.open("GET", url);
                // 3、发送
                x.send();
                // 4、事件绑定
                x.onreadystatechange = function () {
                    if (x.readyState == 4) {
                        if (x.status >= 200 && x.status <= 299) {
                            // 成功
                            resolve(x.response);
                        } else {
                            // 失败
                            reject(x.status);
                        }
                    }
                }
            });
        }
        // 测试
        // const result = sendAjax("https://api.apiopen.top/getJoke");
        // result.then(value => {
        //     console.log(value);
        // }, reason => {
        //     console.warn(reason);
        // })
        // 使用async和await
        async function main() {
            let result = await sendAjax("https://api.apiopen.top/getJoke");
            console.log(result);
        }
        main();