ES6 set數據結構/map數據結構

ES6中新增，set集合和map集合就是一種數據的存儲結構(在ES6之前數據存儲結構只有array,object)，不同的場景使用不同的集合去存儲數據

1.set集合

Set 對象允許你存儲任何類型的唯一值，無論是原始值或者是對象引用。

• 語法：

//創建一個set集合，傳參為一個可迭代的對象
const s1 = new Set(iterable);

1.1 API

• 例子：

// 1.add() 往創建好的集合中添加數據的
    const s1 = new Set();
    s1.add(1)
    s1.add(2)
    s1.add(3)
    s1.add(4)
	s1.add(1) //無效添加，因為數據重復
    console.log(s1)

// 2.has() 判斷數據是否存在
    console.log(s1.has(1))
    console.log(s1.has(10))

// 3.delete()  返回是否刪除成功
    s1.delete(1)
    console.log(s1)
    console.log(s1.delete(10))

// 4.clear()  清空集合
    s1.clear()
    console.log(s1)

// 5.size屬性  只能讀，不能改
    console.log(s1.size)

// 6.遍歷:for of,因為是一個可迭代的對象
    for(const item of s1){
    	console.log(item)
    }
    // 重寫的實例方法  forEach
    s1.forEach((item, index, s) => {
        // index 不是下標，set集合沒有下標
        // forEach中的第一個參數的值和第二個參數的值是相同的，都表示set中的每一項數據
        console.log(item, index, s)
    })

1.2 使用場景

//數組去重
  const arr = [1,1,22,22,3,1,88,88,65,123,444,65];
  const s = new Set(arr);
  console.log([...s]);

//或者一句話搞定
  const result = [...new Set(arr)];
  console.log(result);//[1,22,3,88,65,123,444,65]

// 兩個數組的交集，并集，差集，結果得到一個新的數組
  const arr1 = [12,34,55,33,11,33,5,12];
  const arr2 = [55,34,11,78,10,19,88,88,99,99];

// 用set完成
// 交集:你有我也有的數組元素  組成一個新數組
  const cross = [...new Set(arr1)].filter(item => arr2.indexOf(item) >= 0);
  console.log(cross);//[]

// 并集：數組合并去重之后的新數組
  const result = [...new Set([...arr1,...arr2])];
  console.log(result);

// 差集：你有我沒有，我有你沒有的數組元素 組成一個新數組
  let arr4 = result.filter(item=>{
      // 判斷arr1里面存在并且arr2不存在的數據  和  arr1里面不存在并且arr2里存在的數據
      return arr1.includes(item) && !arr2.includes(item) || !arr1.includes(item) && arr2.includes(item)
  })
  console.log(arr4)  //[12, 33, 5, 78, 10, 19, 88, 99]

2.map集合(映射)

Map 對象保存鍵值對。任何值(對象或者原始值) 都可以作為一個鍵或一個值。

• 語法：

let swk=new Map()
console.log(swk);//Map(0)

1.1 API

• 例子：

		let swk=new Map();
		 console.log(swk);		

    // 1. 新增map元素
        // Map.set(key,value) 設置Map對象的鍵值對（鍵名，鍵值） 返回當前對象
        swk.set('uname', '孫悟空');
        swk.set('age', 600);
        swk.set('master', '唐僧');
        swk.set('weapon', '金箍棒');
        console.log(swk); //Map(4) {'uname' => '孫悟空', 'age' => 600, 'master' => '唐僧', 'weapon' => '金箍棒'}
        swk.set('age', 601);
        console.log(swk);
        // 鍵不存在，則添加一項
        // 鍵存在，則修改

   // 2. 獲取map元素
        // Map.get(key)返回key值對應的value 如果key不存在則返回undefined
        console.log(swk.get('uname')); //孫悟空
        console.log(swk.get({})); //undefined

   // 3. 判斷元素是否存在  has  返回布爾值
        console.log(swk.has('uname')); //true
        console.log(swk.has({})); //false

  // 4. 刪除映射元素
        swk.delete('weapon');
        console.log(swk); //Map(3) {'uname' => '孫悟空', 'age' => 600, 'master' => '唐僧'}

  //5. 清空映射元素
        // swk.clear();
        // console.log(swk); //Map(0) {size: 0}

  // 6. 映射元素長度
        console.log(swk.size); //3

  // 7. 可以使用for of 循環
        for (let [key, value] of swk) {
            console.log(key, value);
            for (let item in value) {
                console.log(value[item])
            }
        }

        console.log('=====forEach=====');


  // 8. 可以使用forEach 遍歷
        swk.forEach((item, index, map) => {
            console.log(index); //uname age master
            console.log('==========');
            console.log(item); // 孫悟空 60  唐僧
            console.log('==========');
            console.log(map);
            console.log('==========');
        })

1.2 Maps 和 Objects 的區別

• 一個 Object 的鍵只能是字符串或者 Symbols，但一個 Map 的鍵可以是任意值（字符串，對下個，函數，NaN）。
• Map 中的鍵值是有序的，而添加到對象中的鍵則不是。
• Map 的鍵值對個數可以從 size 屬性獲取，而 Object 的鍵值對個數只能手動計算。
• Object 都有自己的原型，原型鏈上的鍵名有可能和你自己在對象上的設置的鍵名產生沖突。