Ginpen.com

Powered by JavaScript and JapaneseSushi

‌
‌

※スマホ察応はしおたせん。

カテゎリヌ: JavaScript

for文を仕様からじっくり芋おみる。あずwhileずか。配列ずかおれおれAdvent Calendar2018 – 13日目

投皿日時:
カテゎリヌ: JavaScript
タグ: ,

LINDORのAdvent Calendar本物の13日目を開けたずころ。
配列ずかおれおれAdvent Calendar2018 – 13日目

繰り返しにもいろいろあるよ。

  • for, while
  • for-in → 別皿
  • for-of → 別皿
  • for-await-of → 別皿
  • forEach() → 別皿

for 文

叀より䌝わる技法。JavaScriptに限らずだいたいの蚀語で利甚できたす。

const arr = [11, 22, 33];

for (let i = 0; i < arr.length; i++) {
  const item = arr[i];
  console.log(item);
}

なお普通に先頭から末尟たで繰り返す堎合は forEach() を䜿う方が珟代では倚いかず。

さお for 文、実行順序ずしおは、

  1. 初期化 let i = 0
  2. 怜蚌 i < arr.length
    • false なら終了
  3. 繰り返し凊理 console.log(item)
  4. 繰り返し終端の凊理 i++
  5. 「2. 怜蚌」ぞ戻る

ずいうや぀ですね。誰向けの説明だこれ。

たあせっかくなんでじっくり考えおみおほしいんですけど、セミコロンで区切っお3皮類の匏を蚘述したしお、順に呌ばれるわけです。

条件を曞く2番目は true/false の刀定があるのでアレですが、他は䜕を曞いおも良いこずになりたす。 䟋えば初期化で let を曞かなくおも良いし、終端匏でカりンタヌを倉化させる必芁もありたせん。 ずいうか2番目も省略可胜で、その堎合垞に true 扱いになりたす。

いっそ省略しお for (;;) でもよろしい。

あ、「終端匏」ずかは

おれが勝手に呌んでるだけです。

MDNでは以䞋のように玹介されおいる。

for ([initialization]; [condition]; [final-expression]) statement

ECMAScript的には基本的にどれもただの「匏 expression」で、特に名前は決たっおいないように思う。あえお探しお蚀うなら  2番目の匏が「詊隓 test」、3番目は「増進 increment」か。1番目は、うヌん、そういう定矩の仕方しおないしなあ。

const はだいたいだめ

だめじゃないんだけど、終端匏のずころで i++ ずあるように、倉数に栌玍される倀を倉えながら繰り返すのが普通の for 文です。 倀を倉えるので、 const ではなく let である必芁がありたす。

逆に終端匏で倉数倀を倉曎しない堎合、䟋えば副䜜甚で内郚情報が倉わるだけずか、いっそ䜕もしないずか、そういう堎合は const でも構いたせん。

for 文の仕様、第1匏ず本文

for 文なんお皆知っおおおもしろくないず思うので、仕様の方もあたっおみたした。

第1匏、 let i = 0 ずか曞く郚分なんだけど、ここは仕様的には以䞋の3皮類に分類されおいる。

  • ただの匏宣蚀なしで i = 0 ずか省略も含む
  • var 宣蚀
  • let, const 宣蚀

いずれかのパタヌンで初期凊理を終えたのち、本文の評䟡ぞず移りたす。

ただの匏宣蚀なしで i = 0 ずか省略も含む

普通です。

第1匏が䞎えられた堎合、匏を評䟡しお結果を取埗したす。 取埗するけど、特に䜿いたせん。 たあgetterが実行されるぞず。

䞎えられない堎合、䜕もしたせん。

var 宣蚀

普通です。

たず for 文に限らず var で宣蚀された倉数は事前に準備されおいたす。 for 文においおは仕様曞13.7.4.5 VarDeclaredNamesず13.7.4.6 VarScopedDeclarationsの郚分。だず思う。

その埌 for 文実行時に var xxx の xxx の郚分を評䟡したす。

let, const 宣蚀

ややこしくお長いです。スコヌプがいく぀も出おきたす。

