一、 Set
1、基本介绍
Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。NaN和undefined都可以被存储在Set 中, NaN之间被视为相同的值(尽管 NaN !== NaN)
语法:new Set([iterable]);
参数:iterable
如果传递一个可迭代对象,它的所有元素将被添加到新的 Set中。如果不指定此参数或其值为null,则新的 Set为空
返回值:一个新的Set对象。
2、 size属性
返回Set对象的值的个数
3、 add
Set.prototype.add(value)
在Set对象尾部添加一个元素。返回该Set对象。
4、 delete
Set.prototype.delete(value)
移除Set的中与这个值相等的元素,(即如果该元素存在,返回true,否则返回false)
5、 clear
Set.prototype.clear()
移除Set对象内的所有元素。
6、 has
Set.prototype.has(value)
返回一个布尔值,表示该值在Set中存在与否。
7、 values
Set.prototype.values()
返回一个新的迭代器对象,该对象包含Set对象中的按插入顺序排列的所有元素的值。
8、 keys
Set.prototype.keys()
与values()方法相同,返回一个新的迭代器对象,该对象包含Set对象中的按插入顺序排列的所有元素的值。
9、 entries
Set.prototype.entries()
返回一个新的迭代器对象,该对象包含Set对象中的按插入顺序排列的所有元素的值的[value, value]数组。为了使这个方法和Map对象保持相似, 每个值的键和值相等。
10、forEach
Set.prototype.forEach(callbackFn[, thisArg])
按照插入顺序,为Set对象中的每一个值调用一次callBackFn。如果提供了thisArg参数,回调中的this会是这个参数。
11、 数组去重
var set= new Set(arr2); arr2:需要去重的数组
代码示例:
<script>
/* let set = new Set([1,2,3,4,4,NaN,NaN])
console.log(set);*/
let set = new Set()
//C
set.add(1);
set.add(2);
set.add(3);
console.log(set,set.size);
//D
/*set.delete(1);
console.log(set);
set.clear()
console.log(set);*/
//R
console.log(set.has(11));
for (let item of set.entries()){
console.log(item);
}
set.forEach((item)=>{
console.log(item)
})
for(let item of set){
console.log(item)
}
</script>
效果图:
二、 Map
1、基本介绍
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值
语法:new Map([iterable])
参数:iterable
Iterable 可以是一个数组或者其他 iterable 对象。一般参数为具有两个元素的数组的数组。 每个数组中的两个元素都会被当做键值对添加到新的 Map。null 会被当做 undefined。
返回值:一个新的Map对象。
2、 size属性
返回Map对象的键/值对的数量
3、set
Map.prototype.set(key, value)
设置Map对象中键的值。返回该Map对象。
4、 get
Map.prototype.get(key)
返回键对应的值,如果不存在,则返回undefined。
5、 delete
Map.prototype.delete(key)
移除任何与键相关联的值,并且返回该值,该值在之前会被Map.prototype.has(key)返回为true。之后再调用Map.prototype.has(key)会返回false。
6、 clear
Map.prototype.clear()
移除Map对象的所有键/值对 。
7、 has
Map.prototype.has(key)
返回一个布尔值,表示Map实例是否包含键对应的值
8、 keys
Map.prototype.keys()
返回一个新的 Iterator对象, 它按插入顺序包含了Map对象中每个元素的键
9、 values
Map.prototype.values()
返回一个新的Iterator对象,它按插入顺序包含了Map对象中每个元素的值
10、 entries
Map.prototype.entries()
返回一个新的 Iterator 对象,它按插入顺序包含了Map对象中每个元素的 [key, value] 数组。
11、 forEach
Map.prototype.forEach(callbackFn[, thisArg])
按插入顺序,为 Map对象里的每一键值对调用一次callbackFn函数,返回value值。如果为forEach提供了thisArg,它将在每次回调中作为this值。
代码示例:
<script>
/*let map = new Map([["a","a-val"],["b","b-val"],["c","c-val"]]);
console.log(map)*/
let map = new Map();
map.set("a","a-val")
map.set("b","b-val")
map.set("c","c-val")
console.log(map,map.get("b"))
for (let item of map){
console.log(item);
}
for(item of map.values()){
console.log(item)
}
map.forEach( (item)=>{
console.log(this,item)
},{test:"test"})
</script>
效果图:
三、 Objects 和 maps 的比较
Object 和 Map 类似的是,它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。因此过去我们一直都把对象当成 Map 使用。不过 Map 和 Object 有一些重要的区别,在下列情况里 Map 会是更好的选择:
- 一个对象的键只能是字符串或者 Symbols,但一个 Map 的键可以是任意值,包括函数、对象、基本类型
- 你可以通过 size 属性直接获取一个 Map 的键值对个数,而 Object 的键值对个数只能手动计算。
- Map 是可迭代的,而 Object 的迭代需要先获取它的键数组然后再进行迭代。一个Map对象以插入顺序迭代其元素 — 一个 for…of 循环为每次迭代返回一个[key,value]数组
- Object 都有自己的原型,所以原型链上的键名有可能和对象上的键名产生冲突。虽然 ES5 开始可以用 map = Object.create(null) 来创建一个没有原型的对象,但是这种用法不太常见。
- Map 在涉及频繁增删键值对的场景下会有些性能优势。