See the Pen Map by nilgi (@nilgi) on CodePen.
<h2>Map</h2>
<p>• new Map() : Creates a new Map</p>
<p>• set() : Sets the value for a key in a Map</p>
<p>• get() : Gets the value for a key in a Map</p>
<p>• delete() : Removes a Map element specified by the key</p>
<p>• has() : Returns true if a key exists in a Map</p>
<p>• forEach() : Calls a function for each key/value pair in a Map</p>
<p>• entries() : Returns an iterator with the [key, value] pairs in a Map</p>
<p>• size : Returns the number of elements in a Map</p>
<h3>▸new Map()</h3>
<p id="nm1"></p>
<script>
const coin = new Map([
["aff", 300],
["vll", 700],
["okj", 400],
["xcs", 800]
]);
document.getElementById("nm1").innerHTML = coin.get("okj");
</script>
<h3>▸set()</h3>
<p id="ms1"></p>
<script>
const hws = new Map();
hws.set("hd", 4);
hws.set("ls", 900);
hws.set("as", 999);
hws.set("jj", 0.1);
document.getElementById("ms1").innerHTML = hws.get("hd");
</script>
<h3>▸set()으로 기존값 변경</h3>
<p id="ms2"></p>
<script>
const hws2 = new Map([
["hd", 4],
["ls", 900],
["as", 999],
["jj", 0.1]
]);
hws2.set("jj", 1);
document.getElementById("ms2").innerHTML = hws2.get("jj");
</script>
<h3>▸get()</h3>
<p id="mg1"></p>
<script>
const maple = new Map([
["pp", 999],
["pd", 566],
["nw", 328],
["asc", 776]
]);
document.getElementById("mg1").innerHTML = maple.get("pp");
</script>
<h3>▸size</h3>
<p id="msz1"></p>
<script>
const bdh1 = new Map([
["bd1", 108],
["bd2", 3],
["bd3", 0]
]);
document.getElementById("msz1").innerHTML = bdh1.size;
</script>
<h3>▸delete()</h3>
<p id="mde1"></p>
<script>
const mdet = new Map([
["mdet1", 2040],
["mdet2", 3366],
["mdet3", 8854]
]);
mdet.delete("mdet2");
document.getElementById("mde1").innerHTML = mdet.size;
</script>
<h3>▸size</h3>
<p id="msz1"></p>
<script>
const bdh1 = new Map([
["bd1", 108],
["bd2", 3],
["bd3", 0]
]);
document.getElementById("msz1").innerHTML = bdh1.size;
</script>
<h3>▸has()</h3>
<p id="mh1"></p>
<script>
const mht = new Map([
["mht1", 3050],
["mht2", 6600],
["mht3", 3060]
]);
document.getElementById("mh1").innerHTML = mht.has("mht1");
</script>
<h3>▸has() + delete()</h3>
<p id="mhd1"></p>
<script>
const mhdt = new Map([
["mhdt1", 3050],
["mhdt2", 6600],
["mhdt3", 3060]
]);
mhdt.delete("mhdt2");
document.getElementById("mhd1").innerHTML = mht.has("mhtd2");
</script>
<h3>▸forEach()</h3>
<p id="mfe1"></p>
<script>
const mfet = new Map([
["mfet1", 380],
["mfet2", 730],
["mfet3", 770]
]);
let text1 = "";
mfet.forEach (function(value, key) {
text1 += key + ' = ' + value + "<br/>"
})
document.getElementById("mfe1").innerHTML = text1;
</script>
<h3>▸entries()</h3>
<p id="men1"></p>
<script>
const ment = new Map([
["ment1", 12400],
["ment2", 12500],
["ment3", 126000]
]);
let text2 = "";
for (const x of ment.entries()) {
text2 += x + "<br/>";
}
document.getElementById("men1").innerHTML = text2;
</script>