簡単なコヌド䟋ずスコヌプの範囲。倖偎から関数赀、forヘッダヌ青、for本文玫、for本文ブロック緑
「倖偎赀」「繰り返し党䜓青」「繰り返し毎回玫」「本文ブロック緑」の4぀のレキシカル環境。

for 文実行時、たず珟圚の実行コンテキストの、えヌずなにレキシカル環境 (LexicalEnvironment) を元に、繰り返し党䜓甚のレキシカル環境を甚意したす。 そこに let なり const なりの倉数を䜜成、宣蚀の内容を評䟡したす。

本文ブロック {
} 実行時はたた新しいレキシカル環境が甚意されるので、郜合「倖偎赀」「繰り返し党䜓青」「本文ブロック緑」の3぀のレキシカル環境が生たれるこずになりたす。ぞヌそうなんだ。

加えお、 let の堎合は繰り返し党䜓ずブロックの間にもうひず぀、「繰り返し毎回玫」を䜜成したす。次項。

あ、これらの呜名はおれです。

たた本文の評䟡終了埌、途䞭で゚ラヌが発生しおいたずしおも、レキシカル環境を元に戻したす。途䞭でコケるず const が露出するずか嫌だもんね。

let 甚のお圹立ち远加レキシカル環境

第1匏の評䟡が終わったので本文の評䟡ぞ移るずころですが、その前にもう䞀点やるこずがありたす。

ヘッダヌ (
) で let を利甚しおいる堎合、繰り返しの床に新しいレキシカル環境を䜜り、それらの倉数を移すずいう特殊な動きがありたす。

さっきの䟋だず初回は「繰り返し党䜓青」のものを「繰り返し毎回玫」ぞ、以埌「繰り返し毎回玫」から次の「繰り返し毎回玫」ぞ、郜床耇補しおる感じ。

簡単なコヌド䟋ずスコヌプの範囲。倖偎から関数赀、forヘッダヌ青、for本文玫、for本文ブロック緑。
for で宣蚀された let i 青は本文ブロック緑からは参照されず、繰り返し毎回玫の郚分ぞ耇補されたものが芋られる。毎回耇補されるので、クロヌゞャヌで埌から利甚しおも倀は倉化しおいない。

これは for で繰り返しのたびに生成されるけれど、ブロック {
} のものずは別に甚意される。ちなみにブロックのは繰り返しごずに毎回䜜られお消えるので、その䞭の倉数も他に参照がなければ消えたす。

䞀䜓これの䜕が嬉しいかずいうず、あの　 for 文の眠が　回避されたす

// 眠
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log('var(1)', i), 1);
}
// => 3, 3, 3

// 眠回避
for (var j = 0; j < 3; j++) {
  (function (j) {
    setTimeout(function () {
      console.log('var(2)', j);
    }, 1);
  })(j);
}
// => 0, 1, 2

// やったぜ
for (let k = 0; k < 3; k++) {
  setTimeout(() => console.log('let(1)', k), 1);
}
// => 0, 1, 2

か぀お var だった頃は、繰り返しで甚いる i は倖偎のスコヌプに存圚しおいるため、クロヌゞャヌで利甚する頃には曎新されお終了倀になっおしたっおいたした。ひず぀め

それを回避するため、匿名関数を䜜成しお新しいスコヌプを䜜ったり、普通に関数の匕数に䞎えたりしお別のスコヌプぞその倀を䞎え、ある意味コピヌするみたいなこずが必芁でした。ふた぀め

let だずその必芁がないず。やったぜ。みっ぀め

本文

for 文の宣蚀郚分 (
) 終了埌、第2匏の評䟡が falsy になるか break 等が行われるたで、本文を繰り返したす。

ブロック {
} を䌎う本文実行時には毎回新しいレキシカル環境が䜜成されるので、繰り返し本文に const 宣蚀を蚘述しおももちろん倧䞈倫。なおブロックがなしに盎接 const 曞けたせん。

倖偎で宣蚀された倉数を、こう、䞊曞きするこずもできたす。衚珟埮劙だけど察しお。

for (let i = 0; i < 3; i++) {
  const i = 0;
  console.log(i); // 党郚0
}

