Set 和 Map 都是 ES6 中新增的数据结构,是对当前 JS 数组和对象这两种重要数据结构的扩展.
Set 类似于数组,但数组可以允许元素重复,Set 不允许元素重复
Map 类似于对象,但普通对象的 key 必须是字符串或者数字,而 Map 的 key 可以是任何数据类型
1.Set
数组是一系列有序的数据集合,而Set是一系列无序,没有重复值得数据集合
const setDemo = new Set();
setDemo.add(1);
setDemo.add(3); //add方法每次只能添加一个成员,且不能重复
console.log(setDemo); //Set(2) {1, 3}
1.1 Set实例的方法和属性
- add(value):添加元素,返回 Set 实例本身。
- delete(value):删除元素,返回一个布尔值,表示删除是否成功。
- has(value):返回一个布尔值,表示该值是否是 Set 实例的元素。
- clear():清除所有元素,没有返回值。
- size:获取元素数量。
console.log(setDemo.size); //2
setDemo.add(4).add(5).add(8);
console.log(setDemo); //Set(5) {1, 3, 4, 5, 8}
setDemo.delete(8);
console.log(setDemo); //Set(4) {1, 3, 4, 5}
console.log(setDemo.has(8)); //false
console.log(setDemo.has(3)); //true
setDemo.clear()
console.log(setDemo); //Set(0) {size: 0}
Set 实例的遍历,可使用如下方法
//forEach():使用回调函数遍历每个成员。
const s = new Set();
s.add('张三').add('李四').add('王麻子');
console.log(s);
s.forEach(function(value, key, set) {
console.log(value, key, set);
//张三 张三 Set(3) {'张三', '李四', '王麻子'}
//李四 李四 Set(3) {'张三', '李四', '王麻子'}
// 王麻子 王麻子 Set(3) {'张三', '李四', '王麻子'}
});
1.2 Set构造函数的参数
//1.数组对参数
const ss = new Set([1, 23, 3, 2, 1]);
console.log(ss); //Set(4) {1, 23, 3, 2}
// 2.字符串
const str = new Set('hello')
console.log(str); //Set(4) {'h', 'e', 'l', 'o'}
1.3 Set的应用
①数组或者字符串去重
②不需要通过下标访问,只需要遍历时
③使用set提供的方法和属性时
2.Map
const mapDemo = new Map();
mapDemo.set('username', 'zs');
console.log(mapDemo); //Map(1) {'username' => 'zs'}
//基本数据类型和引用数据类型都可以作为键,但是对象就不可以只能是字符串
mapDemo.set(true, 'true');
mapDemo.set({}, 'object');
mapDemo.set({
'name': 'lisi'
}, 'object');
console.log(mapDemo); //Map(4) {'username' => 'zs', true => 'true', {…} => 'object', {…} => 'object'}
2.1 Map实例的方法和属性
set:设置成员 key 和 value get:获取成员属性值 has:判断成员是否存在 delete:删除成员 clear:清空所有 size:获取成员的数量
const mapfn = new Map();
mapfn.set('河南省', '慧点科技').set('前端', '第一名');
console.log(mapfn); //Map(1) {'河南省' => '慧点科技'}
console.log(mapfn.get('河南省')); //慧点科技
console.log(mapfn.has('河南省')); //true
// mapfn.delete('前端');
console.log(mapfn); //Map(1) {'河南省' => '慧点科技'}
// mapfn.clear();
console.log(mapfn); //Map(0) {size: 0}
//forEach
mapfn.forEach(function(value, key, set) {
console.log(value, key, set);
//慧点科技 河南省 Map(2) {'河南省' => '慧点科技', '前端' => '第一名'}
//第一名 前端 Map(2) {'河南省' => '慧点科技', '前端' => '第一名'}
});
2.2 Map构造函数的参数
//将数组作为参数传到Map实例中
console.log(new Map([ ['name', '智游集团'],
['age', 18],
], [ ['name', '百知教育'],
['age', 20]
]));