欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Map與WeakMap類型在JavaScript中的使用詳解

 更新時(shí)間：2020年11月18日 08:27:57   作者：陳鶯鶯呀  
這篇文章主要介紹了Map與WeakMap類型在JavaScript中的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

map類型特點(diǎn)與創(chuàng)建方法：

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>


  <script>
    // 對(duì)象的鍵名會(huì)自動(dòng)轉(zhuǎn)為字符串
    // let obj = {
    //   1: 'cyy1',
    //   '1': 'cyy2'
    // };
    // console.log(obj);

    // 對(duì)象的鍵名是對(duì)象時(shí)，會(huì)自動(dòng)轉(zhuǎn)為字符串
    // 讀取時(shí)也要先轉(zhuǎn)為字符串再讀取
    //     let obj = {
    //       name: 'cyy'
    //     };
    //     let obj2 = {
    //       obj: 'cyy2',
    //       [obj]: 'cyy3'
    //     };
    //     console.log(obj2);
    //     console.log(obj2[obj.toString()]);

    // map類型，什么都可以作為鍵，鍵名可以是任何類型
    // let map = new Map();
    // map.set('name', 'cyy');
    // map.set(function() {}, 'cyy2');
    // map.set({}, 'cyy3');
    // map.set(1, 'cyy4');
    // console.log(map);

    // 構(gòu)造函數(shù)創(chuàng)建時(shí)加入數(shù)據(jù)
    let map = new Map([
      ['name', 'cyy'],
      ['age', 18]
    ]);
    console.log(map);

    // 支持鏈?zhǔn)讲僮?
    let str = 'cyy';
    let str2 = str.toUpperCase().substr(1, 2);
    console.log(str2);

    map.set('11', 11).set('22', 22);
    console.log(map);
  </script>
</body>

</html>

map類型增刪改查操作：

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>


  <script>
    let obj = {
      name: 'cyy'
    };
    let map = new Map();
    map.set(obj, 'obj');
    console.log(map.has(obj));
    console.log(map);
    console.log(map.get(obj));
    console.log(map.delete('abc'));
    console.log(map.delete(obj));
    map.clear();
    console.log(map);
  </script>
</body>

</html>

遍歷map類型數(shù)據(jù)：

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>


  <script>
    let map = new Map([
      [1, 11],
      [2, 22]
    ]);
    // console.log(map.keys());
    // console.log(map.values());
    // console.log(map.entries());

    // for (let k of map.keys()) {
    //   console.log(k);
    // }
    // for (let v of map.values()) {
    //   console.log(v);
    // }
    // for (let e of map.entries()) {
    //   console.log(e);
    // }
    // for (let [k, v] of map.entries()) {
    //   console.log(`${k}--${v}`);
    // }

    map.forEach((item, key) => {
      console.log(item + '--' + key);
    })
  </script>
</body>

</html>

map類型轉(zhuǎn)換操作：

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>

  <script>
    let map = new Map([
      ['name', 'cyy'],
      ['age', '18']
    ]);
    // console.log(...map);
    // console.log([...map]);
    // console.log([...map.entries()]);
    // console.log([...map.keys()]);
    // console.log([...map.values()]);

    // let arr = [...map].filter(item => item[1].includes('cyy'));
    let arr = [...map].filter(item => {
      return item[1].includes('cyy');
    });
    // console.log(arr);
    let new_map = new Map(arr);
    console.log(new_map);
    console.log(new_map.values());
    // ...是展開語法
    console.log(...new_map.values());
  </script>
</body>

</html>

map類型管理DOM節(jié)點(diǎn)：

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>
  <div name="cyy1">cyy1</div>
  <div name="cyy2">cyy2</div>

  <script>
    let map = new Map();
    let divs = document.querySelectorAll('div');
    divs.forEach(item => {
      // 往map中壓入數(shù)據(jù)
      map.set(item, {
        content: item.getAttribute('name')
      });
    });
    // console.log(map);
    map.forEach((config, elem) => {
      // console.log(config, elem);
      elem.addEventListener('click', function() {
        console.log(config.content);
      });
    })
  </script>
</body>

</html>