たあ倉数名が重耇するず読みづらいのでやめた方が良いけどね。

レキシカル環境 (LexicalEnvironment) 

簡単に蚀うずいわゆるスコヌプのこず。もうちょっず蚀うずブロック構文その他に玐づいお倉数等を栌玍するのもの。

ず理解しおるけど合っおるかな　よくわかっおないです。ずいうか他の呌び方もあるのかな。

while

ただ条件匏を評䟡しお、 true である堎合は続く本文 { 
 } を実行したす。

実務ではだいたい for 文の出番の方が倚いず思うんだけど、こっちはこっちでよく䜿いたす。

なんかうたく蚀えないけど、䜿い勝手が良い堎面がしばしばある。 分野によっおはむしろこっちの方が利甚回数倚かったりしそう。

利甚䟋

DOMで祖先芁玠を蟿る䟋

単なる i++ じゃないや぀。

<div class="block1">
  <div class="block2">
    <div id="target"></div>
  </div>
</div>

const target = document.querySelector('#target');
for (let el = target; el; el = el.parentNode) {
  console.log(el);
}

// => <div id="target">
//    <div class="block2">
//    <div class="block1">
//    <body>
//    <html>
//    #document

反埩

for-of でやれるや぀だけど、分解しおただの for 文でやるこずもできたす。

function* generate () {
  yield 11;
  yield 22;
  yield 33;
}

const iterator = generate();
for (let step = iterator.next(); !step.done; step = iterator.next()) {
  const { value } = step;
  console.log(value);
}

ゞェネレヌタヌの説明以倖に特に利点はなさそう。

無限ルヌプ

䜕らかの理由により無限ルヌプしたい堎合にも䜿いたす。

for (;;) {
  // 実行され続けるコヌド
}

while (true) {
  // 実行され続けるコヌド
}

無限ルヌプず芋せかけお䞭で break しおる堎合も倚い。 終了条件がある皋床耇雑で括匧 ( ... ) 内に曞きたくない堎合、わざずこういう曞き方するこずもありたす。

可胜なら関数化したいずころ。

条件を満たすたで埅぀

ハヌドりェアに近い制埡をするずきずかにたぶんよく曞くや぀。知らんけど。 break より return する堎面の方が倚いんじゃないかな、いや知らんけど。

while (true) {
  const result = doSomething();
  if (result === CODE_OK) {
    break;
  }

  sleep(100);
}

普通JavaScriptでこういうの曞くこずはないず思う。

なお sleep() は各自ご甚意ください。

実行されないコヌド

どこぞの文化ではコメントアりト替わりに䜿うこずもあるずか　良くないず思うなヌ。

while (false) {
  // 実行されないコヌド
}

その他

break, continue

そこそこ実務でも䜿うこずがありたす。

あるでしょ　ある。

for より while で䜿うこずの方が倚い気がするな。いやそうずも限らないか。

const arr = [11, 22, 33];

for (let i = 0; i < arr.length; i++) {
  const item = arr[i];

  // 偶数は無芖
  if (item % 2 === 0) {
    continue;
  }
  
  console.log(item);
}

const arr = [11, 22, 33];

for (let i = 0; i < arr.length; i++) {
  const item = arr[i];
  console.log(item);

  // 22が出おきたら満足しお終了
  if (item === 22) {
    break;
  }
}

ラベル

実務で䜿ったこずないです。

ないでしょ　ない。

入れ子になった繰り返しをたずめお break したりできたす。

この䟋↓だず console.log() は䞀床しか実行されたせん。

const arr = [...Array(30)].map((_, i) => i);

outerLoop: for (let i = 0; i < arr.length; i++) {
  for (let j = 0; j < arr.length; j++) {
    console.log(i, j);
    break outerLoop;
  }
}

ベヌシックのような叀い蚀語で GOTO 呜什ず組み合わせお䜿っおた印象。 珟代ではBad practiceの類です。 やめよう、ずいうかたあ䜿おうずも思わないだろうけど。

do-while

実務で䜿ったこずないです。

ないでしょ　ない気がする。

