検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >es6 マップは注文されていますか?

es6 マップは注文されていますか?

青灯夜游
青灯夜游オリジナル
2022-11-03 19:05:251552ブラウズ

マップが注文されました。 ES6 のマップ タイプは、多くのキーと値のペアを格納する順序付きリストです。キー名と対応する値はすべてのデータ型をサポートします。キー名の等価性は、「Objext.is()」メソッドを呼び出すことによって決定されます。 , したがって、数字の 5 と文字列「5」は 2 つのタイプとして判断され、プログラム内で 2 つの独立したキーとして現れることができます。

es6 マップは注文されていますか?

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

1. マップ コレクション

JavaScript のオブジェクトは本質的にキーと値のペアのコレクションですが、従来は文字列としてのみ使用できました。キーと値のペア。

この問題を解決するために、ES6 はマップ データ構造を提供します。これはオブジェクトに似ており、キーと値のペアのコレクションでもあります。ただし、このキーの範囲は文字列に限定されず、さまざまな種類の値（オブジェクトを含む）をキーとして使用できます。言い換えると、オブジェクト構造は (文字列と値の) 対応を提供し、マップ構造は次の機能を実装します。

ES6 のマップ タイプは、キー名と対応する値はすべてのデータ型をサポートします。キー名の等価判定は Objext.is() メソッドを呼び出すことで行われるため、数字の 5 と文字列 '5' の 2 種類として判定され、プログラム上では独立した 2 つのキーとして現れることができます。

注: 例外があります。マップ コレクションでは 0 と -0 は等しいとみなされますが、これは Object.is() の結果とは異なります。 「キー値」が必要です。 データ構造としては、オブジェクトよりもマップの方が適しており、検索速度が非常に速いです。

1. 属性: サイズ

戻り値マップ 要素数

2、基本メソッド

(1) set()

マップへ データを追加し、追加されたマップを返します (既存のキーに値を割り当てると、以前の値が上書きされます)

(2) get()

ある特定の値を取得 キーの値はそのキーに対応する値を返します、そうでない場合は未定義を返します

(3) has()

ある特定の値であるかどうかを検出しますキーが存在し、ブール値を返します

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
console.log(map.size);
console.log(map.get('JacksonWang'));
console.log(map.get('LEO'));
console.log(map.has('Z-'));
 
//输出:    3
//        123
//        456
//        true

(4)delete()

キーとその対応する値を削除し、ブール値を返します。削除が成功した場合は、 、trueになります

（5）clear()

すべての値をクリアしてunknownを返します

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
map.delete('Z-');
console.log(map.size);
 
console.log(map.clear())
 
//输出:  2
//      undefined

3. 走査方法

注: マップの走査順序は挿入順序です

(1)keys()

マップのすべてのキーを取得

##（ 2)values()##マップのすべての値を取得

# (3)entries()

マップのすべてのメンバーを取得

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
console.log(map.keys())//打印所有的键
console.log(map.values())//打印所有的值
console.log(map.entries())//以键值对的方式
 
/*输出：
[Map Iterator] { 'JacksonWang', 'LEO', 'Z-' }
[Map Iterator] { '123', '456', '789' }
[Map Entries] {
  [ 'JacksonWang', '123' ],
  [ 'LEO', '456' ],
  [ 'Z-', '789' ]
}*/

(4) forEach()

すべてをトラバースマップのメンバー

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
for(const [key,value] of map.entries()){
    console.log(`${key}:${value}`);
}
/*输出:
JacksonWang:123
LEO:456
Z-:789
*/

4. 配列に変換

マップ構造を配列分割に変換

let map1 = new Map([
    [1,'One'],
    [2,'Two'],
    [3,'Three']
])
 
console.log([...map1.keys()]);
console.log(...map1.entries())
console.log([...map1.entries()]);
 
/*输出:
[ 1, 2, 3 ]
[ 1, 'One' ] [ 2, 'Two' ] [ 3, 'Three' ]
[ [ 1, 'One' ], [ 2, 'Two' ], [ 3, 'Three' ] ]
*/

2 Weakmap コレクション

WeakMap は、弱参照 Map コレクションであり、オブジェクトの弱参照を格納するためにも使用されます。 WeakMap コレクションのキー名はオブジェクトである必要があります。オブジェクト以外のキー名を使用すると、コレクションにはこれらのオブジェクトへの弱参照が保存されているというエラーが報告されます。弱参照以外に強参照がない場合は、エンジンのガベージ コレクション メカニズム このオブジェクトは自動的にリサイクルされ、WeakMap コレクション内のキーと値のペアは削除されます。ただし、コレクションのキー名のみがこの規則に従います。キー名に対応する値がオブジェクトの場合、保存されたオブジェクトの強参照によってガベージ コレクション デバイス

がトリガーされません。 1、WeakMap コレクション 目的

#(1) コード内の DOM 要素を格納します

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">WeskMap测试</button>
    <script>
        let btn = document.querySelector(&#39;#btn&#39;);
        let wmap = new WeakMap();
        wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键
 
        btn.addEventListener(&#39;click&#39;,function(){
            let temp = wmap.get(btn);//从这里获取键名为btn的值
            temp.timesClicked++;
            console.log(temp.timesClicked)
        },false)
    </script>
</body>
</html>
myElement は DOM ノードであり、常に更新されますクリックイベント発生ステータス。この状態を WeakMap のキー値として配置し、対応するキー名は myElement です。DOM ノードが削除されると、状態は自動的に消え、メモリ リークのリスクはありません

es6 マップは注文されていますか? (2) イベントをリッスンするためのリスナー オブジェクトを登録します。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">WeskMap测试</button>
    <script>
        let btn = document.querySelector(&#39;#btn&#39;);
        let wmap = new WeakMap();
        wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键
 
        // btn.addEventListener(&#39;click&#39;,function(){
        //     let temp = wmap.get(btn);//从这里获取键名为btn的值
        //     temp.timesClicked++;
        //     console.log(temp.timesClicked)
        // },false)
        function f1(){
            let temp = wmap.get(btn);//从这里获取键名为btn的值
            temp.timesClicked++;
            console.log(temp.timesClicked)
        }
        btn.addEventListener(&#39;click&#39;,f1,false)
    </script>
</body>
</html>
効果は同じです

(3) プライベート プロパティをデプロイします

function Person(name){
    this._name = name;
}
 
Person.prototype.getName = function(){
    return this._name;
}
//但这是，创建一个Person对象的时候，我们可以直接访问name
let p = new Person(&#39;张三&#39;);
console.log(p._name)
 
//输出：张三
ユーザーが name 属性に直接アクセスできないようにするため、次のメソッドを直接使用して name をプライベート属性にラップします 
let Person = (function(){
    let privateData = new WeakMap();
    function Person(yourname){
        privateData.set(this,{_name:yourname})//this当前这个键的对象
    }
    Person.prototype.getName = function(){
        return privateData.get(this)._name;//
    }
    return Person;
})();//定义好了函数就开始执行
 
let p = new Person(&#39;jack&#39;);
console.log(p._name)//因为name的私有型，所以在外不可访问
console.log(p.getName())
 
/*输出:
undefined
jack
*/

[関連する推奨事項:

JavaScript ビデオ チュートリアル

、

webfrontend]

以上がes6 マップは注文されていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript ecmascript es6 数据类型 Object foreach 字符串 数据结构 map delete undefined 对象 事件 dom
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：es6 のクラスの静的メンバーとは何ですか次の記事：es6 のクラスの静的メンバーとは何ですか

関連記事

続きを見る