Set
ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 Iterator 接口，所以可以使用 扩展运算符 和 for...of进行遍历集合的属性和方法。
- 声明一个 set
// 声明一个 set let s = new Set() console.log(s, typeof s)
- set 里写入数据
let s = new Set(['喜羊羊','沸羊羊','喜羊羊']) console.log(s)
- size：返回集合的元素个数
let s = new Set(['喜羊羊','沸羊羊','喜羊羊']) console.log(s.size) // 2
- add：增加一个新元素，返回当前集合
let s = new Set(['喜羊羊','沸羊羊','喜羊羊']) s.add('懒羊羊') console.log(s)
- delete：删除元素，返回 boolean 值
let s = new Set(['喜羊羊','沸羊羊','喜羊羊']) s.delete('喜羊羊') console.log(s)
- has：检测集合中是否包含某个元素，返回 boolean 值
let s = new Set(['喜羊羊','沸羊羊','喜羊羊']) console.log(s.has('喜羊羊')) // true
- 清空：clear()
let s = new Set(['喜羊羊','沸羊羊','喜羊羊']) s.clear() console.log(s)
- 使用 for…of 循环
let s = new Set(['喜羊羊','沸羊羊','喜羊羊']) for(let v of s){ console.log(v) // 喜羊羊 沸羊羊 }
Set 集合实践
- 数组去重
let arr = [1,2,3,4,5,4,3,2,1] let result = [...new Set(arr)] console.log(result)
- 数组交集 (原版)
let arr = [1,2,3,4,5,4,3,2,1] let arr2 = [4,5,6,5,6] let result = [...new Set(arr)].filter(item => { let s2 = new Set(arr2) // 4 5 6 if(s2.has(item)){ return true }else{ return false } }) console.log(result)
- 数组交集（简化版）
let arr = [1,2,3,4,5,4,3,2,1] let arr2 = [4,5,6,5,6] let result = [...new Set(arr)].filter(item => new Set(arr2).has(item)) console.log(result)
- 数组的并集
let arr = [1,2,3,4,5,4,3,2,1] let arr2 = [4,5,6,5,6] let union = [...new Set([...arr, ...arr2])] console.log(union)
- 数组的差集
let arr = [1,2,3,4,5,4,3,2,1] let arr2 = [4,5,6,5,6] let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item))) console.log(diff)
Map
ES6 提供了 Map 数据结。它类似于对象，也是键值对的集合。但是 “键” 的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了 iterator 接口，所以可以使用 扩展运算符... 和 for...of 进行遍历。
1.size：返回 Map 的元素个数
// 声明 Map let m = new Map() // 添加元素 m.set('name','青岛') m.set('location','山东') console.log(m.size) // 2
2.set：增加一个新元素，返回当前 Map
// 声明 Map let m = new Map() // 添加元素 m.set('name','青岛') m.set('change',function(){ console.log('青岛欢迎您!!'); }) let key = { school: '青岛大学' } m.set(key, ['黄岛','市南','崂山']) console.log(m)
3.delete：删除元素
// 声明 Map let m = new Map() // 添加元素 m.set('name','青岛') m.set('location','山东') // 删除元素 m.delete('name') console.log(m)
4.get：返回键名对象的键值
// 声明 Map let m = new Map() // 添加元素 m.set('name',['青岛','济南']) // 获取键值 console.log(m.get('name'))
- 5.has：检测 Map 中是否包含某个元素，返回 boolean 值
- 6.clear：清空集合，返回 undefined
// 声明 Map let m = new Map() // 添加元素 m.set('name',['青岛','济南']) // 获取键值 m.clear() console.log(m)
- 7.for…of 遍历（数组的形式输出）
// 声明 Map let m = new Map() // 添加元素 m.set('name',['青岛','济南']) m.set('location','山东') // 遍历 for(let v of m){ console.log(v) }
class 类
ES6 提供了更接近传统语言的写法，引入了 Class（类） 这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作知识一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
- class 声明类
- constructor 定义构造函数初始化
- extends 继承父类
- super 调用父级构造方法
- static 定义静态方法和属性
- 父类方法可以重写
ES5 写法：通过构造函数，实例化对象
// 手机 function Phone(brand, price){ this.brand = brand this.price = price } // 添加方法 Phone.prototype.call = function(){ console.log("我可以打电话!!") } // 实例化对象 let Huawei = new Phone('华为',4999) Huawei.call() console.log(Huawei)
ES6 写法：
class Phone{ // 构造方法 当使用 new 类名 的时候自动执行实例对象上的 constructor 方法 constructor(brand, price){ this.brand = brand this.price = price } // 方法必须使用该语法, 不能使用 ES5 的对象完整形式 call(){ console.log("我可以打电话!!") } } let Xiaomi = new Phone("Xiaomi", 2499) Xiaomi.call() console.log(Xiaomi)
类的静态成员
static 标注的属性和方法，它属于类 Phone，而不属于实例对象 nakia
class Phone{ // 静态属性 static name = '手机' static change(){ console.log("我可以改变世界!!"); } } let nokia = new Phone() console.log(nokia.name) console.log(Phone.name) console.log(nokia.change) console.log(Phone.change)
类继承
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 指向 SmartPhone 的实例对象 this.color = color this.size = size } // 设置子集构造函数的原型 SmartPhone.prototype = new Phone //实例对象得到父级的方法 SmartPhone.prototype.constructor = SmartPhone // 校正 // 声明子类的方法 SmartPhone.prototype.photo = function(){ console.log("我可以拍照") } SmartPhone.prototype.playGame = function(){ console.log("我可以玩游戏") } const chuizi = new SmartPhone('锤子', 2499, '黑色', '5.5inch') console.log(chuizi)
ES6：实现类继承-1
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("拍照") } playGame(){ console.log("玩游戏") } } const xiaomi = new SmartPhone('小米', 1999, '黑色', '4.7inch') console.log(xiaomi)
ES6：实现类继承-2
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("拍照") } playGame(){ console.log("玩游戏") } call(){ console.log("我可以视频通话!!") // 不能调用父类的同名方法, 需重写 } } const xiaomi = new SmartPhone('小米', 1999, '黑色', '4.7inch') xiaomi.call() // 我可以视频通话!!
class 的 get 和 set
- get：取值函数
class Phone{ get price(){ console.log("价格属性被读取了!") return '这是一个返回值!' } } // 实例化对象 let s = new Phone() console.log(s.price)
- set：存值函数
class Phone{ get price(){ console.log("价格属性被读取了!") return '这是一个返回值!' } set price(newVal){ console.log("价格属性被修改了!!"); } } // 实例化对象 let s = new Phone() s.price = 'free'
不积跬步无以至千里 不积小流无以成江海