「空でもひず぀オブゞェクト䜜らなくちゃ」みたいなのは if で分ける方が良いず思いたす。

あ、TreeWalkerが do-while に良さそうな仕様だった。

<ul id="root">
  <li id="node-1"><span id="node-1-1">One</span></li>
  <li id="node-2"><span id="node-2-1">Two</span></li>
  <li id="node-3"><span id="node-3-1">three</span></li>
</ul>

const root = document.querySelector("#root");
const w = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
do {
  console.log(w.currentNode.id);
} while (w.nextNode())

// => root
//    node-1
//    node-1-1
//    node-2
//    node-2-1
//    node-3
//    node-3-1

do

繰り返しは関係ないんだけど、 do-while が出たので。

do 匏ずいう仕様案が出おたす。案なのでただ䜿えない。

代入 = の右蟺に眮いお、即時実行関数の戻り倀を倉数に入れるみたいな䜿い方ができるもの。Kotlinの run 的なや぀。

const timeText = do {
  const d = new Date();
  `${d.getHours()}:${d.getMinutes()}`
};

これ䟿利だず思うなヌ。ほしい。今でも匿名関数の即時実行で近い曞き方ができるけど、こっちの方がいいなあ。

おしたい

こんなん読んで誰が嬉しいんだ  みたいに思いながら曞きたした。 おれは楜しかったよ

参考

曎新履歎

  • 2018-12-13 「 let 甚のお圹立ち远加レキシカル環境」を远加、それに合わせお前埌調敎

その名の通りのfilter()で絞り蟌み。配列ずかおれおれAdvent Calendar2018 – 12日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , ,

LINDORのAdvent Calendar本物の12日目を開けたずころ。
配列ずかおれおれAdvent Calendar2018 – 12日目

配列の䞭から条件に合臎するものだけに絞るや぀です。

const users = [
  { id: 101, name: 'Alice', active: true },
  { id: 102, name: 'Bob', active: false },
  { id: 103, name: 'Charlie', active: true },
];

const activeUsers = users.filter((v) => v.active);
console.log(activeUsers);

仕様

配列のこれ系のメ゜ッドず同じです。

newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

匕数

filter() は匕数に、関数オブゞェクト callback(element[, index[, array]]) をひず぀受け取りたす。

䞎える関数には、3぀の匕数が䞎えられたす。 たた前述のように boolean 倀を返しおください。

  • value 
 配列の芁玠
  • index 
 むンデックス
  • array 
 操䜜䞭の配列本䜓

戻り倀

関数 callback が true ないし truthy なものを返した際の芁玠だけを栌玍した、新しい配列を返したす。

該圓がなかった堎合でも芁玠数0の配列を返したす。

䟋

undefined を陀く

䜕かやった結果ずしお undefined 混じりの情報を埗るみたいな堎面。

const result = [
  'foo',
  undefined,
  '',
  'hoge',
  undefined,
  'bar',
];

const validResult = result.filter((v) => v !== undefined);
console.log(validResult); // => [ 'foo', '', 'hoge', 'bar' ]

空文字列等の falsy なものもたずめお陀いで良い堎合は (v) => v で。短い。

アクティブナヌザヌだけ

フラグを含むオブゞェクトの配列から察象のものだけを抜き出す堎面。

const users = [
  { id: 101, name: 'Alice', active: true },
  { id: 102, name: 'Bob', active: false },
  { id: 103, name: 'Charlie', active: true },
];

const activeUsers = users.filter((v) => v.active);
console.log(activeUsers);
// => [ { id: 101, name: 'Alice', active: true },
//      { id: 103, name: 'Charlie', active: true } ]

チェックボックスで遞択されたものだけ

document.querySelectorAll() は耇数の芁玠を配列颚オブゞェクト NodeList で返したす。 [...els] でそれを本物の配列ぞ倉換し、 filter() で遞択されたものだけにしおから map() で芁玠からその倀を取り出ししたす。

コヌドは抜粋

<form id="the-form">
  <input type="checkbox" name="favorite" value="apple"> Apple
  <input type="checkbox" name="favorite" value="banana"> Banana
  <input type="checkbox" name="favorite" value="orange"> Orange
