尚硅谷ES6复习总结下（65th）

1、Set（集合）

1.1、Set 的定义和使用

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

集合（这里假设有一个集合 st）的属性和方法

1、st.size：返回集合个数
2、st.add(item)：往集合中添加一个新元素 item，返回当前集合
3、st.delete(item)：删除集合中的元素，返回 boolean 值
4、st.has(item)：检测集合中是否包含某个元素，返回 boolean 值
5、st.clear()：清空集合
6、集合转为数组：[...st]
7、合并两个集合：[...st1, ...st2]

示例

//创建一个非空集合
let s1 = new Set([1,2,3,1,2,3]);
/*集合属性与方法*/ 
//返回集合的元素个数
console.log(s1.size);
//添加新元素
console.log(s1.add(4)); 
//删除元素 
console.log(s1.delete(1)); 
// 检测是否存在某个值 
console.log(s1.has(2)); 
//清空集合
console.log(s1.clear());
1
2
3
4
5
6
7
8
9
10
11
12
13

1.2、集合案例

案例1： 数组去重

let arr1 = [1, 2, 2, 3, 3, 3, 4, 1, 2];
let res1 = [...new Set(arr1)];  // 扩展运算符将集合转变为数组
console.log(res1); // [ 1, 2, 3, 4 ]
1
2
3

案例2：数组求交集

let arr1 = [1, 2, 2, 3, 4, 5];
let arr2 = [3, 6, 6, 7, 1, 4];
let res = arr1.filter(v => new Set(arr2).has(v))
console.log(res); // [ 1, 3, 4 ]
1
2
3
4

案例3：数组求并集

let arr1 = [1, 2, 2, 3, 4, 5];
let arr2 = [3, 6, 6, 7, 1, 4];
let res = [...new Set([...arr1, ...arr2])];  // 都合起来再去重
console.log(res); // [ 1, 2, 3, 4, 5, 6, 7 ]
1
2
3
4

案例4：数组求差集（1和2的一个差集就是1里有但2里没有的，这玩意分主体）

let arr1 = [1, 2, 2, 3, 4, 5];
let arr2 = [3, 6, 6, 7, 1, 4];
let res = [...new Set(arr1)].filter(v => !(new Set(arr2).has(v)))  // 交集的逆运算，非一下里面的运算就行了
console.log(res); // [ 2, 5 ]
1
2
3
4

2、Map

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

let mp1 = new Map();
mp1.set('aaa', 111);
mp1.set('bbb', 222);
mp1.set('ccc', 333);

let mp2 = new Map([
    ['aaa', 111],
    ['bbb', 222],
    ['ccc', 333]
]);

console.log(mp1['aaa']); // 111
console.log(mp2.get('bbb')); // 222
1
2
3
4
5
6
7
8
9
10
11
12
13

Map 的属性和方法：（k 为键，v为值）

size：返回 Map 的元素（键值对）个数
set(k, v)：增加一个键值对，返回当前 Map
get(k)：返回键值对的键值
has()：检测 Map 中是否包含某个元素
clear()：清空集合，返回 undefined
1
2
3
4
5

3、数值扩展

1、Number.EPSILON 是 JavaScript 表示的最小精度，一般用来处理浮点数运算。例如可以用于两个浮点数的比较。

let equal = (x, y) => Math.abs(x - y) < Number.EPSILON;
console.log(0.1 + 0.2 === 0.3); // false
console.log(equal(0.1 + 0.2, 0.3)); // true
1
2
3

2、二进制和八进制：二进制以 0b 开头，八进制以 0o 开头。

let b = 0b1010;
let o = 0o777;
let d = 100;
let x = 0xff;
console.log(x);
1
2
3
4
5

3、Number.isFinite 检测一个数值是否为有限数。

console.log(Number.isFinite(100)); // true
console.log(Number.isFinite(100 / 0)); // false
console.log(Number.isFinite(Infinity)); // false
1
2
3

4、Number.parseInt 和 Number.parseFloat
ES6 给 Number 添加了 parseInt 方法，Number.parseInt 完全等同于 parseInt。将字符串转为整数，或者进行进制转换。Number.parseFloat 则等同于 parseFloat

Number.parseInt === parseInt; // true
Number.parseFloat === parseFloat; // true
1
2

console.log(Number.parseInt('5211314love')); // 5211314
console.log(Number.parseFloat('3.1415926神奇')); // 3.1415926
1
2

5、Number.isInteger() 判断一个数是否为整数。

