（day 23）JavaScript学习笔记（内置对象2之JSON、Set、Map）

概述 

        这是我的学习笔记，记录了JavaScript的学习过程。在写博客的时候我会尽量详尽的记录每个知识点。如果你完全没接触过JavaScript，那么这一系列的学习笔记可能会对你有所帮助。

        今天继续学习JavaScript内置的对象，主要是Json、Set、Map。

1.内置对象JSON

        JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于ECMAScript的一个子集，采用完全独立于语言的文本格式来存储和表示数据。JSON是理想的数据交换语言，易于人阅读和编写，同时也易于机器解析和生成。

        JavaScript中的JSON对象提供了两个主要的方法： JSON.parse()和JSON.stringify()，分别用于将JavaScript对象或值转换为JSON字符串，以及将JSON字符串解析为JavaScript对象或值。

        JSON支持的数据类型有对象、数组、数字，字符串、布尔、null。它的key必须用双引号括起来，如下代码是写了一个符合JSON格式的字符串，它的类型是String类型。

var postJSON = `{
    "id":1001,
    "title":"标题",
    "comments":[
        {
            "userId":2001,
            "comment":"这是2001的评论"
        },
        {
            "userId":2002,
            "comment":"这是2002的评论"
        },
    ],
    "publishned":true,
    "author":null
}`;
console.log(postJSON);
console.log(typeof postJSON); //输出：string

         JSON.parse()方法用于将一个JSON字符串解析为JavaScript对象或值。如下代码：

ojbJSON = JSON.parse(postJSON);
console.log(ojbJSON); //{id: 1001, title: '标题', comments: Array(2), publishned: true, author: null}
console.log(typeof ojbJSON); //object

        JSON字符串最外层也可以是数组的形式 ，如下代码所示：

var comments = `[
    {
        "userId":2001,
        "comment":"这是2001的评论"
    },
    {
        "userId":2002,
        "comment":"这是2002的评论"
    }
]`;

console.log(JSON.parse(comments));//(2) [{…}, {…}]

         JSON.stringify()方法用于将JavaScript值（对象或数组）转换为一个JSON字符串。如下代码所示，我们先定义一个对象，再把它转换为JSON字符串：

var role = {
  id: 1001,
  name: "唐三",
  skills: ["鬼影迷踪", "紫极魔瞳", "玄玉手", "蓝银霸王枪", "无定风波"],
};

console.log(role); //{id: 1001, name: '唐三', skills: Array(5)}
console.log(typeof role); //object

roleStr = JSON.stringify(role); //将对象转换为字符串
console.log(roleStr); //{"id":1001,"name":"唐三","skills":["鬼影迷踪","紫极魔瞳","玄玉手","蓝银霸王枪","无定风波"]}
console.log(typeof roleStr); //string

         上面代码中console.log（roleStr）运行结果如下图所示：

        这种格式不好阅读，我们在转换的时候可以传递参数，如下代码所示：

console.log(JSON.stringify(role, null, 2));

        运行结果如下所示，这样阅读就清晰多了。

 

         JSON.stringify(参数1，参数2，参数3)方法中的三个参数说明如下：

• 参数1：将要序列化成JSON字符串的值。
• 参数2：（可选）如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的JSON字符串中。
• 参数3：（可选）用于指定缩进空格数；如果省略该参数，则将返回没有空格的字符串。如果这个参数是数字，它表示有多少空格；如果这个参数是字符串，那么该字符串就被当做空格用。

        如下代码演示：

console.log(JSON.stringify(role, ["id", "name"], 2));

        运行输出：

 

2.内置对象set

        在JavaScript中Set表示值的集合，类似于数组，但是成员的值都是唯一的，没有重复的值。Set对象是一种特殊的类型，它允许我们存储任何类型的唯一值，无论是原始值或者是对象引用。        

        Set对象有一些非常有用的方法和属性，比如：

add(value)：向集合中添加一个新的值。
delete(value)：从集合中删除一个值。
has(value)：判断一个值是否在集合中。
clear()：清空集合中的所有元素。
size：返回集合中元素的数量。
        下面是一些使用Set对象的示例：

// 创建一个新的Set对象  
let mySet = new Set();  
  
// 使用add方法添加元素  
mySet.add(1);  
mySet.add(2);  
mySet.add(2); // 这行代码不会添加任何元素，因为值2已经存在于集合中  
  