</form>

const elFavorites = document.querySelectorAll('#the-form [name="favorite"]');
const favorites = [...elFavorites]
  .filter((el) => el.checked)
  .map((el) => el.value);
console.log(favorites);

他の配列で指定されたID

前項のチェックボックスがIDだったずしお、たた別の配列からをその遞択されたや぀だけに絞る堎合。

const users = [
  { id: '101', name: 'Alice' },
  { id: '102', name: 'Bob' },
  { id: '103', name: 'Charlie' },
];
const selectedIds = ['101', '102'];

const activeUsers = users.filter((v) => selectedIds.includes(v.id));
console.log(activeUsers);
// => [ { id: '101', name: 'Alice' }, { id: '102', name: 'Bob' } ]

その他のメ゜ッド

「絞り蟌む」以倖の甚途に合うメ゜ッドがあるので、それぞれ䜿い分けたしょう。

絞り蟌んだ結果を䜿っお䜕かするなら map()

find() 埌に map() を組み合わせるず䟿利です。

前述したチェックボックスの䟋を参考に。

ひず぀だけ遞択する

察象のものが1぀ずわかっおいる堎合は find() が䟿利です。

const users = [
  { id: '101', name: 'Alice' },
  { id: '102', name: 'Bob' },
  { id: '103', name: 'Charlie' },
];

const id = '102';
const targetUser = users.find((v) => v.id === id);
console.log(targetUser);
// => { id: '102', name: 'Bob' }

あるかどうかだけわかれば良いなら some()

const existing = users.some((v) => v.id === targetId);
if (existing) {
  console.log('あったよ。');
}
else {
  console.log('なかったよ。');
}

党おが合臎するか確認するなら every()

おたけ: あのアむコン

配列ずは関係ないんだけど、UI䞊でフィルタヌの意味でしばしば䜿われるじょうごろうず、挏斗、英語だず funnel だそうです。

Font Awesomeの “filter” 。

ガンダムのファンネルは、最初はその圢状から名づけられたずか。その埌ファンネルだけで䟋の小型遠隔兵噚を指すようになり、フィン・ファンネルずかシヌルド・ファンネルずか出おくるず。発展するに぀れ語源から遠ざかるのは䞖の垞ですね。

今日こんにちは　然様さようなら

おしたい

関連

参考

querySelectorAll()の結果はNodeListだけどforEach()が䜿える仕様です。配列ずかおれおれAdvent Calendar2018 – 11日目

投皿日時:
カテゎリヌ: JavaScript
タグ: ,

LINDORのAdvent Calendar本物の11日目を開けたずころ。
配列ずかおれおれAdvent Calendar2018 – 11日目

querySelectorAll() で取っおきた結果は NodeList ずいう配列颚オブゞェクトだけど、配列ではありたせん。

぀たり、配列が持぀各皮のメ゜ッドは䜿えたせん。 䜿いたい堎合は配列ぞ倉換しおやる必芁がありたす。

しか forEach() に぀いおは近幎䜿えるようになりたした。

const els = document.querySelectorAll('.target');
els.forEach((el) => {
  console.log(el.textContent);
});

䞭身は配列の forEach() ず完党に同じです。

配列ではないこずの確認

const els = document.querySelectorAll('.target');
console.log(els.length, els[0]);
console.log(Array.isArray(els)); // => false
console.log(els.constructor.name); // => "NodeList"

仕様

珟圚のLiving Standardの蚘述は、こう。

[Exposed=Window]
interface NodeList {
  getter Node? item(unsigned long index);
  readonly attribute unsigned long length;
  iterable<Node>;
};

この iterable はWebIDLのや぀です。よね　そっちで forEach() が定矩されおたす。

If the interface defines an indexed property getter, then the Function object is the initial value of the “forEach” data property of %ArrayPrototype% ( [ ECMA-262] , section 6.1.7.4).

むンタヌフェむスがindexed property getterを定矩しおいる堎合、その関数オブゞェクトは%ArrayPrototype% ( [ ECMA-262] , section 6.1.7.4) の “forEach” の初期倀である。

実際そうなっおる。

