ホームページ > 記事 > ウェブフロントエンド > es6 マップは参照型ですか?
Map は参照型です。map (コレクション) は、es6 の新しい参照データ型であり、データのマッピング関係を表します。マップ コレクション データ型のデータは、「キー/値」方式で保存されます。オブジェクトのプロパティをキーとして使用し、そのプロパティを使用して値を参照できます。マップは、new を使用して作成できます。たとえば、「const」 myMap = new Map();" 。
このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。
map は参照型です。
ES6 より前では、JavaScript で 'key'=>'value' (よくキーと値のペアと呼ばれるもの) を実装するには、次のようにします。オブジェクトを使用して完了します。ただし、この実装方法には特殊なシナリオでは問題があり、ES6 では、言語に真のキーと値のペアの保存メカニズムをもたらす Map と呼ばれる新しいコレクション タイプが導入されました。
map (コレクション) は、es6 の新しい参照データ型で、データのマッピング関係を表します。マップ コレクション データ型のデータは「キー/値」方式で保存され、オブジェクトのプロパティ キーとして、プロパティを使用して値を参照します。
new
キーワードを使用してマップをインスタンス化します
let m = new Map(); console.log(m); // Map(0) {}
作成時の初期化:
2 次元配列パラメータを渡します (反復可能なオブジェクト、キー値は内部的に配列として渡されます)
各サブ配列の最初の要素が対応しますkey
をマップするには、2 番目の要素は value
let m = new Map([[{}, 222], [{}, '123']]); console.log(m); // Map(2) { {} => 222, {} => '123' }
let m = new Map(); m.set('prop', '值'); console.log(m); // Map(1) { 'prop' => '值' }
キー値の連鎖追加
let m = new Map(); m.set('prop', '值').set('prop2', false).set('num', {id: 13}); console.log(m); // Map(3) { 'prop' => '值', 'prop2' => false, 'num' => { id: 13 } }
let m = new Map(); m.set('prop', '值').set('prop2', false).set('num', {id: 13}); console.log(m.size);
let m = new Map(); m.set('prop', '值').set('prop2', false).set('num', {id: 13}); console.log(m.get('prop2')); // false
1-2-4要素を削除します
let m = new Map(); m.set('prop', '值').set('prop2', false).set('num', {id: 13}); m.delete('prop2'); // true console.log(m.get('prop2'), m.size); // undefined 2
let m = new Map(); m.set('prop', '值').set('prop2', false).set('num', {id: 13}); m.delete('prop2'); // true console.log(m.has('prop2'), m.has('num')); // false true
let m = new Map(); m.set('prop', '值').set('prop2', false).set('num', {id: 13}); m.clear(); // true console.log(m); // Map(0) {}
map は挿入順序に従って要素を反復できます マッピング インスタンス(iterator) を提供します。挿入順に [key, value] の形式で配列を生成し、entrys() メソッド (または提供された Symbol.iterator) のイテレータ インターフェイス トラバーサルを渡すことができます。 let m = new Map();
m.set('prop', '值').set('prop2', false).set('num', {id: 13});
console.log(m.entries === m[Symbol.iterator]);// true
for(let k1 of m.entries()){
console.log(k1);
// [ 'prop', '值' ]
// [ 'prop2', false ]
// [ 'num', { id: 13 } ]
// 遍历的属性即对应映射元素的键值对数组
}
for(let k2 of m.keys()){
console.log(k2);
// prop
// prop2
// num
// 遍历的属性对应映射元素的键
}
for(let k3 of m.values()){
console.log(k3);
// 值
// false
// { id: 13 }
// 遍历的属性对应映射元素的值
}
for(let k4 of m[Symbol.iterator]()){
console.log(k4);
// [ 'prop', '值' ]
// [ 'prop2', false ]
// [ 'num', { id: 13 } ]
// 遍历的属性即对应映射元素的键值对数组
}
1-4 オブジェクトとの比較
メモリ使用量ブラウザこの違いにより、2 つのストレージ メソッド間でメモリ使用量が異なります。ただし、メモリ サイズを考慮すると、map は Object よりも約 50% 多くのキーと値のペアを格納します。
挿入速度 上記のマップとオブジェクトのパフォーマンスはほぼ同じですが、コードに多数の挿入が含まれる場合は、マップ
削除のパフォーマンス
、プログラミング ビデオ
]
以上がes6 マップは参照型ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。