使用map類型控制網(wǎng)站表單提交：

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>
  <form action="#" onsubmit="return post()">
    接受協(xié)議：
    <input type="checkbox" name="agreement" error="請(qǐng)接受協(xié)議"> 我是學(xué)生：
    <input type="checkbox" name="student" error="網(wǎng)站只對(duì)學(xué)生開放">
    <input type="submit" value="提交">
  </form>

  <script>
    function post() {
      let map = new Map();
      let inputs = document.querySelectorAll('[error]');
      console.log(inputs);
      inputs.forEach(item => {
        map.set(item, {
          error: item.getAttribute('error'),
          status: item.checked
        });
      });
      // console.log(map);
      return [...map].every(([elem, config]) => {
        // 短路操作，前面為真，則不會(huì)執(zhí)行后面
        // 前面會(huì)假，則執(zhí)行后面
        config.status || alert(config.error);
        return config.status;
        // console.log(config);
      });

    }
  </script>
</body>

</html>

WeakMap的語法使用：

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>
  <div>cyy</div>
  <div>cyy2</div>

  <script>
    // WeakMap的鍵只能是引用對(duì)象
    // let map = new WeakMap();
    // map.set('name');
    // console.log(map);

    // map.set([]);
    // console.log(map);

    // let map = new WeakMap();
    // let divs = document.querySelectorAll('div');
    // divs.forEach(item => map.set(item, item.innerHTML));
    // console.log(map);

    // WeakMap也是弱引用類型
    // let arr = [];
    // let map = new WeakMap();
    // map.set(arr, 'cyy');
    // map.delete(arr);
    // console.log(map.has(arr));
    // console.log(map);

    // 弱引用類型，values、keys、entries、迭代循環(huán)都用不了
    let map = new WeakMap();
    // console.log(map.keys());

    for (const iterator of map) {
      console.log(iterator);
    }
  </script>
</body>

</html>

WeakMap弱引用類型體驗(yàn)：

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" >
  <style>

  </style>
</head>

<body>


  <script>
    let a = { name: 'cyy' };
    let b = a;
    let map = new WeakMap();
    map.set(a, 'cuu2');
    console.log(map);
    a = null;
    b = null;
    console.log(map);
    setTimeout(function () {
      console.log(map);
    }, 1000);
  </script>
</body>

</html>

使用WeakMap開發(fā)選課組件：

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" >
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    main {
      width: 100%;
      display: flex;
      flex: 1;
    }

    section {
      border: 2px solid #ddd;
      width: 50%;
      padding: 10px;
    }

    ul {
      list-style: none;
    }

    li {
      padding: 10px;
      border: 2px solid orange;
      margin-bottom: 5px;
      position: relative;
    }

    a {
      display: inline-block;
      position: absolute;
      right: 10px;
      width: 20px;
      height: 20px;
      background: green;
      color: white;
      text-decoration: none;
      line-height: 20px;
      text-align: center;
    }

    #list span {
      background: green;
      border-radius: 5px;
      padding: 5px;
      color: white;
      margin: 5px;
    }

    #list {
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <main>
    <section>
      <ul>
        <li><span>html</span><a href="javascript:;">＋</a></li>
        <li><span>css</span><a href="javascript:;">＋</a></li>
        <li><span>js</span><a href="javascript:;">＋</a></li>
      </ul>
    </section>
    <section>
      <strong id="count">共選了2門課</strong>
      <p id="list">
        <!-- <span>111</span> -->
      </p>
    </section>
  </main>

  <script>
    class Lesson {
      // 構(gòu)造函數(shù)
      constructor() {
        this.lis = document.querySelectorAll('li');
        this.countElem = document.getElementById('count');
        this.listElem = document.getElementById('list');
        // console.log(this.lis, this.countElem, this.listElem);
        this.map = new WeakMap();
      }
      run() {
        this.lis.forEach(li => {
          li.querySelector('a').addEventListener('click', event => {
            let a = event.target;
            // console.log(li);
            // console.log(event.target.parentElement);
            const state = li.getAttribute('select');
            if (state) {
              // 移除
              li.removeAttribute('select');
              this.map.delete(li);
              a.style.backgroundColor = 'green';
              a.innerHTML = '＋';
            } else {
              // 添加
              li.setAttribute('select', true);
              this.map.set(li);
              a.style.backgroundColor = 'red';
              a.innerHTML = '-';
            }
            // console.log(this.map);
            this.render();
          });
        })
      }
      render() {
        this.countElem.innerHTML = `共選了${this.count()}門課`;
        // console.log(this.count());
        this.listElem.innerHTML = this.list();
      }
      count() {
        return [...this.lis].reduce((count, li) => {
          return count += this.map.has(li) ? 1 : 0;
        }, 0);
      }
      list() {
        let lis = [...this.lis].filter(li => {
          return this.map.has(li);
        }).map(li => {
          return `<span>${li.querySelector('span').innerHTML}</span>`;
        }).join('');
        // console.log(lis);
        return lis;
      }
    }
    new Lesson().run();
  </script>