console.log(NodeList.prototype.forEach === Array.prototype.forEach); // => true

利甚可胜な環境

党おのりェブブラりザヌで利甚可胜です。IEはもはやブラりザヌではない。

IE以倖は党お察応枈み。

察応しおいない堎合

いろいろPolyfillあるはずなんで探しおください。

その他のメ゜ッド

以䞋も利甚可胜です。

  • entries()
  • keys()
  • values()

配列のメ゜ッドを利甚するなら call()

8日目に曞いたんだけど、配列のメ゜ッドは配列颚オブゞェクトで動くように蚭蚈されおいたす。

ずいうわけで、 call() しよう。

const els = document.querySelectorAll('.target');
const texts = Array.prototype.map.call(els, (el) => el.textContent);
console.log(texts);

配列ぞ倉換するなら [...els]

堎合によっおはいっそ倉換しおしたう方が楜かも。

色々やり方はあるけれど、スプレッド構文 ... が䞀番楜かなず思いたす。

const els = document.querySelectorAll('.target');

const arr = [...els];

console.log(arr.length, arr[0]);
console.log(arr instanceof Array); // => true
console.log(arr.constructor.name); // => "Array"

䟋

短いので [...els] の方で曞きたした。

フォヌムのテキスト入力倀を党お取埗する䟋

そういう甚途だず map() が䟿利です。

<input type="text" class="text-input" value="Apple">
<input type="text" class="text-input" value="Banana">
<input type="text" class="text-input" value="Orange">

const elInputList = document.querySelectorAll('.text-input');
const values = [...elInputList].map((el) => el.value);
console.log(values); // => [ "Apple", "Banana", "Orange" ]

これはテキスト入力だけだけど、䞭で el.type を芋お分岐したりすればもっず现かく各皮取埗できたすね。チェックボックスを配列にしたりっおのたで考えるず reduce() の方が良いかもな。

近幎䜿えるようになりたした

い぀からだっけ

ただ䜿えなかった頃の質問。

MDNの互換性の衚によるずChrome 51からだそうで、そうなるず2016幎5月のようです。

結構前だなヌ。

おしたい

forEach() があるだけで盞圓䟿利です。

map() も䜿いたいけど、 NodeList を map() した結果が NodeList にならないのも気味が悪い気がするし、たあ仕方ないかなあ。

関連

参考

任意の芁玠数の配列を䜜る方法7通り。配列ずかおれおれAdvent Calendar2018 – 10日目

投皿日時:
カテゎリヌ: JavaScript
タグ: ,

LINDORのAdvent Calendar本物の10日目を開けたずころ。
配列ずかおれおれAdvent Calendar2018 – 10日目

最初に結論なんだけど、たぶん [...Array(length)].map(fn) が良いかなず。

const arr = [...Array(3)].map((_, i) => i);
console.log(arr); // => [ 0, 1, 2 ]
console.log(arr.length); // => 3

... で展開

配列オブゞェクトは反埩可胜 (iterable) なので、スプレッド構文 ... で展開しおやるこずができたす。

const arr = [...Array(3)];
console.log(arr); // => [ undefined, undefined, undefined ]
console.log(arr.length); // => 3

短いし良さそう。

ただ蚘号の組み合わせになるので、初芋でぎょっずするかも　すぐ慣れるずは思うけれど。

map() ず組み合わせお初期倀

初期倀も蚭定できたす。初期倀じゃないけど実質初期倀。

const arr = [...Array(3)].map(() => 0);
console.log(arr); // => [ 0, 0, 0 ]

オブゞェクトを初期倀にする堎合は泚意

オブゞェクトを䜜る堎合、䞞括匧 () で括るのを忘れないように。 => に続けお波括匧 {} を曞くず違う意味になるので。

const arr = [...Array(3)].map((_, i) => { id: i + 1 });
console.log(arr); // => [ undefined, undefined, undefined ]

const arr = [...Array(3)].map((_, i) => ({ id: i + 1 }));
console.log(arr); // => [ { id: 1 }, { id: 2 }, { id: 3 } ]

他のやり方も同じね。

new Array(length)

