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 进行遍历。
- size：返回 Map 的元素个数
// 声明 Map
let m = new Map()
// 添加元素
m.set('name','青岛')
m.set('location','山东')
console.log(m.size) // 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)
- get：返回键名对象的键值
// 声明 Map
let m = new Map()
// 添加元素
m.set('name',['青岛','济南'])
// 获取键值
console.log(m.get('name'))
- has：检测 Map 中是否包含某个元素，返回 boolean 值
- clear：清空集合，返回 undefined
// 声明 Map
let m = new Map()
// 添加元素
m.set('name',['青岛','济南'])
// 获取键值
m.clear()
console.log(m)
- 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'
不积跬步无以至千里 不积小流无以成江海