// 使用has方法检查元素是否存在  
console.log(mySet.has(1)); // 输出: true  
console.log(mySet.has(3)); // 输出: false  
  
// 使用size属性获取集合中元素的数量  
console.log(mySet.size); // 输出: 2  
  
// 使用delete方法删除元素  
mySet.delete(2);  
console.log(mySet.has(2)); // 输出: false  
  
// 使用clear方法清空集合  
mySet.clear();  
console.log(mySet.size); // 输出: 0

        Set对象的一个常见用途是去除数组中的重复项。例如：

let arr = [1, 2, 2, 3, 4, 4, 5];  
  
let uniqueArr = [...new Set(arr)];  //扩展运算符 ... 用于将 Set 对象转换回数组
  
console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5]

        在这个例子中，我们创建了一个新的Set对象，并将数组arr作为参数传递给它。由于Set对象只存储唯一的值，所以当我们将Set对象转换回数组时，重复的元素就被去除了。

        需要注意的是，Set对象中的元素顺序与它们被添加的顺序是一致的（在ES6规范中），但是不同JavaScript引擎的实现可能会有所不同。

        另外，虽然Set可以存储对象作为成员，但由于JavaScript对象是通过引用来比较相等性的，所以如果两个对象即使看起来相同（具有相同的属性和值），在Set中也会被认为是不同的。如果要比较对象的内容是否相等，可能需要自己实现比较逻辑。

3.内置对象Map

        在JavaScript中，Map是一个内置对象，它提供了一种存储键值对的数据结构。与普通的对象（Object）不同，Map允许你使用任何类型的键（对象或原始值），并且它按照插入的顺序迭代元素。

        Map对象提供了一些有用的方法，包括：

set(key, value): 设置Map对象中键的值。返回该Map对象。
get(key): 返回键对应的值，或者返回undefined（如果键不存在）。
has(key): 返回一个布尔值，表示Map对象中是否存在该键。
delete(key): 从Map对象中删除指定的元素，返回true如果删除成功，否则返回false。
clear(): 移除Map对象的所有键/值对。
size: 返回Map对象中的键/值对的数量。
        下面是一些使用Map的示例：

// 创建一个新的Map对象  
let myMap = new Map();  
  
// 使用set方法添加元素  
myMap.set('key1', 'value1');  
myMap.set('key2', 'value2');  
myMap.set(1, 'value3'); // Map允许使用非字符串作为键  
  
// 使用get方法获取元素  
console.log(myMap.get('key1')); // 输出: 'value1'  
console.log(myMap.get(1)); // 输出: 'value3'  
  
// 使用has方法检查键是否存在  
console.log(myMap.has('key2')); // 输出: true  
console.log(myMap.has('key3')); // 输出: false  
  
// 使用size属性获取元素数量  
console.log(myMap.size); // 输出: 3  
  
// 使用delete方法删除元素  
myMap.delete('key1');  
console.log(myMap.has('key1')); // 输出: false  
  
// 使用clear方法清空Map  
myMap.clear();  
console.log(myMap.size); // 输出: 0

        Map对象特别有用在需要保持键值对插入顺序的场合，或者当键是复杂对象时。普通的JavaScript对象将键转换为字符串，并且不保证顺序。而Map对象则不会进行这样的转换，并且会记住元素的插入顺序。

        此外，Map对象还提供了迭代功能，可以使用for...of循环来遍历它的元素：

let myMap2 = new Map();
myMap2.set("a", 1);
myMap2.set("b", 2);
myMap2.set("c", 3);

for (let [key, value] of myMap2) {
  console.log(key, value);
}
// 输出:
// a 1
// b 2
// c 3

        在这个例子中，for...of循环直接解构了Map对象的每个元素，每个元素都是一个包含键和值的数组。

        map也可以用foreach遍历，如下代码演示：

myMap2.forEach((value, key) => {
  console.log(key, value);
});
// 输出:
// a 1
// b 2
// c 3

        总之，Map对象提供了一种强大且灵活的方式来存储和操作键值对，特别是在需要保持键值对插入顺序或者键是复杂对象时，它比普通对象更为适用。 

       以上便是今天的学习内容，如果对你有所帮助，请点个赞再走吧。