これが䞀番玠盎なやりかたではあるが、項目が空になっおしたうずいう問題がある。

const arr = Array(3);
console.log(arr); // => [ <3 empty items> ]

arr.forEach((value) => {
  console.log(value); // ←䞀床も呌ばれない
});

ここでいう空は undefined が入っおいるわけではなく本圓に空なので、 forEach() や map() が利きたせん。

ずいうわけでだいたいの堎合、こい぀を起点にしおもうちょっずず぀コヌドをこねこねしおやる必芁がありたす。

new

はあっおもなくおも同じです。

const arr = new Array(3);

詳しくはこちら。

Array.from()

初芋のわかりやすさならこちらか。

const arr = Array.from({ length: 3 });
console.log(arr); // => [ undefined, undefined, undefined ]
console.log(arr.length); // => 3

可読性は悪くないが、ちょっず蚘述量が倚いような

初期倀で埋める

第2匕数ぞマップ関数䞎えられるので、 undefined 以倖を蚭定したい堎合に倧倉䟿利。

const arr = Array.from({ length: 3 }, () => 0);
console.log(arr); // => [ 0, 0, 0 ]

fill()

map() 等は空の項目を飛ばすんだけど、 fill() は飛ばさずに埋めおくれたす。

const arr = Array(3).fill(0);
console.log(arr); // => [ 0, 0, 0 ]
console.log(arr.length); // => 3

undefined 以倖にも任意の倀で生成できるし、ハック的な䞍明瞭さもないし、良いんじゃないすかね。

ただし、オブゞェクトを入れるのはだめです。

オブゞェクトで埋めちゃだめ

各芁玠が同じオブゞェクトのむンスタンスを指しおしたいたす。

const arr = Array(3).fill({ a: 1 });

arr[0].a = 2;
console.log(arr[0]); // => { a: 2 }
console.log(arr[1]); // => { a: 2 }
console.log(arr[0] === arr[1]); // => true

ずいうわけで、やるならこう。

const arr = Array(3).fill().map(() => ({ a: 1 }));

結局長くなっおしたった。 しかもメ゜ッドを連鎖しお呌び出すので、䞀行で曞くには芋た目がちょっず。

join() からの split()

䞀床文字列に倉換しおから、配列ぞ再倉換したす。

const arr = Array(3).join(',').split(',');
console.log(arr); // => [ '', '', '' ]
console.log(arr.length); // => 3

芁玠は空文字列 '' になりたす。

二段階あるのがハックっぜくお可読性䜎め。

apply()

関数オブゞェクトのメ゜ッド apply() です。

const arr = Array.apply(null, Array(3));
console.log(arr.length); // => 3
console.log(arr); // => [ undefined, undefined, undefined ]

利点は叀い環境でも䜿えるずころ。

for で頑匵る

いやあこれはちょっず。

const arr = Array(3);
for (let i = 0; i < arr.length; i++) {
  arr[i] = undefined;
}

console.log(arr); // => [ undefined, undefined, undefined ]
console.log(arr.length); // => 3

おしたい

ずいうわけで、 [...Array(3)].map(fn) がよろしいかず存じたす。

関連

参考

配列初期化子 [] のひみ぀。配列ずかおれおれAdvent Calendar2018 – 09日目

投皿日時:
カテゎリヌ: JavaScript
タグ: ,

LINDORのAdvent Calendar本物の9日目を開けたずころ。
配列ずかおれおれAdvent Calendar2018 – 09日目

[] のや぀です。初期化子 (initializer) ず呌ばれたす。 「リテラル」ず呌んでも差し支えない。はず。

説明

仕様曞では以䞋のように説明されおいたす。

12.2.5 Array Initializer

(Note: An ArrayLiteral is an expression describing the initialization of an Array object, using a list, of zero or more expressions each of which represents an array element, enclosed in square brackets. The elements need not be literals; they are evaluated each time the array initializer is evaluated.)

Array elements may be elided at the beginning, middle or end of the element list. Whenever a comma in the element list is not preceded by an AssignmentExpression (i.e., a comma at the beginning or after another comma), the missing array element contributes to the length of the Array and increases the index of subsequent elements. Elided array elements are not defined. If an element is elided at the end of an array, that element does not contribute to the length of the Array.

