js中的set和map-详解

一、set

定义：

Set类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。Set 构造函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

用法：

1、添加成员-add

let set = new Set()
// set api
// 1、添加成员
set.add('tom')
set.add('jack') //基本数据类型 不能重复添加
set.add('jack')
set.add([1]) //引用数据类型 地址不同
set.add([1])
console.log(set); //Set(4) { 'tom', 'jack', [ 1 ], [ 1 ] }

2、删除成员-delete

set.delete('tom')

3、查看set长度-size

console.log(set.size); // 3 删了一个所以是3

4、set的遍历

// 4、set遍历  keys和values 返回值 都是 值没有区别
console.log(set.keys()); // [Set Iterator] { 'jack', [ 1 ], [ 1 ] }
console.log(set.values()); //[Set Iterator] { 'jack', [ 1 ], [ 1 ] }
console.log(set.entries()); //[Set Entries] {[ 'jack', 'jack' ],[ [ 1 ], [ 1 ] ],[ [ 1 ], [ 1 ] ]}
// 4.1 for遍历
for (let k of set.keys()) {
  console.log(k);
}
// 4.2forEach遍历 
let res = set.forEach((key, value) => {
  console.log(key, value);
});
console.log(res);

5、查看是否存在某一成员-has

console.log(set.has('jack')); //true
console.log(set.has('hello')); //false

6、清空全部set成员

set.clear()
console.log(set); //Set(0) {}

应用：set构造函数可以接受数组或者其他可遍历的数据结构 

数组去重：

let arr = [1, 2, 3, 5, 3, 2];
let result = new Set(arr);
console.log(result); //Set(4) { 1, 2, 3, 5 }
// 将set集合转换为数组
let [...arr2] = result;
console.log(arr2); //[ 1, 2, 3, 5 ]

其它：

原生具备 Iterator 接口的数据结构如下（可以使用for-of遍历）
    Array、Map、Set、String、TypedArray、arguments、NodeList

二、map

定义：

Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。Map 可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

1、Object对象的结构：

{ name: 'zhangsan', age: 12 }

2、Map的结构：

  'name' => 'zhangsan',
  'age' => 12,
  { name: 'lisi' } => 'hello'

用法：

1、创建map集合

let obj = {
  name: 'zhangsan',
  age: 12
}
//遍历键值对组成的数组
let res = Object.entries(obj)
//将数组作为参数放到Map中
let map = new Map(res)
 console.log(map); //Map(2) { 'name' => 'zhangsan', 'age' => 12 }

2、给map添加成员

// 3、给map添加成员
// 引用数据类型 使用变量接收引用数据类型的地址
let temp = {
  name: 'lisi'
}
// 添加以temp为键  hello为值得键值对
map.set(temp, 'hello')
console.log(map);

3、删除成员

map.delete(temp)
map.delete('name')
console.log(map);

4、获取map属性

console.log(map.get(temp));

5、遍历*****与set的区别

console.log(map.keys()); //[Map Iterator] { 'name', 'age', { name: 'lisi' } } 键
console.log(map.values()); //[Map Iterator] { 'zhangsan', 12, 'hello' } 值
console.log(map.entries()); // [Map Entries] {[ 'name', 'zhangsan' ],[ 'age', 12 ],[ { name: 'lisi' }, 'hello' ]}
for (let k of map.keys()) {
  console.log(k);
}
// 遍历每个键值对 的键和值
let result = map.forEach((key, value) => {
  console.log(key, value);
});

三、总结

Set和Map的区别：

1. Set类似于数组、Map类似于对象
2. Set中keys、value都返回下标、Map中的keys返回键、value返回值

Map和Object的区别：