é åãåè§£ããªããèŠçŽ ããšã«å€æ°ãžä»£å ¥ããããšãã§ããŸãã
const n = arr[0]; const m = arr[1];
â
const [n, m] = arr;
䜿ããå Žæ
- 倿°ã®åæåïŒ
let
,const
宣èšïŒãä»£å ¥ - 颿°åŒæ°
ã§ããããš
- å¿ èŠãªãã®ã ãåãåã£ãŠåæåãä»£å ¥
- æ®äœ
...
- åæå€
=
äœ¿ãæ¹
é åãåè§£ããŠå€æ°ãäœã
const arr = [11, 22, 33, 44, 55]; const [a, b, c, d, e] = arr; console.log(a, b, c, d, e);
èŠçŽ ã®çç¥
å
é ãéäžã®ãã®ãé£ã°ãå Žåã倿°ãçç¥ããŠã«ã³ã ,
ã ã眮ããŸãã
const [ , b, , d, e] = arr;
æ«å°Ÿããé£ã°ãå Žåã¯äœãæžããªããŠè¯ãã
const [ , b, ,] = arr;
ãªããªãå
šéšé£ã°ã㊠[,,,] = arr
ã¿ããã«ãææ³çã«ã¯æžããŸããæžãããšãªãã ãããã©ã
å ¥ãå
2次å é åã®å ŽåãåãåãåŽã2次å é åã§è¡šçŸããããšã§ãåé åã®èŠçŽ ãçŽæ¥åŸãããŸãã
const positions = [ [11, 22], [33, 44], ]; const [ [x1, y1], [x2, y2] ] = positions; console.log(x1, y1, x2, y2); // 11 22 33 44
ãã¡ãã2次å ã«éãããN次å ã§ãããã§ãå ¥ãåã«ã§ããŸãã
ãªããžã§ã¯ãã®èšæ³ãšçµã¿åãããããšãå¯èœã
æ®äœ
...
ã䜿ã£ãŠãæ®ãå
šéšããåãåããŸãã
const [a, ...rest] = arr;
ãããå ¥ãåã«ãããããªããžã§ã¯ãã®èšæ³ãšçµã¿åããããããããšãã§ããŸãã
const arr = [11, 22, 33]; const [a, ...{ length }] = arr; console.log(a, length); // 11 2
倿°ãäœ¿ãæ¹ã®å Žé¢ã§ã¯éã«ã°ãã°ãã®å€ãžå±éããããšãã§ããŸãã
åæå€
åŸãããå€ã undefined
ã®ãšãã =
ã§æå®ããåæå€ã倿°ã«æ ŒçŽãããŸããåºæºã¯å€ã®æç¡ã§ã¯ãªã undefined
ãã©ããã§ãã
const arr = [11, undefined]; const [a = -11, b = -22, c = -33] = arr; console.log(a, b, c); // 11 -22 -33
å ¥ãåãšçµã¿åãããã®ãããã
å©çšå¯èœãªãã®
é å以å€ã§ããå埩å¯èœãªãã®ãªãäœã§ããããã
const set = new Set([11, 22]); const [a, b] = set; console.log(a, b); // 11 22
function* gen () { yield 11; yield 22; yield 33; } const [a, b, c] = gen(); console.log(a, b, c); // 11 22 33
é å颚ãªããžã§ã¯ãã¯ã ã
å埩å¯èœã§ã¯ãªãã®ã§ã
const obj = { 0: 11, 1: 22, 2: 33, length: 3, }; const [a, b, c] = obj; console.log(a, b, c);
TypeError: obj is not iterable
颿°åŒæ°ãåè§£ãæ®äœã䜿ãã
[a, b, c]
ã®ä»£ããã« (a, b, c)
çãªé°å²æ°ã§ãåãããã« ...
ã§ãæ®ãããåŸããã []
ã§åè§£ããŠåãåãããšãã§ããŸãã
function* gen () { yield 11; yield 22; yield 33; } const f = ([a, ...rest]) => console.log(a, rest); f(gen()); // 11 [ 22, 33 ]
arguments
ãªããžã§ã¯ãããããã (a, b, ...rest)
ã [a, b, ...rest] = arguments
ã¿ããã«èããã°åŠ¥åœã ããã
å©çšäŸ
æ£èŠè¡šçŸã§URLãåè§£
// å®åã§ãå©çšã®é㯠`match()` ã®çµæã `null` ã«ãªãåŸãç¹ããå¿ããªã const url = 'https://ginpei.info/path/to/file'; const matched = url.match(/(https?:)\/\/([\w.-]+)(.*)/); const [ , protocol, host, path] = matched; console.log('protocol:', protocol); console.log('host:', host); console.log('path:', path); // protocol: https: // host: ginpei.info // path: /path/to/file
URLã®ãã©ã¡ãŒã¿ãŒãåè§£
const search = '?id=123&mode=fine'; // location.searchã¿ãã㪠const params = search .slice(1) // åé "?" ãé£ã°ã .split('&') .reduce((map, pair) => { const [name, value] = pair.split('='); map[name] = value; return map; }, {}); console.log(params); // => { id: '123', mode: 'fine' }
å®é㯠items[]=a&items[]=b
ã¿ãããªéè€ãããã®ã«ã察å¿ãå¿
èŠãããã
ããã£ãš reduce()
䜿ã£ããã©ãäœã§ãã§ããé
åã®æåŒ·ã¡ãœããã§ãã
Object.entries()
ã§
key-valueçµãåè§£ããã®ã«ã䟿å©ã
const colors = { apple: 'red', banana: 'yellow', orange: 'orange', }; Object.entries(colors).forEach(([name, color]) => { console.log(`${name} is ${color}`); });
for-of
ã§ã
of
ã®å·ŠåŽã§ã䜿ããŸãã
const colors = new Map(); colors.set('apple', 'red'); colors.set('banana', 'yellow'); colors.set('orange', 'orange'); for (const [name, color] of colors) { console.log(`${name} is ${color}`); }
Promise.all()
ã®çµæã§
è€æ°ã®APIã䞊åã« fetch()
ããçµæãšãã
const [a, b] = await Promise.all([ new Promise((resolve) => resolve('Hello')), new Promise((resolve) => resolve('World!')), ]); console.log(a, b); // => Hello World!
ã³ãã³ããåãä»ãã
jQuery UIã®ãã€ã¿ããã«ã第1åŒæ°ã«ã³ãã³ãåã以äžã³ãã³ãã«å¿ããŠ0å以äžã®ãã©ã¡ãŒã¿ãŒãã¿ãããªã
function exec (command, ...params) { switch (command) { // ãªãããã } } exec('start'); exec('say', 'Hello!'); exec('move', 10, 22);
æ®äœåŒæ°ã§åããããã params
ããªããžã§ã¯ãã§ãŸãã£ãšãããæ¹ãè¯ããããªæ°ãããã
ãã®ä»
æ®äœåŒæ°ãšé¢æ°åŒæ°ã®æ°
颿°ãªããžã§ã¯ã㯠length
ããããã£ãæã£ãŠããŠãåŒæ°ã®æ°ãæ ŒçŽãããŠãŸããæ®äœåŒæ°ã®å Žåã¯ããã«æ°ããããŸããã
å
ã®ãã®äŸâã ãšã f.length
㯠0
ã«ãªããŸãã
const f = (...args) => console.log(args);
ã¡ãªã¿ã«æå
ã®Edge (EdgeHTML 17) ã ãš 1
ã«ãªããŸããããžãã
æ®äœåŒæ°ã®åè§£
çµåããŠããã®åè§£ããªãã ããã
const f = (...[a, b]) => console.log(a, b);
åè¿°ã®éã ...
ã䜿ããšé¢æ°åŒæ°ã®æ° f.length
ã«åæ ãããªãã®ã§ããã£ããåãä»ããããšãã«ãã®çµã¿åããã䟿å©ã§ãããåã§ãããã¶ããããªããšããçç±ãªãã
ãªãæå ã®Edge (EdgeHTML 17) ã ãšåããŸããã§ãããïŒé¢æ°åŒæ°ãããªããŠå€æ°ã®æ¹ã¯åããïŒ
Object doesn't support property or method 'Symbol.iterator'
ãªããžã§ã¯ãã®åå²ä»£å ¥
åããããªããã§ãã { ...rest }
ãããã
ãããŸã
ãªããªããªãã§ãæžãããã ãã©ã䜿ãããšçããããŠããã䟿å©ã
é¢é£
åè
- åå²ä»£å ¥ – JavaScript | MDN
- Rest parameters – JavaScript | MDN
- ã¹ãã¬ããæ§æ – JavaScript | MDN
- arguments | MDN
- Promise.all() – JavaScript | MDN
- ECMAScript® 2018 Language Specification
- 13.3.1 Let and Const Declarations
- 13.3.3 Destructuring Binding Patterns
- 12.15.5 Destructuring Assignment
- 14.1.7 Static Semantics: ExpectedArgumentCount ⊠æ®äœåŒæ°ãé€ããŠæ°ããŠãããšãã
- 9.2.4 FunctionInitialize ( F, kind, ParameterList, Body, Scope ) ⊠ExpectedArgumentCountãåŒãã§ãïŒïŒïŒãšãã