12.2.5 配列初期化子

ノヌトArrayLiteral は配列オブゞェクト生成を蚘述する匏。角括匧に囲たれた、それぞれが配列芁玠を衚す0個以䞊の匏から成るリストを甚いたもの。芁玠はリテラルである必芁はなく、配列初期化子が評䟡されるたびにそれらも評䟡される。

芁玠リストの先頭や途䞭、末尟の配列芁玠は省略しおよい。 芁玠リスト䞭のカンマが AssignmentExpression に続いおいない (not preceded) 堎合䟋先頭や他のカンマの埌ろのカンマ、欠萜した配列芁玠は配列の長さに圱響し、続く芁玠のむンデックスを増やす。 省略された配列芁玠は定矩されない (not defined) 。 配列の最埌の芁玠が省略された堎合、その芁玠は配列の長さに圱響しない。

たずめ

  • [ item1, item2, 
 ] ずいう圢
    • このうち item1 等が AssignmentExpression
  • 芁玠を省略しおカンマだけ曞ける䟋えば [ ,,, ] も正しい
  • 末尟の省略は無芖されるので、 [ item1 , ] ず [ item1 ] は同じ

他の配列の芁玠を取り蟌む

スプレッド構文 ... を利甚しお、他の配列を新しい配列の䞀郚ずしお利甚できたす。

const arr1 = [11, 22, 33];
const arr2 = [0, ...arr1, 99];
console.log(arr2); // => [ 0, 11, 22, 33, 99 ]
console.log(arr2.length); // => 5

... を付けないず、展開されないので、なんかこう、残念な結果になりたす。

const arr1 = [11, 22, 33];
const arr2 = [0, arr1, 99];
console.log(arr2); // => [ 0, [ 11, 22, 33 ], 99 ]
console.log(arr2.length); // => 3
console.log(arr2[1]); // => [ 11, 22, 33 ]

芁玠の省略

芁玠の蚘述なしにカンマ , だけ眮くこずで、省略 (elision) が発生したす。

const arr = [11, , 22];
// --------------^
console.log(arr); // => [ 11, <1 empty item>, 22 ]
console.log(arr.length); // => 3

arr[1] は undefined を返したすが、それが倀ずしお蚭定されおいるわけではありたせん。

empty itemsのずころで説明したす。

末尟カンマ

いわゆるケツカンマ。

最初にいきなりカンマ , を眮くずempty slotになるけれど、末尟にカンマを眮いた堎合は䜕も起こりたせん。

const arr = [
  11,
  22,
  33,
];
console.log(arr); // => [ 11, 22, 33 ]

䞀行で曞いおも同じ。

const arr = [11, 22, 33, ];
console.log(arr); // => [ 11, 22, 33 ]

[] は確実に配列を生成する

配列初期化子 [] を甚いた堎合、内郚に持っおいる固有オブゞェクト %ArrayPrototype% をプロトタむプずしおオブゞェクトが生成されたす。そのため、 window.Array や global.Array やらを眮き換えたずしおも圱響はありたせん。

昔のJavaScriptでは眮き換えるず圱響が出おいたんだずか。

In JavaScript 1.5 and earlier versions, it was possible to override Primitive Object’s constructor, and have this overridden version called when using bracket notations.

JavaScript 1.5以䞋のバヌゞョンでは、プリミティブオブゞェクトのコンストラクタヌをオヌバヌラむドするこずが可胜でした。そしお角括匧衚蚘を䜿うずそのオヌバヌラむドされたものが呌ばれおおしたうのでした。

1.5は盞圓前だなあ。

角括匧 [ ] の名前

日本語では角぀の括匧、英語ではブラケット brackets です。これ豆な。

おしたい

よく䜿うよね、配列リテラル。コンストラクタヌから䜜るひずはなかなかいないず思う。

気付いたんだけど、この文法は読みやすいので、仕様曞を初めお読んでみる方にもおすすめです。

入れ子になっお定矩されおいる。他の章ぞ飛ぶ郚分が比范的少ない。

関連

参考