怎么建小说网站,设计网站公司开发,wordpress建英文网站,知乎网站建设用的工具文章目录 一、Set集合1.Set的基本使用2.Set的常见方法3.WeakSet使用4.WeakSet的应用 二、Map映射1.Map的基本使用2.Map的常见方法3.WeakMap使用4.WeakMap的应用 三、ES6的其它知识点说明 一、Set集合
1.Set的基本使用
在ES6之前#xff0c;我们存储数据的结构主要有两种我们存储数据的结构主要有两种数组、对象。
在ES6中新增了另外两种数据结构Set、Map以及它们的另外形式WeakSet、WeakMap。
Set是一个新增的数据结构可以用来保存数据类似于数组但是和数组的区别是元素不能重复。
创建Set我们需要通过Set构造函数暂时没有字面量创建的方式
const s1 new Set()
const arr [3, 45, 3]
const s2 new Set(arr)
console.log(s2)// 3, 45我们可以发现Set中存放的元素是不会重复的那么Set有一个非常常用的功能就是给数组去重。
const arr1 [3, 4, 6]
const s3 new Set(arr1)
const arr2 [...s3]
const srr3 Array.from(s3)2.Set的常见方法
Set常见的属性
size返回Set中元素的个数
Set常用的方法
add(value)添加某个元素返回Set对象本身delete(value)从set中删除和这个值相等的元素返回boolean类型has(value)判断set中是否存在某个元素返回boolean类型clear()清空set中所有的元素没有返回值forEach(callback, [, thisArg])通过forEach遍历set
另外Set是支持for-of的遍历的
// 1.创建Set
const set new Set()
console.log(set)// 2.添加元素
set.add(10)
set.add(22)
set.add(35)
set.add(22)
console.log(set)const info {}
const obj {name: obj}
set.add(info)
set.add(obj)
set.add(obj)
console.log(set)// 3.应用场景: 数组的去重
const names [abc, cba, nba, cba, nba]
// const newNames []
// for (const item of names) {
// if (!newNames.includes(item)) {
// newNames.push(item)
// }
// }
// console.log(newNames)
const newNamesSet new Set(names)
const newNames Array.from(newNamesSet)
console.log(newNames)// 4.Set的其他属性和方法
// 属性
console.log(set.size)
// 方法
// 4.1. add方法
set.add(100)
console.log(set)
// 4.2. delete方法
set.delete(obj)
console.log(set)
// 4.3. has方法
console.log(set.has(info))
// 4.4. clear方法
// set.clear()
// console.log(set)
// 4.5. forEach
set.forEach(item console.log(item))// 5.set支持for...of
for (const item of set) {console.log(item)
}3.WeakSet使用
和Set类似的另外一个数据结构称之为WeakSet也是内部元素不能重复的数据结构。
那么和Set有什么区别呢
区别一WeakSet中只能存放对象类型不能存放基本数据类型区别二WeakSet对元素的引用是弱引用如果没有其他引用对某个对象进行引用那么GC可以对该对象进行回收
WeakSet常见的方法
add(value)添加某个元素返回WeakSet对象本身delete(value)从WeakSet中删除和这个值相等的元素返回boolean类型has(value)判断WeakSet中是否存在某个元素返回boolean类型
4.WeakSet的应用
注意WeakSet不能遍历 因为WeakSet只是对对象的弱引用如果我们遍历获取到其中的元素那么有可能造成对象不能正常的销毁。 所以存储到WeakSet中的对象是没办法获取的
那么这个东西有什么用呢
事实上这个问题并不好回答我们来使用一个Stack Overflow上的答案
// 3.WeakSet的应用
const pWeakSet new WeakSet()
class Person {constructor() {pWeakSet.add(this)}running() {if (!pWeakSet.has(this)) {console.log(Type error: 调用的方式不对)return}console.log(running~)}
}let p new Person()
// p null
p.running()
const runFn p.running
runFn()
const obj { run: runFn }
obj.run()二、Map映射
1.Map的基本使用
另外一个新增的数据结构是Map用于存储映射关系。
但是我们可能会想在之前我们可以使用对象来存储映射关系他们有什么区别呢
事实上我们对象存储映射关系只能用字符串ES6新增了Symbol作为属性名key
某些情况下我们可能希望通过其他类型作为key比如对象这个时候会自动将对象转成字符串来作为key
那么我们就可以使用Map
const info { name: why }
const info2 { age: 18 }// 1.对象类型的局限性: 不可以使用复杂类型作为key
// const obj {
// address: 北京市,
// [info]: 哈哈哈,
// [info2]: 呵呵呵
// }
// console.log(obj)// 2.Map映射类型
const map new Map()
map.set(info, aaaa)
map.set(info2, bbbb)
console.log(map)// 3.Map的常见属性和方法
// console.log(map.size)
// 3.1. set方法, 设置内容
map.set(info, cccc)
console.log(map)
// 3.2. get方法, 获取内容
// console.log(map.get(info))
// 3.3. delete方法, 删除内容
// map.delete(info)
// console.log(map)
// 3.4. has方法, 判断内容
// console.log(map.has(info2))
// 3.5. clear方法, 清空内容
// map.clear()
// console.log(map)
// 3.6. forEach方法
// map.forEach(item console.log(item))// 4.for...of遍历
for (const item of map) {const [key, value] itemconsole.log(key, value)
}2.Map的常见方法
Map常见的属性
size返回Map中元素的个数
Map常见的方法
set(key, value)在Map中添加key、value并且返回整个Map对象get(key)根据key获取Map中的valuehas(key)判断是否包括某一个key返回Boolean类型delete(key)根据key删除一个键值对返回Boolean类型clear()清空所有的元素forEach(callback, [, thisArg])通过forEach遍历Map
Map也可以通过for-of进行遍历。
3.WeakMap使用
和Map类型的另外一个数据结构称之为WeakMap也是以键值对的形式存在的。
那么和Map有什么区别呢
区别一WeakMap的key只能使用对象不接受其他的类型作为key区别二WeakMap的key对对象想的引用是弱引用如果没有其他引用引用这个对象那么GC可以回收该对象
WeakMap常见的方法有四个
set(key, value)在Map中添加key、value并且返回整个Map对象get(key)根据key获取Map中的valuehas(key)判断是否包括某一个key返回Boolean类型delete(key)根据key删除一个键值对返回Boolean类型
let obj1 { name: why }
let obj2 { name: kobe }// 1.WeakMap的基本使用
const weakMap new WeakMap()
// weakMap.set(123, aaa)
weakMap.set(obj1, aaa)
weakMap.set(obj2, bbb)obj1 null
obj2 null4.WeakMap的应用
注意WeakMap也是不能遍历的
没有forEach方法也不支持通过for-of的方式进行遍历
那么我们的WeakMap有什么作用呢后续专门讲解
vue的响应式源码 三、ES6的其它知识点说明
事实上ES6ES2015是一次非常大的版本更新所以里面重要的特性非常多
除了前面讲到的特性外还有很多其他特性
1.Proxy、Reflect 我们会在后续专门进行学习。 并且会利用Proxy、Reflect来讲解Vue3的响应式原理
2.Promise 用于处理异步的解决方案后续会详细学习 并且会学习如何手写Promise
3.ES Module模块化开发
从ES6开发JavaScript可以进行原生的模块化开发这部分内容会在工程化部分学习包括其他模块化方案CommonJS、AMD、CMD等方案
