一、Set类型
（1）什么是Set
Set是ES6提供的一种集合类型，内部可以存储多个没有顺序的、不能重复的数据！
（2）基本语法
// 创建空集合对象
const set = new Set() // new Set([])
// 创建包含数据的集合对象
const set = new Set([1,2,2,3,4,5])
（3）常见函数
-
add(dat)：向集合中添加一个数据 -
delete(dat)：删除集合中的一个数据 -
has(dat)：判断集合中是否包含某个数据，类似数组中的includs() -
clear()：清空集合中的所有的数据 -
size()：获取集合中数据的总数 -
forEach()：遍历集合中的所有数据，和数组的forEach()功能相同
二、Map类型
（1）什么是Map
Map是ES6中提供的一种映射、字典类型，可以包含多个key:value键值对数据，其中key可以是任意类型的、不能重复的数据；是对原生JSON对象的扩展
（2）基本语法
创建空映射/字典
const map = new Map()
// const map = new Map({}) // 错误语法
（3）常见函数
-
set(key, value)：给Map中添加一个数据 -
get(key)：从Map中根据key获取对应的value -
has(key)：判断Map中是否包含某个key值 -
delete(key)：从Map中根据key删除一个数据 -
forEach()：遍历Map数据 -
clear()：清空Map
三、函数扩展
（1） 默认参数
一个函数声明完成后，调用执行时传递的参数数据，不一定满足形式参数的需要
// 1、原生JS中，原始函数出现的参数问题
function fn(n1, n2, n3) {
console.log(n1, n2, n3)
var _total = n1 + n2 + n3
console.log("_total: ", _total)
}
// 正常调用
fn(11, 22, 33)
// 缺少参数
fn(12, 23)
// 2、原生JS解决参数缺失问题
function fn2(n1, n2, n3) {
// 参数重新赋值：如果某个参数缺失，就会赋值1（默认值）
n1 = n1 || 1
n2 = n2 || 1
n3 = n3 || 1
console.log(n1, n2, n3)
var _total = n1 + n2 + n3
console.log("_total: ", _total)
}
// 正常调用
fn2(11, 22, 33)
// 缺少参数
fn2(12, 23)
// 3、ES6中，可以给形式参数赋值默认数据
// 如果某个形式参数没有传递数据，就使用默认数据参与运算
function fn3(n1 = 1, n2 = 1, n3 = 1) {
console.log(n1, n2, n3)
_total = n1 + n2 + n3
console.log('_total', _total)
}
fn3(4, 5, 6)
fn3(6, 7)
fn3()
(2） 箭头函数
基本语法
// 原始函数
function fn (n1, n2) {
return n1 + n2
}
// 赋值函数
const fn = function(n1, n2) {
return n1 + n2
}
// ES6箭头函数
const fn = (n1, n2) => n1 + n2
四、面向对象扩展
（1） 基本语法
ES6提供一个新的关键词class，专门用来声明类型
// 声明一个用户类型
class User {
// ... 声明各种属性、方法
}
// 创建对象
const tom = new User()
（2） 构造方法
构造方法：主要通过类型创建对象时，针对属性进行初始化的操作
// 原生
function Person(name) {
this.name = name
}
// ES6
// 声明一个用户类型
class User {
// 初始化属性的构造函数
constructor(username, password, nickname) {
this.username = username // 账号
this.password = password // 密码
this.nickname = nickname // 昵称
}
}
// 创建对象
const tom = new User('tom', '123', "汤姆")
console.log('tom', tom)
（3） 成员属性/方法
每个类型创建的多个对象，都会包含自己的特征属性、行为方法；这些属性和方法称为成员属性或者成员方法：
通过这个类型创建的对象，都包含这些属性和方法，但是每个对象的数据都是互相独立的，如用户的账号、密码；不同的用户都包含账号/密码特征属性，但是每个用户的账号/密码数据都是互不相同的！
// 声明一个用户类型
class User {
// 初始化属性的构造函数
constructor(username, password, nickname) {
// 成员属性
this.username = username // 账号
this.password = password // 密码
this.nickname = nickname // 昵称
}
// 成员方法
showInfo() {
console.log(`账号：${this.username},昵称：${this.nickname}`)
}
}
// 创建对象
const tom = new User('tom', '123', "汤姆")
console.log('tom', tom, "；账号：", tom.username)
console.log("账号:", tom.username) // 访问属性=常用
console.log("账号：", tom['username']) // 访问属性
tom.showInfo()
const jerry = new User('jerry', 'qwe', "杰瑞")
console.log('jerry', jerry, "；账号：", jerry.username)
jerry.showInfo()
（4） 静态属性/方法
原生面向对象，发表文章，文章包含一个公共属性：最多字数；通过原型对象上挂载属性实现的
function Article() {}
// 最大字数属性，通过Article创建的所有对象，都可以使用这个数据
Article.prototype.maxWords = 2000
ES6中针对所有对象都需要访问的公共数据和方法，提供了一种静态属性/静态方法的语法
class Article {
// 静态属性：控制文章最大字数，所有当前类型的对象都需要访问的公共数据
static maxWords = 2000
// 静态方法
static getOrgInfo() {
console.log("公共信息：网站介绍")
}
constructor(title, content) {
// 成员属性：每篇文章对象的数据都互相独立
this.title = title
this.content = content
}
}
// 静态属性和静态方法，只能被类型访问
console.log(Article.maxWords)
Article.getOrgInfo()
// 不允许被对象访问
const a1 = new Article("标题", "内容")
console.log(a1.maxWords) // undefined
（5） 面向对象特性
面向对象包含三大特征：封装、继承、多态
- 封装：数据的统一管理，就是一种封装 的形式
- 继承：类型和类型之间的关系，通过继承关系，子类可以复用父类的代码
- 多态：基于继承实现功能的扩展
① 继承
ES6提供了继承的简洁语法，对原生JS继承（原型继承/冒充继承/组合继承/寄生组合继承）方式进行了优化
// 面向对象特征：封装、继承、多态
class Animal { // 父类
// 抽取公共属性进行<封装>
constructor(nickname, color, age) {
this.nickname = nickname // 昵称
this.color = color // 颜色
this.age = age // 年龄
}
// 抽取公共方法进行<封装>
move() {
console.log(`${this.nickname}在快速移动中`)
}
}
// 子类：继承
// ES6提供了extends关键字，主要用于继承
// 猫 继承 动物
class Cat extends Animal { }
// 老鼠
class Mouse extends Animal {
// 成员属性扩展
constructor(nickname, color, age, gender) {
// 通过父类初始化公共属性：使用super关键字指代父类
super(nickname, color, age)
// 扩展自己的属性
this.gender = gender
}
// 子类中重写父类的函数/方法
move() {
super.move()//调用父类移动的方法
console.log("老鼠在逃命中...") // 扩展方法功能
}
}
// 鸟
class Birds extends Animal {
move() {
super.move()
console.log("小鸟在飞行中...")
}
}
// 创建对象
const tom = new Cat('汤姆', "蓝色", 12)
console.log(tom)
const jerry = new Mouse('杰瑞', '棕色', 8, "女")
console.log(jerry)
const birds = new Birds('愤怒的小鸟', '黑色', 5)
// 表现：两个对象调用的都是同一个函数，但是运行结果不同
// 多态：操作同一个行为，表现出来不同的状态
jerry.move() // 调用了jerry移动的函数
birds.move() // 调用了birds移动导函数
五、循环的扩展
原生JS中提供了各种循环，用于数据的遍历
whiledo-whilefor(初始化;条件;自增){...}for(let 变量 in 集合数据) {..}-
forEach()循环函数
（1） 基本语法
ES6又提供了一种新的循环结构，for..of循环，对有的循环进行扩展
// 声明数组
const arr = ['html/css', 'javascript', 'nodejs', 'vue']
// for..in
// 临时变量index，遍历的是索引数据
for (let index in arr) {
console.log(index, "-->", arr[index])
}
// for..of
// 临时变量name，遍历的就是真实数据
for (let name of arr) {
console.log("for.of循环：", name)
}
（2） 底层原理
数组可以使用for.of，对象不可以使用for.of循环，因为对象中没有包含迭代器属性
如何让对象，也支持for.of循环？可以给对象添加Symbol(iterator)迭代属性
class User {
constructor(username, password, nickname ){
this.username = username
this.password = password
this.nickname = nickname
}
// 提示代码
[Symbol(iterator)]() {
// TODO 获取遍历数据
}
}
const tom = new User('tom', '123', "汤姆")
// 需要这样遍历，尝试让User类型的对象支持for.of循环
for(let u of tom){
console.log("用户：", u)
}
