マップが注文されました。 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>myElement は DOM ノードであり、常に更新されますクリックイベント発生ステータス。この状態を WeakMap のキー値として配置し、対応するキー名は myElement です。DOM ノードが削除されると、状態は自動的に消え、メモリ リークのリスクはありません
(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)
//输出：张三 ユーザーが 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('jack');
console.log(p._name)//因为name的私有型，所以在外不可访问
console.log(p.getName())
/*输出:
undefined
jack
*/[関連する推奨事項: JavaScript ビデオ チュートリアル
、webfrontend]
以上がes6 マップは注文されていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
USESTATEの理解（）：React React Neact State Managementの包括的なガイドApr 25, 2025 am 12:21 AMusestate（）isareacthookusedtomeStateinfunctionalComponents.1）itInitializeSandUpDatestate、2）colledatttheToplevelofComponents、3）canleadto'stalestate'ifnotusedly、and4）cancancancancancanbeoptimizeduptimizeduptimizedususecall -calleSuperesteSteSteSteSteSteSteSteSteStateSupteStateSuptateSuptatedates
Reactを使用することの利点は何ですか？Apr 25, 2025 am 12:16 AMReactisPopularduetoitsComponent Architecture、Virtualdom、Richecosystem、およびdeclarativenature.1）コンポーネントベースのarchitectureallowsforReusable anduipieces、改善様式および測定可能性。
Reactでのデバッグ：一般的な問題の特定と解決Apr 25, 2025 am 12:09 AMdebugReactapplicationivivivity、EtheseStrategies：1）AddressPropdrillingWithContextapiorredux.2）HandLeasynchronousoperations withuthutateanduseeffect、Abortcontrollertopreventraceconditions.3）最適化合物を使用して、最適化合物を使用してください
ReactのUseState（）とは何ですか？Apr 25, 2025 am 12:08 AMUseState（）inReactallowsstateManagementInFunctionalComponents.1）itsimplifiesstateManagement、makeCodemoreconcise.2）usetheprevcountFunctionToupDateStateBasedTateBasedTateBadeStateValue、AvolidingStalestateSues.3）
useState（）vs。usereducer（）：州のニーズに合った適切なフックを選択するApr 24, 2025 pm 05:13 PMChooseuseState()forsimple,independentstatevariables;useuseReducer()forcomplexstatelogicorwhenstatedependsonpreviousstate.1)useState()isidealforsimpleupdatesliketogglingabooleanorupdatingacounter.2)useReducer()isbetterformanagingmultiplesub-valuesorac
UseState（）を使用して状態を管理する：実用的なチュートリアルApr 24, 2025 pm 05:05 PMUseStateは、州の管理を簡素化し、コードをより明確にし、読みやすくし、Reactの宣言的な性質と一致するため、クラスコンポーネントやその他の州管理ソリューションよりも優れています。 1）UseStateを使用すると、状態変数を関数コンポーネントに直接宣言することができます。2）フックメカニズムの再レンダリング中に状態を覚えています。
UseState（）を使用する時期と、代替の州管理ソリューションを検討するタイミングApr 24, 2025 pm 04:49 PMuseUsestate（）forlocalcomponentStatemanagement; compleartinative forglogic、orperformanceissues.1）useidealforsimple、localstate.2）useglobalStateSolutionSolutionSuxorContextForSharedState.3）OptForreDuxtormobxobxobxobforexSt
Reactの再利用可能なコンポーネント：コードの維持可能性と効率の向上Apr 24, 2025 pm 04:45 PM再利用することは、codecodemaintainabilityを抑制することを再生します
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
ホットトピック
7715
15164114139552128925123229