console.log(Number.isInteger(5)); // true
console.log(Number.isInteger(2.5)); // false
1
2

6、Math.trunc() 将数字的小数部分抹掉。

console.log(Math.trunc(3.5)); // 3
1

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

4、对象方法扩展

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

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

4.1 Object.is()

Object.is() 方法判断两个值是否完全相同。Object.is 比较两个值是否严格相等，与 === 行为 基本一致。返回一个 Boolean 类型。

Object.is(value1, value2);
1

Object.is() 方法判断两个值是否为同一个值。如果满足以下条件则两个值相等：

1、都是 undefined
2、都是 null
3、都是 true 或 false
4、都是相同长度的字符串且相同字符按相同顺序排列
5、都是相同对象（意味着每个对象有同一个引用）
6、都是数字且
1、都是 +0
2、都是 -0
3、 都是 NaN
4、或都是非零而且非 NaN 且为同一个值

1、与 == 运算不同。 == 运算符在判断相等前对两边的变量（如果它们不是同一类型）进行强制转换
(这种行为的结果会将 "" == false 判断为 true)，而 Object.is 不会强制转换两边的值。

2、与 ===也有点区别。 === 运算符 (也包括 == 运算符) 将数字 -0 和 +0 视为相等，而将 Number.NaN 与 NaN 视为不相等

4.2 Object.assign（合并对象）

Object.assign 对象的合并，相当于浅拷贝。

const config1 = {
    host: 'localhost',
    port: 3306,
    name: 'root',
    pass: 'root',
    test: 'test'
};
const config2 = {
    host: 'http://atguigu.com',
    port: 33060,
    name: 'atguigu.com',
    pass: 'iloveyou',
    test2: 'test2'
}
console.log(Object.assign(config1, config2));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.3 Object.setPrototypeOf 和 Object.getPrototypeof

Object.setPrototypeOf 用于设置对象的原型对象，Object.getPrototypeof 用于获取对象的原型对象，相当于 __proto__。

const school = {
    name: '尚硅谷'
}
const cities = {
    xiaoqu: ['北京','上海','深圳']
}
Object.setPrototypeOf(school, cities);
console.log(Object.getPrototypeOf(school));
console.log(school);
1
2
3
4
5
6
7
8
9

5、ES6 模块化

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

模块化的好处

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

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

模块化规范产品

ES6 之前的模块化规范有：

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

ES6 模块化语法

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

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

1、分别暴露

// 单个导出
export let uname = 'Rick';
export let sayHello = function () {
    console.log('Hi, bro!');
}
1
2
3
4
5

2、统一暴露

let uname = 'Rick';
let sayHello = function () {
    console.log('Hi, bro!');
}
// 合并导出
export { uname, sayHello };
1
2
3
4
5
6

3、默认暴露

// 默认暴露
export default {
    uname: 'Rick',
    sayHello: function () {
        console.log('Hi, bro!');
    }
}
1
2
3
4
5
6
7

4、模块导入

1、通用导入方式

import * as m1 from './js/m1.js';
import * as m2 from './js/m2.js';
import * as m3 from './js/m3.js';
1
2
3

2、解构赋值形式导入

import { uname, sayHello } from './js/m1.js';
// 有重复名可以设置别名
import { uname as uname2, sayHello as sayHello2 } from './js/m2.js';
console.log(uname);
// 配合默认导出
import {default as m3} from "./src/js/m3.js";
1
2
3
4
5
6

3、简便方式导入，针对默认暴露

import m3 from "./src/js/m3.js";  // 用导入的模块名称作为函数名
1

5、ES6 使用模块化方式2

将文件导入都写进一个 app.js 文件中，然后在里面写入要导入的模块。app.js 中的内容如下：

import * as m1 from './js/m1.js';
import * as m2 from './js/m2.js';
import * as m3 from './js/m3.js';

console.log(m1);
console.log(m2);
console.log(m3);
1
2
3
4
5
6
7

在 index.html 中引入 app.js 文件内容：

<script src="./app.js" type="module"></script>
1

6、使用 babel 对模块化代码转换

有的浏览器不支持 ES6 语法，这时候就需要使用 babel 来将其转换成 ES5 等价语法。

1、安装工具

npm i babel-cli babel-preset-env browserify(webpack) -D
1

2、编译

npx babel src/js -d dist/js --presets=babel-preset-env
1

3、打包

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

7、ES6 模块化引入 npm 安装的包

npm install jquery
1

再通过 import 导入即可。