çŸä»£çJavaScriptããããã¢ããã³ãã«ã¬ã³ããŒ2017 â 19æ¥ç®
è¯ããïŒïŒïŒ
æŠèŠ
Array#map()
ãããªã㊠Map
ãšãããã«ãã€ã³ã³ã³ã¹ãã©ã¯ã¿ã§ãã
èŸæž (dictionary) ã¿ãããªããªã§äœ¿ããŸãã
const map = new Map();
map.set(100, 'Number 100');
console.log(map.get(100)); // => "Number 100"
for (let [key, value] of map) {
console.log(`[${key}] = [${value}]`);
}
äœ¿ãæ¹
new
ã§äœã£ãŠååãšå€ã®çµã¿åããã®æ
å ±ãæ ŒçŽããŸãã
æ
å ±ã®è¿œå ãšååŸ
set()
ã§è¿œå ïŒãšäžæžãïŒã get()
ã§ååŸã
const map = new Map();
const key = 100;
// set
map.set(key, { message: 'Hello World!' });
// get
const value = map.get(key);
concole.log(key, value);
set()
㯠map
ãªããžã§ã¯ãèªäœãè¿ãã®ã§ãã¡ãœãããã§ã€ã³ã¿ããã«æžããŸãã
map
.set(100, 'Hello')
.set(101, 'World')
.set(102, '!')
ãããŸãæžããªãæ¹ãè¯ããšæããã©ã
æç¡ã®ç¢ºèª
const map = new Map();
console.log(map.has(1)); // => false
map.set(1, 'one');
console.log(map.has(1)); // => true
åé€
delete()
ã§ããŒãæå®ããŠæ¶ããŸããåé€ã§ããå Žå㯠true
ããããšããšå€ãæã£ãŠããªãã£ãå Žå㯠false
ãåž°ããŸãã delete
æŒç®åãšéããã
ããš clear()
ã§å
šéšæ¶ããŸãããã¡ãã¯åžžã« undefined
ãè¿ãã
const map = new Map();
let deleted;
map.set(100, 'Hello World!');
map.set(101, 'Goodmorning Universe!');
map.set(102, 'How is it going man?');
console.log('Size:', map.size); // => Size: 3
console.log('#101', map.get(101)); // => #101 Goodmorning Universe!
// ã²ãšã€åé€
deleted = map.delete(101);
console.log('Size:', map.size); // => Size: 2
console.log('#101', map.get(101)); // => #101 undefined
console.log('Delete successfully?', deleted); // => true
// å逿žã¿ã®ãã®ãåé€
deleted = map.delete(101);
console.log('Delete successfully?', deleted); // => false
// å
šéšåé€
map.clear();
console.log('Size:', map.size); // => Size: 0
ããŒã¯äœã§ã
ãªããžã§ã¯ãã®å Žåã¯åºæ¬çã« toString()
ã§æååã«å€æããããã ãã©ã Map
ã®å Žåã¯åãå«ããŠãã®ãŸãŸããŒã«ãªããŸãã 1
ãš "1"
ã¯å¥ç©æ±ãã§ãã
const map = new Map();
// æ°å€ã®1ãšæååã®"1"
map.set(1, 'Number 1');
map.set('1', 'String 1');
console.log(map.get(1)); // => "Number 1"
console.log(map.get('1')); // => "String 1"
åçš®ãªããžã§ã¯ãããã®ãŸãŸçªã£èŸŒãããšãã§ããŸãã
ç¹°ãè¿ã
forEach()
ããã㯠for-of
ã«ãŒãã§ããããã§ããŸãã
ããš size
ãšãããé
åã® length
ã¿ãããªããããã£ããããŸãã
const map = new Map();
let deleted;
map.set(100, 'Hello World!');
map.set(101, 'Goodmorning Universe!');
map.set(102, 'How is it going man?');
console.log('Size:', map.size); // => Size: 3
map.forEach((value, key) => {
console.log('forEach', key, value);
})
for (let [key, value] of map) {
console.log('for-of', key, value);
}
forEach()
以å€ã®ã Array.prototype
ç³»ã®ã¡ãœããã¯ãªãã§ãã
ããŒãå€ããŸãšããŠååŸ
keys()
ã§ããŒã ãã values()
ã§å€ã ããããã« entries()
ã§ããŒãšå€ã®çµã®ã€ãã¬ãŒã¿ãåŸãããŸãã
const map = new Map();
map.set(100, 'Hello World!');
map.set(101, 'Goodmorning Universe!');
map.set(102, 'How is it going man?');
for (let key of map.keys()) {
console.log('key', key);
}
for (let value of map.values()) {
console.log('value', value);
}
for (let [key, value] of map.entries()) {
console.log('key-value', key, value);
}
[]
ã¢ã¯ã»ã¹ã¯ã ã
ããããããªããŠæ®éã®ã€ã³ã¹ã¿ã³ã¹ããããã£ãžã®ã¢ã¯ã»ã¹ã«ãªããŸãã
const map = new Map();
map.set(100, 'Hello World!');
map[101] = 'Goodmorning Universe!';
console.log(map.size); // => 1
console.log(map.get(100)); // => "Hello World!"
console.log(map.get(101)); // => undefined
console.log(map['101']); // => "Goodmorning Universe!"
ãªããžã§ã¯ãã«è¿œå æ
å ±ãæããã
ä»ã«ç¬èªã®æ
å ±ãæã¡ãããã©å
ã®ãªããžã§ã¯ãã«è§ŠããããªããªãŒãšãããšãããã®ãªããžã§ã¯ãèªäœãããŒã«ããŠãè¿œå æ
å ±ãå¥é眮ããŠããããšãã§ããŸãã
const map = new Map();
const el = document.querySelector('#foo');
const someDataForTheElement = {};
map.set(el, someDataForTheElement);
ã§ãå¥ã€ã³ã¹ã¿ã³ã¹ã«ãªããšå¥ç©ã£ãŠããæ±ãã«ãªã£ã¡ããã®ã§ãæ°žç¶çã«äœ¿ããèå¥åãããã°ãã£ã¡ã®æ¹ãè¯ãããã
䜿ãé
ãšããããŸã§æžããŠãããã©æ£çŽããã£ãŠãã䜿ãéãæãã€ããªãâŠâŠã
ãªããžã§ã¯ã Object
ïŒãªãã {}
ïŒã§ãåããããªããšã¯ã§ããŸããä»ãŸã§ãã£ãšãã£ã¡ã§ãã£ãŠããŸãããã
const map = {};
map[100] = 'A hundred';
map[101] = 'A hundred and one';
console.log(100, map[100]); // => "A hundred"
Object.keys(map)
.forEach((key) => {
const value = map[key];
console.log(key, value);
});
å埩åŠçãšãã¡ãã£ãšã¢ã¬ã ãã©ãŸãã©ãã«ããªããããŸã ãããŸãããããããªãã
Object
ãš Map
ã®éã
[]
ã®ä»£ããã« set()
ã get()
ã䜿ã
- ããŒã«æåå以å€ã䜿ããïŒ
1
ãš "1"
ãå¥ç©æ±ãïŒ
- å埩åŠç
for-of
ã§ãã
size
ã§æ°ãåãã
MDNã«ã¯
ããèŒã£ãŠãã
ããªããžã§ã¯ããšãããã®æ¯èŒãããã
ãã㯠Map ããã€ã䜿ãã°ãããšããããšã§ã¯ãããŸããããªããžã§ã¯ãã¯ãŸã å€ãã®å Žé¢ã§äœ¿ããŸããMap ã€ã³ã¹ã¿ã³ã¹ã¯ã³ã¬ã¯ã·ã§ã³ãšããŠäœ¿ãå Žåã®ã¿ã«åœ¹ã«ç«ã¡ãŸãã以åãªããžã§ã¯ãããã®ããã«äœ¿ã£ãŠããã³ãŒãã« Map ã䜿ãããšãèããŠã¿ãã¹ãã§ãããªããžã§ã¯ãã¯ã¡ã³ã倿°ãšã¡ãœãããåããã¬ã³ãŒããšããŠäœ¿ãããŸãããããŸã ã©ã¡ãã䜿ãã°ãããããããªããªãã以äžã®è³ªåã«çããŠã¿ãŠãã ããã
- ããŒããã€ãå®è¡æãŸã§ããããªãããŸãã¯ããŒãçŽæ¥èª¿ã¹ãå¿
èŠããããŸãã?
- ãã¹ãŠã®å€ãåãåã§ã亀æããŠäœ¿çšã§ããŸãã?
- æååã§ãªãããŒãå¿
èŠã§ãã?
- ããŒãšå€ã®ãã¢ãæã
ã远å ãŸãã¯åé€ããŸãã?
- ç°¡åã«éãå€ããããŒãšå€ã®ãã¢ããããŸãã?
- ãã®ã³ã¬ã¯ã·ã§ã³ãã€ãã¬ãŒãããŸãã?
ãããã¯ããªãã Map ãã³ã¬ã¯ã·ã§ã³ãšããŠäœ¿ããããšãã®ãµã€ã³ã§ãããã察ç
§çã«ãåºå®ãããéã®ããŒãããããããåã
ã«æäœããMapã®äœ¿ãæ¹ãšåºå¥ããå Žåããªããžã§ã¯ãã䜿ããŸãããã
ãã®ä»
NaN
ãåèŽãã
JavaScriptã®çްãã話ã§è¯ãåºãŠãããã€ãªãã§ããã NaN
“Not a Number” ã¯ç¹æ®ãªå€ã§ãèªèº«ãšçå€ã«ãªããŸããã
const n = NaN;
console.log(n === n); // false (wow)
ãããããã®ããŒãšããŠäœ¿ãå ŽåãïŒå
éšã§ïŒåãå€ãšã¿ãªããŠãããŸãã
const map = new Map();
map.set(NaN, 'Not a Number');
console.log(map.get(NaN)); // => "Not a Number"
map.set(NaN, '!');
console.log(map.get(NaN)); // => "!"
ãã¡ãã NaN
ãšæåå "NaN"
ã¯åèŽããŸããããã£ããã
ãªããžã§ã¯ã Object
ã®ããŒ
äžã®æ¹ã§ã obj[key]
ã® key
ã¯åºæ¬çã«æååã«ãã¿ããã«èšã£ããã©ã Symbol
ãŠã®ã䜿ããããã«ãªããŸããã
åè