マップが注文されました。 ES6 のマップ タイプは、多くのキーと値のペアを格納する順序付きリストです。キー名と対応する値はすべてのデータ型をサポートします。キー名の等価性は、「Objext.is()」メソッドを呼び出すことによって決定されます。 , したがって、数字の 5 と文字列「5」は 2 つのタイプとして判断され、プログラム内で 2 つの独立したキーとして現れることができます。
このチュートリアルの動作環境: 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('#btn');
let wmap = new WeakMap();
wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键
btn.addEventListener('click',function(){
let temp = wmap.get(btn);//从这里获取键名为btn的值
temp.timesClicked++;
console.log(temp.timesClicked)
},false)
</script>
</body>
</html>ログイン後にコピー
(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('#btn');
let wmap = new WeakMap();
wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键
// btn.addEventListener('click',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('click',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('张三');
console.log(p._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('jack');
console.log(p._name)//因为name的私有型，所以在外不可访问
console.log(p.getName())
/*输出:
undefined
jack
*/ログイン後にコピー
[関連する推奨事項:
JavaScript ビデオ チュートリアル
、
webfrontend]
以上がes6 マップは注文されていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![Node.js の完全な入門チュートリアル [es6+npm+express+webpack+promise]](https://img.php.cn/upload/course/000/000/068/6242b4c8f1a39624.png)
![JavaScript の基本構文 [dom|bom|es6 新しい構文|jQuery|データ視覚化 echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
