聊一聊我和Set,Map,Object和JSON.stringfy()的爱恨情仇

首先这些东西直白说他们都是对象，应该问题不大。

我new了一个Set对象，然后打印出来得到的是object Set
我new了一个Map对象，然后打印出来得到的是object Map

But我们都知道Map和Set是es6新增的特殊的数据结构。

Map

Map主要是针对于键/值对的集合。

语法：let map = new Map() 它里面的键和值可以是任何类型，(补充，weakMap：弱键，键必须是对象)

使用：

const map = new Map();
let obj = {
    name: "Tom",
    age: 18,
};
map.set("1", "字符串");
map.set(2, "数字");
map.set(["3"], "数组");
map.set(obj, "对象");
map.set(true, "布尔值");

console.log(map);

Map(5) {'1' => '字符串', 2 => '数字', Array(1) => '数组', {…} => '对象', true => '布尔值'}
[[Entries]]
0: {"1" => "字符串"}
    key: "1"
    value: "字符串"
1: {2 => "数字"}
2: {Array(1) => "数组"}
3: {Object => "对象"}
4: {true => "布尔值"}
size: 5
[[Prototype]]: Map

方法：

Map普通方法

Map特殊方法

Set

Set主要用于数组去重。
语法：let set = new Set(),Set可以包含任何js数据类型作为值,WeakSet 的成员只能是对象，而不能是其他类型的值

const set = new Set(["val1", 1, true, {}, undefined, function fun() {}]);

const s = new Set([1, 1, 2, 3, 4, 4, 5, 6, 7, 4, 2, 1]);
//s : 
Set(7) {1, 2, 3, 4, 5, …}
[[Entries]]
0: 1
1: 2
2: 3
3: 4
4: 5
5: 6
6: 7
size: 7
[[Prototype]]: Set

Set 方法

JSON.stringfy()

介绍了map和set其实就是为了引出这个JSON.stringfy()，今天真的被这个东西给搞到心态爆炸。因为项目里刚开始定义了一个set对象，方便去重数组。然后要将这个作为参数传给接口请求数据，代码里使用了JSON.stringfy(set)，刚开始我真的没发现啥问题，然后我就一个一个代码找啊，给我难过的。最后发现接口请求参数没有被传入进去。
首先我们先看一段代码。

const arr =[1,2,3,4,5,6]
console.log(JSON.stringify(arr));

const obj = {name:'Tom',age:21}
console.log(JSON.stringify(obj));


const str = 'I am Mr.Wang,a good sir'
console.log(JSON.stringify(str));

const number = 2023
console.log(JSON.stringify(number));

const boolean =true
console.log(JSON.stringify(boolean));

const symbol = Symbol('Id')
console.log(JSON.stringify(symbol));


console.log(JSON.stringify(undefined));

console.log(JSON.stringify(null));

console.log(JSON.stringify(function(){}));


const map = new Map();
let Obj = {
    name: "Tom",
    age: 18,
};
map.set("1", "字符串");
map.set(2, "数字");
map.set(["3"], "数组");
map.set(Obj, "对象");
map.set(true, "布尔值");
console.log(JSON.stringify(map));

const set =new Set([1,3,3,5,'1',{age:18},{age:18}])
console.log(JSON.stringify(set));

答案

[1,2,3,4,5,6]
{"name":"Tom","age":21}
"I am Mr.Wang,a good sir"
2023
true
undefined
undefined
null
undefined
{}
{}

JSON.stringify()可以用于序列化以下数据类型：

1. 对象（Object）：可以是普通对象（Plain Object），也可以是特殊的对象类型（如Date、RegExp等）。
2. 数组（Array）：可以包含任意类型的元素，包括嵌套的对象和数组。
3. 字符串（String）：表示文本数据。
4. 数字（Number）：表示数值数据。
5. 布尔值（Boolean）：表示逻辑值（true或false）。
6. 空值（null）：表示空值。

但是，JSON.stringify()会跳过以下类型的属性：

1. 函数：JavaScript函数类型不是有效的JSON数据类型，因此会被跳过。
2. Symbol：ES6中的Symbol类型不是有效的JSON数据类型，会被跳过。
3. undefined：在对象属性中，undefined值会被跳过。
4. 循环引用：如果对象属性存在循环引用（即对象之间相互引用），则会引发”TypeError: Converting circular structure to JSON”错误。

关键点
对于Map和Set这两个属性会直接报错，得到undefined。除非你将他们首先转化成数组类型。

列举一些set,map对象转数组的方法

const set =new Set([1,3,3,5,'1',{age:18},{age:18}])
console.log(Object.prototype.toString.call(Array.from(set)) );
console.log(Object.prototype.toString.call([...set]));
let [arr] = set
console.log(Object.prototype.toString.call([arr]));


或者遍历，forEach

let arr = [];
for (let value of set) {
  arr.push(value);
}

let arr = [];
set.forEach(value => {
  arr.push(value);
});