</body>

</html>

到此這篇關(guān)于Map與WeakMap類型在JavaScript中的使用的文章就介紹到這了,更多相關(guān)Map與WeakMap類型在JavaScript中的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Javascript讓DEDECMS告別手寫Tag

    Javascript讓DEDECMS告別手寫Tag

    dedecms在編輯修改內(nèi)容時(shí),TAG標(biāo)簽需要手動(dòng)輸,中文的Tag, 中間還得用半角字符','分隔, 輸入法切來切去很不方便, 于是動(dòng)手改后臺(tái)代碼, 利用后臺(tái)的tags_main.php, 讓dedecms添加內(nèi)容時(shí)能去tags_main里去選擇.
    2014-09-09
  • JS實(shí)現(xiàn)的文字間歇循環(huán)滾動(dòng)效果完整示例

    JS實(shí)現(xiàn)的文字間歇循環(huán)滾動(dòng)效果完整示例

    這篇文章主要介紹了JS實(shí)現(xiàn)的文字間歇循環(huán)滾動(dòng)效果,涉及javascript結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)實(shí)現(xiàn)頁面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
    2018-02-02
  • 深入分析Javascript跨域問題

    深入分析Javascript跨域問題

    JavaScript出于安全方面的考慮，不允許跨域調(diào)用其他頁面的對(duì)象。但在安全限制的同時(shí)也給注入iframe或是ajax應(yīng)用上帶來了不少麻煩。這里把涉及到跨域的一些問題簡(jiǎn)單地整理一下
    2015-04-04
  • JS與C#編碼解碼

    JS與C#編碼解碼

    這篇文章主要是對(duì)JS與C#編碼解碼進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
    2013-12-12
  • 基于javascript實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)

    基于javascript實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)

    這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-03-03
  • JS 動(dòng)態(tài)判斷PC和手機(jī)瀏覽器實(shí)現(xiàn)代碼

    JS 動(dòng)態(tài)判斷PC和手機(jī)瀏覽器實(shí)現(xiàn)代碼

    這篇文章主要介紹了JS 動(dòng)態(tài)判斷PC和手機(jī)瀏覽器實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • JS判斷數(shù)組中是否有重復(fù)值得三種實(shí)用方法

    JS判斷數(shù)組中是否有重復(fù)值得三種實(shí)用方法

    數(shù)組中是否有重復(fù)值的判斷方法有很多，本文為大家推薦下比較實(shí)用的3種方法，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
    2013-08-08
  • 利用原生JS自動(dòng)生成文章標(biāo)題樹的實(shí)例

    利用原生JS自動(dòng)生成文章標(biāo)題樹的實(shí)例

    網(wǎng)上關(guān)于生成文章標(biāo)題樹的示例很多，這篇文章介紹的是利用原生JS實(shí)現(xiàn)自動(dòng)生成文章標(biāo)題樹，實(shí)現(xiàn)過程很簡(jiǎn)單，有需要的可以參考借鑒。
    2016-08-08
  • JavaScript Array對(duì)象詳解

    JavaScript Array對(duì)象詳解

    這篇文章主要為大家詳細(xì)介紹了JavaScript function函數(shù)種類，知識(shí)點(diǎn)很全面，包括普通函數(shù)、匿名函數(shù)、閉包函數(shù)，感興趣的小伙伴們可以參考一下
    2016-03-03
  • js帶按鈕的提示框可供選擇示例代碼

    js帶按鈕的提示框可供選擇示例代碼

    本文為大家介紹下使用js實(shí)現(xiàn)可以供選擇的彈出框，具體的實(shí)現(xiàn)如下，感性的朋友可以參考下，希望對(duì)大家學(xué)習(xí)有所幫助
    2013-09-09

最新評(píng)論