ES6学习笔记03

一、集合

1.1 集合的基本使用

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

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

// 声明一个set
let s = new Set()
let s2 = new Set(['吴', '建', '荣'])

// 元素个数
console.log(s2.size);  // 3
// 添加新元素
s2.add('存')
// 删除元素
s2.delete('建')
// 检查元素
console.log(s2.has('吴'));
// 输出集合
for (let v of s2) {
    console.log(v);  // 吴 荣 存
}
// 清空元素
s2.clear()
console.log(s2);  // Set(0)

1.2 集合的应用场景举例

1. 数组去重
2. 求交集
3. 求并集

let arr = [1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6]
// 1. 数组去重
let result = [...new Set(arr)]
console.log(result); // []1, 2, 3, 4, 5, 6, 7]
// 2. 交集
let arr2 = [4, 5, 6]
let result1 = [...new Set(arr)].filter(item => {
    let s2 = new Set(arr2)
    if (s2.has(item)) {
        return true
    } else {
        return false
    }
})
console.log(result1);[4, 5, 6]
// 3.并集
let union = [...new Set([...arr, ...arr2])]
console.log(union);

二、Map

2.1 Map的基本使用

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

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

// 声明Map
let m = new Map()

// 添加元素
m.set('name', '吴')
// 键和值可以是任意类型
m.set('change', function () { // 这里值是函数
    console.log('change');
})
let key = {  // 这里键是对象
    school: 'NCU'
}
m.set(key, ['n', 'c', 'u'])  // 这里值是数组
console.log(m);

三、class类

3.1 类的基本使用

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

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

3.2 声明类

ES5的方式

// 使用构造函数实例化一个手机类
function Phone(brand, price) {
    this.brand = brand
    this.price = price
}
// 添加方法
Phone.prototype.call = function () {
    console.log('我可以打电话');
}
// 实例化对象
let Huawei = new Phone('华为', 5999)
console.log(Huawei);
// 调用方法
Huawei.call()

ES6的方式 使用class实现

class Shouji {
// 构造方法 名字不能修改
constructor(brand, price) {
    this.brand = brand
    this.price = price
}

// 方法必须使用该语法，不能使用ES5的对象完整形式
call() {
    console.log('我可以打电话！');
}
}

let onePlus = new Shouji('iphone', 1999)
console.log(onePlus);

值得注意的是，构造方法的格式必须是constructor(参数1，参数2…){}，定义方法必须是call(){},不能使用ES5的对象完整形式。

3.3 get和set

当读取对象中的属性时，会自动调用get方法，当修改对象中的属性时，会自动调用set方法。

// get 和 set
class Phone {
    get price() {
        console.log('价格被读取了');
        return 'iloveu'
    }
    set price(newVal) {
        console.log('价格属性被修改了');
    }
}
// 实例化对象
let s = new Phone()
console.log(s.price);  // 价格被读取了 iloveu
s.price = 'free'  // 价格属性被修改了

四、数值方法扩展

4.1 Number.EPSILON

Number.EPSILON是JavaScript表示的最小精度，EPSILON属性的值接近于2.22044604925…E-16。

function equal(a, b) {
    if (Math.abs(a - b) < Number.EPSILON) {  // abs求绝对值
        return true
    } else {
        return false
    }
}

console.log(0.1 + 0.2 === 0.3);  // false
console.log(equal(0.1 + 0.2, 0.3));  // true

4.2 进制表示

let b = 0b1010  // 二进制
let o = 0o777  //八进制
let d = 100  //十进制
let x = 0xff  // 二进制
console.log(x)   // 255

4.3 常用方法

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

console.log(Number.isFinite(100))  // true
console.log(Number.isFinite(100/0))  // false

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

console.log(Number.isNaN(123))  // false

3.Number.parseInt Number.parseFloat字符串转整数 浮点数 并且有自动清除非整数 浮点数功能。

console.log(Number.parseInt('5211314love'))  // 5211314
console.log(Number.pareseFloat('3.1415926神奇'))  // 3.1415926

4.Math.isInteger 判断一个数是否为整数

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

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

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

6.Math.sign 判断一个数到底为正数 负数 还是零,如果是正数返回1，负数返回-1, 零返回0
console.log(Math.sign(100)) // 1
console.log(Math.sign(0)) // 0
console.log(Math.sign(-20000)) // -1

五、对象方法扩展

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

console.log(Object.is(120, 120));  // true
console.log(Object.is(NaN, NaN));  // true
console.log(NaN === NaN);  // false

2.Object.assign 对象的覆盖 第一个参数是原对象，第二个参数是覆盖的对象，当第一个对象的属性中包括第二个对象没有的属性，则不能覆盖。

const config1 = {
 host: 'loaclhost',
    port: 3306,
    name: 'root',
    pass: 'root'
}
const config2 = {
    host: 'http://baidu.com',
    port: 33060,
    name: 'baidu.com',
    pass: '123456'
}
console.log(Object.assign(config1, config2));  // 覆盖

3.Object.setPrototypeOf 设置原型对象
4.Object.getPrototyoeOf 获取原型对象

const school = {
    name: 'ncu'
}
const city = {
    name: 'nanchang'
}
Object.setPrototypeOf(school, city)  // 设置school对象的原型对象为city
console.log(Object.getPrototypeOf(school));  // city对象
console.log(school);

六、模块化

6.1 ES6模块化语法

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

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

6.2 模块暴露的语法汇总

1.分别暴露

export let school = 'ncu'

export function teach() {
	console.log('study')
}

2.统一暴露

export let school = 'ncu'

function findJob() {
	console.log('我们可以帮你！')
}

export {school, findJob}

3.默认暴露

export default {
	school: 'NCU'
	change: function() {
		console.log('change')
	}
}

6.3 模块化代码转换(babel打包)

Babel是一个js编译器，他能够将比较新的JS语法代码转换成浏览器兼容的ES5代码

<!-- 原目录存在一个home.html和一个名为src的文件夹，该文件夹下有个名为js的文件夹，js文件夹存放了js文件 -->

<!-- 1. 安装工具 babel-cli babel-preset-env browerify(webpack):npm i babel-cli babel-preset-env browserify -D
        安装完成后，原目录下会出现一个node_modules文件夹，package-lock.json的文件以及package.json文件
     2. 生成dist文件:npx babel src/js -d dist/js dist文件下的js文件是babel转换后的结果
        原目录下多了一个dist文件夹，dist文件夹里有一个js文件夹，js文件夹里放有转换后的js文件
        这里使用babel 将src/js目录下的js文件转换为浏览器兼容的js文件，并存放在dist/js文件下
     3. 打包:npx browserify dist/js/app.js -o dist/bundle.js
        原目录的dist文件夹下多了一个名为bundle.js的文件夹
-->
<!-- 直接引入bundle.js就能运行打包好了的文件了 -->
<script src="dist/bundle.js"></script>