master

分支 (1)

管理

管理

master

meiriyiti
/
59-set和map.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <!-- set和map -->
  <!-- object array set map -->
  <!-- object map 存在 键值对 -->
  <!-- array set 存在 一个个的元素 -->

  <!-- <script>
    // 有序: 操作慢
    let arr1 = ["a", "b", "c", "d"]
    let arr2 = ["d", "a", "b", "c"]

    // 无序：操作快
    // 对象是属性的无序集合
    let obj1 = { 1: 100, 2: 200, 3: 300 }
    let obj2 = { 3: 300, 1: 100, 2: 200 }

    // 有一个数据结构有序的，操作快：二叉树
  </script> -->

  <!-- <p id="box" class="container" style="color:red">
    <img src="./xxx.png" alt="">
    <span>span</span>
  </p> -->

  <!-- <script>
    // 书写一个json，描述上面的html
    let vDom = {
      tag:"p",
      props:{
        id:"box",
        className:"container",
        style:"color:red"
      },
      children:[
        {
          tag:"img",
          props:{alt:"",scr:"./xxx.png"}
        },
        {
          tag:"span",
          children:["123"]
        }
      ]
    }
  </script> -->

  <!-- map和object的区别
        1）api不同，Map可以以任意类型为key, object的key只能是字符串
        2）map是有序结构，操作也很快
  -->
  <!-- <script>
    // obj是一个对象，无序的，对象的键只能是字符串
    // let obj = {
    //   key1:"hello1",
    //   key2:"world1",
    //   key3:{a:110}
    // }

    // let m = new Map([
    //   ["key1", "hello1"],
    //   ["key2", "world1"],
    //   ["key3", { a: 110 }],
    // ]);
    // m.set("name", "wangcai")
    // m.set("key2", "world2")
    // m.delete('key2');
    // console.log(m.has("key3"));
    // console.log(m.size);
    // m.forEach((value, key) => console.log(key, value))

    // let m = new Map([
    //   ["key1", "hello1"],
    //   ["key2", "world1"],
    //   ["key3", { a: 110 }],
    // ]);
    // let o = { name: "wc" };
    // m.set(o, "666")
    // function fn() { };
    // m.set(fn, "888")

    // let m = new Map()
    // let obj1 = { a: 1 }
    // let obj2 = { b: 2 }
    // // obj1.xxx = obj2;// 这样写，表示obj1和obj2之间有引用关系了
    // m.set(obj1, obj2);  // 这样写，obj1和obj2是没有引用关系
    // console.log(m.get(obj1));

    // let obj = {} // 无序的，操作快
    // for (let i = 0; i < 1000 * 10000; i++) {
    //   obj[i + ""] = i;
    // }
    // console.time("obj find");
    // console.log(obj['200000']);
    // console.timeEnd("obj find");
    // console.time("obj delete");
    // delete obj['200000']
    // console.timeEnd("obj delete");


    // map是有序的，操作快
    // let m = new Map();
    // for (let i = 0; i < 1000 * 10000; i++) {
    //   m.set(i + '', i)
    // }
    // console.time("map find");
    // console.log(m.has('200000'));
    // console.timeEnd("map find");
    // console.time("map delete");
    // m.delete("200000")
    // console.timeEnd("map delete");

    let m = new Map([
      ["key3", { a: 110 }],
      ["key1", "hello1"],
      ["key2", "world1"],
    ]);

  </script> -->

  <!-- set和数组的区别
        1）api不同,set中不能存储重复数据
        2）set是无序的，操作很快
  -->
  <!-- <script>
    let arr = [1, 2, 4, 3, 7, 5, 6]; // 数组是有序的，操作慢
    let set = new Set([1, 2, 4, 4, 4, 4, 3, 7, 5, 6]);  // set是无序的，操作很快

    set.add(110)
    set.delete(1)
    console.log(set.has(2));
    console.log(set.size);
    // set中是没骨index的
    set.forEach(val => console.log(val))
  </script> -->

  <script>
    let arr = []; // 数组是有序的，操作慢
    for (let i = 0; i < 100 * 10000; i++) {
      arr.push(i)
    }
    console.time("arr unshift");
    arr.unshift("a")
    console.timeEnd("arr unshift");
    console.time("arr push");
    arr.push("b")
    console.timeEnd("arr push");

    console.log("-----------");

    let set = new Set()
    for (let i = 0; i < 100 * 10000; i++) {
      set.add(i)
    }
    console.time("set has");
    set.has(500000)
    console.timeEnd("set has");
    console.time("set add");
    set.add("b")
    console.timeEnd("set add");

  </script>
</body>

</html>