数组-Map数据-Set数据之间的转换

1.数组转Map数据：必须是二维数组

把需要转的二维数组当参数传入Map()

<script>
    var arr = [[1,"hello"],[2,"h5"]]
    var m1 = new Map(arr);
    console.log(m1);
</script>

结果：

 分析：数组转为Map数据，数组必须是二维数组[[]],转换后：数组里面的小数组中第一个元素是key值（键值），第二个是value值。

2.Map数据转数组： 调用Array.from静态方法 

使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组

静态方法？

一般对象调方法(函数)用点语法，这里Array是官方给的内置函数，from也是一个函数，函数调函数这种就是 静态方法。

<script>
    //二维数组转为 Map数据
    var arr = [[1,"hello"],[2,"h5"],[3,{name:"blue"}]]
    var m1 = new Map(arr);
    console.log(m1);    //Map(3) {1 => 'hello', 2 => 'h5', 3 => {…}}

    //Map数据转为二维数组
    var arr1 = Array.from(m1);
    console.log(arr1);  // [[1,"hello"],[2,"h5"],[3,{name:"blue"}]]
    
    //二维数组转换为Map数据，再由Map数据转换为二维数组,两种是否相等？
    console.log(arr1 == arr);  //false 已经不相等

    //二维数组转换为Map数据，再由Map数据转换为二维数组，数组中的引用数据是否还相等？
    console.log(arr[2][1] == arr1[2][1]); //true 相等
                                          //转换前后两个数组已经不是同一个，但内部的引用数            
                                          //据还是同一个引用
</script>

 3.数组转集合Set()

把数组当参数传入Set()

<script>
    var arr = [100,200,100,{age:20},{age:20}];
    var s1 = new Set(arr);
    console.log(s1);     //Set(4) {100, 200, {…}, {…}}
    console.log(s1.size);//4
</script>

分析：因为集合的互异性，所以重复的数据会去重，两个形式一样的对象 {age:20}和{age:20}，其引用地址不同，所以是两个对象，不存在去重。

所以生成的集合value值有4个，所以size为4

4.集合Set()转数组

01.使用 Array.from 函数可以将一个 Set()集合转换成一个数组

<script>
    var arr = [100,200,100,{age:20},{age:20}];
    var s1=new Set(arr); 
    console.log(s1); //去重了的 Set(4) {100, 200, {…}, {…}}
    var arr1 = Array.from(s1); //因为前面去重了，这里转成的数组，会少元素                             
    console.log(arr1);         //(4) [100, 200, {…}, {…}]

    console.log(arr1 == arr);  // false 因为有去重，所以前后两数组必定不等
    //现在主要验证：数组转为集合，再由集合转为数组的过程中，引用数据发生变化没
    console.log(arr[4]===arr1[3]);//true
</script>

分析： 数组转为集合，再由集合转为数组的过程中，数组中保存的引用数据没有发生变化，变得只是由于去重，使得引用数据索引变了而已，引用数据本身没有变化。这点与二维数组转换为Map数据，再由Map数据转换为二维数组，数组变化前后其中保存的引用数据还是同一个引用一样。

02. 用...操作符，将 Set 转 Array

<script>
    // Array 转 Set
    var mySet = new Set(["value1", "value2", "value3"]);
    // 用...操作符，将 Set 转 Array
    var myArray = [...mySet];
    console.log(myArray); // ['value1', 'value2', 'value3']
</script>

5.多个数组转为Set(集合)和Map

<script>
    var arr1 = [10,20];
    var arr2 = [30,40];
    var arr3 = [200,304];
    //多个数组转为Set集合 利用扩展运算符 ...
    var s1 = new Set([...arr1,...arr2,...arr3]);
    console.log(s1); //Set(6) {10, 20, 30, 40, 200, …}
    //多个数组转为Map数据 想办法把多个数组转为二维数组
    //arr1本身是数组，再在外面套一层数组就是二维数组了
    var m1 = new Map([arr1,arr2,arr3]);
    console.log(m1); //Map(3) {10 => 20, 30 => 40, 200 => 304}
</script>

 6.Map数据的克隆

<script>
    var m1 = new Map([[1,20],[2,{age:21}]]);
    var m2 = new Map(m1);
    console.log(m1);        //Map(2) {1 => 20, 2 => {…}}
    console.log(m2);        //Map(2) {1 => 20, 2 => {…}}
    console.log(m1 == m2);  //false 虽然m1和m2打印出的形式是一样的（克隆），但
                            //m1 和 m2 根据以前经验，是由new两次生成的对象，肯定不相等

    //但是Map对象m1中保存的引用数据，和克隆体出的Map对象m2保存的引用数据是同一个引用
    //所以 克隆过程中，引用数据的克隆是属于 浅拷贝（拷贝一份引用），而不是深拷贝(重新生成一个对象)          
    console.log(m1.age === m2.age);  //true
    
</script>

克隆：Map()函数里面传一个Map数据m1，生成的Map数据m2，m1和m2在形式上是一样的。但是m1 和 m2 根据以前经验，是由new两次生成的对象，肯定不相等（克隆结果只是形式是一样）。但是Map对象m1中保存的引用数据，和克隆体出的Map对象m2保存的引用数据是同一个引用，所以 克隆过程中，引用数据的克隆是属于 浅拷贝（拷贝一份引用），而不是深拷贝(重新生成一个对象)  

6.Map的合并

合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的

<script>
    var first = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
    var second = new Map([[1, 'uno'], [2, 'dos']]);
    
    console.log([...first]);  //[[1, 'one'], [2, 'two'], [3, 'three']]
    console.log([...second]); //[[1, 'uno'], [2, 'dos']]
    var merged = new Map([...first, ...second]);
    console.log(merged);   //Map(3) {1 => 'uno', 2 => 'dos', 3 => 'three'}
</script>

扩展运算符是三个点（...）。用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。

只要是具有遍历器的类数组对象（可以遍历），都可以利用扩展运算符转为真正的数组，同样Map也可以

7.string转为 Set

<script>
    // String 转 Set
    var mySet = new Set('hello');  
    console.log(mySet);// Set(4) {"h", "e", "l", "o"}
    // 注：Set 中 toString 方法是不能将 Set 转换成 String
</script>

8.一些特殊情况

<script>
    var s1 = new Set("  he l l o 华清远见 \n");
    console.log(s1);
</script>

分析：空字符串"" 和  \n 两种字符渲染的结果是一样的，但是是两种不同的编码，所以通过Set()看到的两个空字符串" "其实代表的意义是不一样的。