set-Map
set
set是一个集合
松散型结构 元素存储 没有key 插入删除速度快 不能排序(无序的)
不能根据当前元素找到相邻的兄弟元素 元素具有唯一性 不能重复
var s = new Set([1,2,3,4,5])
var s = new Set()
将元素加入到集合中
s.add(1);
s.add(2);
s.add(3);
s.add(2);
console.log(s)
删除元素
s.delete(2)
清空集合
s.clear()；
{size:0}
判断当前元素是否在集合中存在
console.log(s.has(2)) false
s.forEach(function(value){
console.log(value)
})
size属性 与数组的length相似 是只读属性
cosnolog.log(s.size)
set去重
var arr=[1,2,1,4,1,2,3,1,2,3,4,1,1,2];
arr = Array.from(new Set(arr));
console.log(arr);
for of 遍历迭代器 iterable
Array Set NodeList HTMLCollection Arguments Map Generator对象 FormData这些都是迭代器
var s = new Set();
s.add(1)
s.add(2)
s.add(3)
for(var value of s){
console.log(s)
}
var arr = [1,2,3]
数组也可以使用for of
for(var value of arr){
cosnole.log(value)
}
var arr = [1,2,2,3,4,5]
这是错误用法 数组不能这样用
for(var [index,value] of arr){
console.log(index,value)
}
var arr = [1,2,2,3,4,5]
arr.forEach(function(item,index){
if(item%2===0) arr.splice(index,1)
})
console.log(arr)
var arr = [1,2,2,3,4,5]
var s = new Set(arr);
s.forEach(function(value){
if(value%2===0) s.delete(value)
})
console.log(s)
案例
<div>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</div>
var s = new Set()
var div = document.querySelector('div')
div.addEventListener('click',clickHandler)
function clickHandler(e){
if(e.target.nodeName !== 'BUTTON') return;
s.add(e.target)
if(s.size === 1){
console.log('您点击了一个标点')
}else if(s.size === 2){
console.log('您点击了两个标签')
}else{
console.log('标签全部点击完成')
}
}
Map
此Map非彼map 和数组的map不是一个东西 这个是Map类型
与对象object相似 object的key只能是字符串和symbol 不是字符串将自动隐士转换为字符串 没有长度
Map可以使用任何数据类型作为key存储任何值，有长度
var o ={a:1};
var o1 = {a :2}
var m =set Map();
m.set("a",1);
m.set(2,3);
m.set(true,false);
m.set(o,o1);
console.log(m.get(true))
console.log(m.get(o))
console.log(m.get(2))
获取存储的变量
console.log(m.size)
判断是否有这个key
console.log(m.has(o));
删除key 对应的value
m.delete(2)
清空map
m.clear();
console.log(m.keys())
console.log(m.values())
遍历m
m.forEach(function(key,value){
console.log(key,value)
})
打印结果如下
for(var [key,value] of m){
console.log(key,value)
}
打印结果如下
遍历所有的keys迭代器
for( var key of m.keys()){
console.log(key)
}
打印结果如下
遍历所有的value迭代器
for(var value of m.values()){
cosnole.log(value)
}
打印结果如下
获取所有的迭代器
for (var [key,value] of m.entries()){
console.log(key,value)
}
打印结果如下
对象和Map的转换和逆转换
entries
var obj ={ a:1,b:2 };
console.log(Object.entries(obj));
可以将对象转换为迭代器放入生成map
var obj = { a: 1, b: 2 };
var m = new Map(Object.entries(obj))
console.log(m)
fromEntries
可以将迭代器转换为对象 比如可以将map转换为对象
var obj = { a: 1, b: 2 };
var o1 = Object.fromEntries(m)
console.log(o1)
数组
var o2 = Object.fromEntries([1,2,3]);
console.log(o2)
案例
<div>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</div>
var btn = document.querySelector('button');
var m = new Map();
m.set(btn[0],btn[1])
m.set(btn[1],btn[2])
m.set(btn[2],btn[3])
m.set(btn[3],btn[4])
btn[0].addEventListener('click',clickHandler)
function clickHandler(e){
console.log(this.taxtContent);
this.removeEventListener('click',clickHandler);
if(m.has(this)){
m.get(this).addEventListener('click',clickHandler);
}
}
Weakset WeakMap
用来对于内存管理进行设置的
WeakSet 弱引用集合
WeakMap 弱引用map
强引用和弱引用
对一个对象的强引用
var 0 = {a:1};
var o1 = o;
o = null;
o1 = null;
前面所学的所有引用赋值都是强引用 删除一个引用关系 另一个不会被删除
删除强引用 弱引用会自动被删除
强引用
强引用
var o = {a:1};
var arr = [];
arr.push(o);
o = null;
console.log(arr)
弱引用
弱引用
var s = new WeakSet();
s.add(o);
o=null;
cosnole.log(s);
