配列で重複する項目を取り除くやつ4種。（配列とかおれおれAdvent Calendar2018 – 18日目）

投稿日時: 2018/12/18 00:00

カテゴリー: JavaScript

タグ: Advent Calendar 2018, Map, Set, 配列

LINDORのAdvent Calendar（本物）の18日目を開けたところ。 — 配列とかおれおれAdvent Calendar2018 – 18日目

ありそうでないメソッド、それが重複排除です。

Underscore.jsやLodashには uniq() てのがあって、こんな感じ↓で使えます。

const arr0 = [11, 22, 11, 22, 33];
const arr1 = _.uniq(arr0);

JavaScriptにはありません。

`Set` を使う

単純な値ならこれが一番簡単。

Set は重複しない値を格納できるオブジェクトです。 ... で展開して配列オブジェクトへ再変換します。

Set | MDN

const arr0 = [11, 22, 11, 22, 33];
const arr1 = [...new Set(arr0)];
console.log(arr1); // => [ 11, 22, 33 ]

`includes()` で確認する

これが一番素直。

includes() は配列が指定の要素を含むかどうか調べるやつです。重複してなかったら追加するだけ。

const arr0 = [11, 22, 11, 22, 33];

const arr1 = arr0.reduce((a, v) => {
  if (!a.includes(v)) {
    a.push(v);
  }
  return a;
}, []);

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

reduce() に自信がなければ forEach() でも。

const arr1 = [];
arr0.forEach((v) => {
  if (!arr1.includes(v)) {
    arr1.push(v);
  }
});

`some()` でやる

Set も includes() もオブジェクトの場合は完全に同じインスタンスでないと反応しないので、その場合は some() がよろしいかと。

もっと自由度が高い。

Array.prototype.some() – JavaScript | MDN

const arr0 = [
  { id: '11', num: 1 },
  { id: '22', num: 2 },
  { id: '11', num: 3 },
  { id: '22', num: 4 },
  { id: '33', num: 5 },
];

const arr1 = arr0.reduce((a, v) => {
  if (!a.some((e) => e.id === v.id)) {
    a.push(v);
  }
  return a;
}, []);

console.log(arr1);
// [ { id: '11', num: 1 },
//   { id: '22', num: 2 },
//   { id: '33', num: 5 } ]

重複分は先に出てくるやつが優先です。

`Map` を使う

これもオブジェクトに対応。初見で「ぎょえー」てなりそう。

Map | MDN

const arr0 = [
  { id: '11', num: 1 },
  { id: '22', num: 2 },
  { id: '11', num: 3 },
  { id: '22', num: 4 },
  { id: '33', num: 5 },
];

const arr1 = [...new Map(arr0.map((v) => [v.id, v])).values()];

console.log(arr1);
// [ { id: '11', num: 3 },
//   { id: '22', num: 4 },
//   { id: '33', num: 5 } ]

仕組みは Set と some() の組み合わせです、だいたい。

map() でIDとオブジェクト本体の組み合わせへ変換
組み合わせを元に Map オブジェクトを作成。ここでID（ Map のキー）が重複するものは排除）
values() でオブジェクト（ Map の値）のみの反復子を得る
スプレッド構文 ... を伴う配列初期化子 [] で配列に。完成

重複分は後ろにあるやつが優先（上書き）です。

おしまい

なんか良いのある？

参考

だいたいの繰り返しは配列のforEach()でいける。（配列とかおれおれAdvent Calendar2018 – 17日目）

投稿日時: 2018/12/17 00:00

カテゴリー: JavaScript

タグ: Advent Calendar 2018, 配列

LINDORのAdvent Calendar（本物）の16日目を開けたところ。 — 配列とかおれおれAdvent Calendar2018 – 16日目

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

for, while → for文を仕様からじっくり見てみる。あとwhileとか。（配列とかおれおれAdvent Calendar2018 – 13日目）
for-in → for-inの仕様も見てみたよ。使う機会なさそうだけど。（配列とかおれおれAdvent Calendar2018 – 14日目）
for-of → for-ofで配列も普通のオブジェクトも反復しよう。（配列とかおれおれAdvent Calendar2018 – 15日目）
for-await-of → 非同期に繰り返すならfor-await-of構文が使える、けど使わない方が良いかも。（配列とかおれおれAdvent Calendar2018 – 16日目）
forEach() ← イマココ

お待たせ！　現代的JavaScriptでは主流の、よく for を置き換え使うやつです。

まず `for` の例

const arr = [11, 22, 33];

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

`forEach()` にした例

const arr = [11, 22, 33];

arr.forEach((value) => {
  console.log(value);
});

かんたーん。

簡単なので、あまり語ることはありません。

仕様

引数は他のこれ系の配列メソッドと同じです。

Array.prototype.forEach() – JavaScript | MDN

forEach() は引数に、関数オブジェクトをひとつ受け取ります。戻り値はありません。 (undefined)

与える関数は、3つの引数が与えられます。

value … 配列の要素
index … インデックス
array … 操作中の配列本体

const arr = [11, 22, 33];

arr.forEach((value, index, array) => {
  console.log(index, ':', value, ' <- ', array[index], array);
});

第2引数

実は forEach() その他にはには第2引数 thisArg があります。

これは第1引数の関数実行時に this へ束縛されるオブジェクトなんだけど、近年は this が変わらないアロー関数を用いるのが主流なので、使う場面は少ないかなと思います。

const obj = {
  arr: [11, 22, 33],

  logAll: function () {
    this.arr.forEach(function (value) {
      this.output(value);
    }, this);
  },

  output: function (msg) {
    console.log('Message: ', msg);
  },
};

obj.logAll();

再利用

これも他の配列メソッドと同様なんだけど、配列以外のオブジェクトへ適用しても適切に動作するよう設計されています。

例

基本的に forEach() でできて for でできないことってないんじゃないかな。

普通に繰り返す

const arr = [11, 22, 33];
arr.forEach((value) => {
  console.log(value);
});

配列内の他の要素を参照する

えーと例えば毎年の人口とか、そういう数値情報が与えられて、その増減を見ていきたい場合。

まずは for 文でやる例。

const arr = [100, 110, 115, 103, 110, 90];

for (let i = 1; i < arr.length; i++) {
  const item1 = arr[i - 1];
  const item2 = arr[i];
  const diff = item2 - item1;
  const sign = diff < 0 ? '' : '+';
  console.log(`${item1} -> ${item2} (${sign}${diff})`);
}

// 100 -> 110 (+10)
// 110 -> 115 (+5)
// 115 -> 103 (-12)
// 103 -> 110 (+7)
// 110 -> 90 (-20)

まず最初に i = 1 から始めるのはできないので、繰り返しの中で飛ばします。（slice() とかするとインデックスがずれちゃうので注意。そっちの方が良いかもだけど。）

また配列全体は与える関数の第3引数にもらえるので、これを利用します。

const arr = [100, 110, 115, 103, 110, 90];

arr.forEach((item2, i, all) => {
  if (i < 1) { return; }
  const item1 = all[i - 1];
  const diff = item2 - item1;
  const sign = diff < 0 ? '' : '+';
  console.log(`${item1} -> ${item2} (${sign}${diff})`);
});

ここで all は外側の arr と同じなので、そっちでも良いです。

結果を配列にしたいなら reduce() も有用。

同じ処理を繰り返す

配列記法から直接メソッド実行できるので、匿名関数の即時実行みたいなノリで、匿名配列の即時利用てな感じでも使えます。

[
  '.target1',
  '.target2',
  '.target3',
].forEach((selector) => {
  const el = document.querySelector(selector);
  el.classList.add('targeted');
});

同じ処理をまとめるってなら関数化が正解だと思うんだけど、手軽に書きたいときとか。

セミコロンを行末に置かないスタイルの場合はご注意ください。配列記法 [] が前の行と繋がってしまうので。

似た計算をする

縦横両方向の計算とか、プロパティ名は異なるが算出方法は同じ、みたいな場面で。

デモ: 縦横の位置を計算 – JSFiddle

// 抜粋

[
  ['clientWidth', 'left'],
  ['clientHeight', 'top'],
].forEach(([sizeName, axisName]) => {
  const pos = (elWrapper[sizeName] - elItem[sizeName]) / 2;
  elItem.style[axisName] = `${pos}px`;
});

純粋な計算と副作用を分けたい場合は map() でも。

`forEach()` でできないこと

と、他と組み合わせてのやり方。

forEach() は「先頭から末尾まで繰り返す」ものなので、それ以外のパターンで繰り返したい場合はコードこねこねしてやる必要があります。

先頭以外から、末尾以外までの繰り返し

あんまりやらない気もするけど、途中からとか途中までとかはできません。

split() と組み合わせます。

Array.prototype.slice() | MDN

const arr = ['A', 'B', 'C'];

// 先頭から1個までを飛ばす
// => B, C
arr.slice(1).forEach((item, i) => {
  console.log(`${i}: ${item}`);
});

// 末尾から1個までを飛ばす
// => A, B
arr.slice(0, -1).forEach((item, i) => {
  console.log(`${i}: ${item}`);
});

index を見てコールバック関数で return するのでもアリ。

飛ばして回す

一つ飛ばしとかはできません。

できないので、繰り返しのコールバック関数で都度 return して、何もしないようにします。

const arr = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];

// 3つごと
// => A, D, G, J, ...
arr.forEach((c, i) => {
  if (i % 3 !== 0) { return; }
  console.log(`${i}: ${c}`);
});

あるいは事前に弾いておく。こっちの方が見た目はきれいっぽい。

const arr = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];

// 3つごと
// => A, D, G, J, ...
arr
  .filter((_, i) => i % 3 === 0)
  .forEach((c, i) => console.log(`${i}: ${c}`));

逆順に繰り返し

意外とこれができません。常に先頭からです。

配列を逆順にする reverse() というのもあるんだけど、こいつは対象の配列自体を逆順にする破壊的な副作用があるので、利用可能な場面が限定的です。

Array.prototype.reverse() | MDN

const arr = ['A', 'B', 'C'];

arr.reverse().forEach((item, i) => {
  console.log(`${i}: ${item}`);
});
// => C, B, A

// 元の配列が変わっちゃう！
console.log(arr); // => [ 'C', 'B', 'A' ]

事前に複製してから reverse() すればいいんだけど。

[...arr].reverse()

うーん、 reduceRight() が良いかな。

const arr = ['A', 'B', 'C'];

arr.reduceRight((_, item, i) => {
  console.log(`${i}: ${item}`);
}, 0);

これはこれで第2引数に何か与えるのと、コールバック関数の第1引数も value でないものが与えられるのを忘れないように気を付けないといけない。

回ってくる値を無視する？

const arr = ['A', 'B', 'C'];

arr.forEach((_, i) => {
  const item = arr[arr.length - 1 - i];
  console.log(`${i}: ${item}`);
});

sort() しちゃうのが意味が明瞭で一番良いかもしれない。

配列以外の `forEach()`

普通のオブジェクト

配列へ変換してやります。

プロパティ名だけ得る例。

const obj = {
  a: 11,
  b: 22,
  c: 33,
};

Object.keys(obj).forEach((key) => {
  console.log(key);
});
// => a, b, c

他に値だけを得る Object.values() と、両方を得る Object.entries() があります。

for-of でやったやつら。

for-ofで配列も普通のオブジェクトも反復しよう。（配列とかおれおれAdvent Calendar2018 – 15日目）

`Map`, `Set`

こいつらは forEach() を持ってます。だいたい同じ動き。

Map はインデックスの代わりにキーが得られます。ですよねー。

順序ははキーを追加した順。

Map.prototype.forEach() – JavaScript | MDN

const map = new Map([
  ['foo', 11],
  ['bar', 22],
  ['boo', 33],
]);
map.forEach((value, key) => {
  console.log(key, value);
});

Set の場合、インデックスやキーとなる部分にも値が与えられます。わお。

こちらも順序は追加順です。

Set.prototype.forEach() – JavaScript | MDN

const set = new Set([11, 22, 33]);
set.forEach((value, v2) => {
  console.log(value, v2, value === v2); // 11, 11, true 等
});

DOM系の配列風オブジェクト

でも使えたりします。

NodeList.prototype.forEach() – Web APIs | MDN

const els = document.querySelectorAll('.target');
console.log(els instanceof Array); // => false
els.forEach((el, index) => {
  console.log(index, el);
});

forEach() 以外の、例えば map() とかはないです。

中身は完全に配列のそれと同じ。そこら辺のもうちょい詳しい話を別稿に用意しました。

querySelectorAll()の結果はNodeListだけどforEach()が使える仕様です。（配列とかおれおれAdvent Calendar2018 – 11日目）

jQuery

には each() というのがあったり。

.each() | jQuery API Documentation

const $els = $('.target');
$els.each((index, el) => {
  console.log(index, el);
});

引数の順序が違う点に注意。（今時使うのかはわからないけど。）

jQueryオブジェクトは反復可能なので、 [...$els].forEach(fn) も使えます。

`for` と速度面の比較

まず結論ですが、高速化のために forEach() を避けて for を採用する必要はありません。

可読性や記述の用意さから考えても forEach() の方が良いように思います。（個人の感想です。）

遅いかと言われれば、もちろん遅いんだけど、そこの遅さが問題になる状況は普通、既に破綻してますから。それよりも前に気にするべき個所があるはずです。計算量（ O(n²) とかそういうやつ）を考えて、ファイルアクセスやら画面再描画やらの遅いAPIに気を付けて。

2012年の実験があります。0.001ミリ秒以下の差です。0.001秒じゃないよ。

Nifty Snippets: forEach and runtime cost

よっぽど極まった場面では別だけど、まあ微妙な速度性能差ではなく機能差で選ぼうね。

あ、でも

何か探すとかで最後まで繰り返す必要がない場合は forEach() じゃなくて find() とか some() とか、そういう適切なものを使おう。意味が明瞭になって可読性も向上するし。

おしまい

繰り返しシリーズおしまい。はー長かった。

forEach() は便利で大変よろしい。

参考

非同期に繰り返すならfor-await-of構文が使える、けど使わない方が良いかも。（配列とかおれおれAdvent Calendar2018 – 16日目）

投稿日時: 2018/12/16 00:00

カテゴリー: JavaScript

タグ: Advent Calendar 2018, for-await-of, 配列

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

for, while → for文を仕様からじっくり見てみる。あとwhileとか。（配列とかおれおれAdvent Calendar2018 – 13日目）
for-in → for-inの仕様も見てみたよ。使う機会なさそうだけど。（配列とかおれおれAdvent Calendar2018 – 14日目）
for-of → for-ofで配列も普通のオブジェクトも反復しよう。（配列とかおれおれAdvent Calendar2018 – 15日目）
for-await-of → 別稿
forEach() → 別稿

for-of の亜種で、非同期に繰り返すやつに対応します。

const sleep = (ms) => new Promise((f) => setTimeout(f, ms));

async function* foo () {
  yield 11;
  await sleep(1000);
  yield 22;
  await sleep(1000);
  yield 33;
}

(async () => {
  for await (const value of foo()) {
    console.log(value);
  }
})();

// 11
// 22
// 33

仕様

for-in, for-of と同じ章で説明されます。

13.7.5 The for-in, for-of, and for-await-of Statements

基本的な処理もそれらと一緒。なので過去記事にも目を通しておいて頂きたいです。なにとぞ。

for-ofで配列も普通のオブジェクトも反復しよう。（配列とかおれおれAdvent Calendar2018 – 15日目）

`async` 内でのみ利用可能

await なので。

// OK
(async () => {
  for await (const v of obj) {
    // …
  }
});

// SyntaxError: Unexpected reserved word
(() => {
  for await (const v of obj) {
    // …
  }
});

非同期に反復可能なオブジェクト

for-of では「反復可能」なオブジェクトが利用可能で、それは適切な [Symbol.iterator]() メソッドが設定されているもの、でした。

for-await-of で利用可能なオブジェクトは「非同期反復可能」なもので、それは適切な [Symbol.asyncIterator]() メソッドが設定されているもの、です。

for-of のときと同じく、そういうオブジェクトを自作することができます。

const sleep = (ms) => new Promise((f) => setTimeout(f, ms));

const obj = {
  async* [Symbol.asyncIterator] () {
    yield 11;
    await sleep(1000);
    yield 22;
    await sleep(1000);
    yield 33;
  },
};

(async () => {
  for await (const value of obj) {
    console.log(value);
  }
})();

非同期のおさらい

軽く await のお話をします。知ってる人は飛ばして次へ。

`async` とは

関数を Promise 化するやつです。

// Promise版
const f = () => {
  const promise = new Promise((resolve, reject) => {
    resolve(123);
  });
  return promise;
};

// async版
const f = async () => 123;

const p = f();
console.log(p instanceof Promise); // => true
p.then((result) => {
  console.log(result); // => 123
});

return すると resolve() 、 throw は reject() です。

今回の例だと非同期関数の中で何もしてないけど、もちろん普通は Promise なりまた await なりで非同期に処理をします。

`await` とは

Promise の then() の代わりです。

// promise-then版
p.then((result) => {
  console.log(result);
});

// async-await版
const result = await p;
console.log(result);

インデントが深くならないところが素敵。

async な関数内でのみ利用可能です。 Chrome DevToolsのコンソールだと await 動くけど、あれは特別。外だとエラーに。

SyntaxError: await is only valid in async function

catch() の代わりは構文の方の try-catch です。

`fetch()` の例

例えば、指定のパスのHTMLを取得し解析、 <title> に設定されている文字列を得るやつ。

const fetchTitle = (path) => fetch(path)
  .then((res) => res.text()) // text()はPromiseを返す
  .then((html) => html.match(/<title>(.*)<\/title>/i)[1]);

これ↑を、こう↓書けます。

const fetchTitle = async (path) => {
  const res = await fetch(path);
  const html = await res.text();
  return html.match(/<title>(.*)<\/title>/i)[1];
};

でもって async が付いてる fetchTitle() は Promise オブジェクトを返すので、こう使います。（もちろんこいつらも await でも良い。）

// 現在ページのタイトルを取得
fetchTitle(location.href)
  .then((title) => console.log('Title:', title));

// トップページのタイトルを取得
fetchTitle('/')
  .then((title) => console.log('Title:', title));

使い方

話を戻して for-await-of は、非同期反復子 (AsyncIterator) が返す結果を await しながら反復します。

こんな非同期反復子を返す関数があったとします。

async function* foo () {
  yield 11;
  await sleep(1000);
  yield 22;
  await sleep(1000);
  yield 33;
}

繰り返さない例

まずはここから。

// 普通の反復子
const it = foo();
const result = it.next();
console.log(result);

// 非同期反復子
const ait = foo();
const result = await ait.next();
console.log(result);

普通の `for` で繰り返す例

next() 呼び出すところで await してますね。 for 文で同じようにして、値を非同期に得ながら反復することができます。

const ait = foo();
for (let cur = await ait.next(); !cur.done; cur = await ait.next()) {
  const { value } = cur;
  console.log('for', value);
}

`for-await-of` で書く例

長い for 文になってしまったけれど、大丈夫、僕らには for-await-of 構文があります。

for await (const value of foo()) {
  console.log(value);
}

はいできあがり。

ついでに、普通の `for` 文で普通に `await` する例

ここまでやってきた for-await-of の特徴は反復子が非同期、というところなので、何でもないところで非同期にやるなら普通に await するだけです。

for (const url of urls) {
  const res = await fetch(url);
  console.log(res);
}

可能なら `Promise.all()` を

というわけで色々書いてきたんだけど、非同期に繰り返すのは良くないです。

だってせっかく非同期に処理できるのだから、順番ではなく一度にまとめて実行して、その後に結果を順に処理していく方が高効率です。

例えば非同期処理がひとつ500msかかるとして、3つ順にやれば合計1500msの待機時間が必要になります。これらを Promise.all() で並列に実行してやれば、待ち時間は結局500msのままです。

繰り返し中の `await` を禁じるESLintの設定

ESLintにもそういう設定があります。

no-await-in-loop – Rules – ESLint – Pluggable JavaScript linter

Performing an operation on each element of an iterable is a common task. However, performing an await as part of each operation is an indication that the program is not taking full advantage of the parallelization benefits of async/await.

Usually, the code should be refactored to create all the promises at once, then get access to the results using Promise.all(). Otherwise, each successive operation will not start until the previous one has completed.

反復の各要素に対して操作を行うことは一般的な作業です。しかしながら、各段階の操作で await を実行すると、そのプログラムが async/await による並列化の恩恵を十分に享受できないことになります。

一般にこのようなコードは、一度に全てのプロミスを作成しそのうえで Promise.all() を用いて結果を得るようリファクターされるべきです。そうでないと連続的な処理 (successive operation) が前の処理が完了するまで始まりません。

`for-await-of` を禁じるESLintの設定

ただし前項のものは普通の for 内で await 書いたときに引っかける用で、 for-await-of は引っかからないです。

for-await-of を（ for-of は許容しつつ）弾く設定はこんな感じ↓です。

no-restricted-syntax – Rules – ESLint – Pluggable JavaScript linter

module.exports = {
  "rules": {
    'no-restricted-syntax': [
      'error',
      'ForOfStatement[await=true]',
    ],
  },
};

普通の `for` 文で普通に `await` しない例

上の方で書いた繰り返しの途中で await する方の例を、 Promise.all() を使って並列に実行して、その全体を await で待つようにした例です。

const responses = await Promise.all(
  urls.map((url) => {
    console.log(url);
    return fetch(url);
  })
);

for (const res of responses) {
  console.log(res);
}

複数の fetch() が同時に走るので、こっちの方が速いです。

例

えーと、非同期に繰り返す例かあ……。

同意を促すメッセージ

ごめん思いつかなかった。

デモ: https://jsfiddle.net/ginpei/095bmp2j/

// 抜粋

async function* waitForAgreeing (interval = 2000) {
  let index = 0;
  while (true) {
    if (elAgree.checked) {
      return;
    }

    await sleep(interval);
    yield messages[index];
    index = (index + 1) % messages.length;
  }
}

const main = async () => {
  for await (const message of waitForAgreeing()) {
    elMessage.textContent = message;
  }
  elMessage.textContent = 'さんきゅー';
};

2秒ごとに同意を促す文言が表示され続ける例。 — 同意するまでメッセージが更新され続ける。

その他

`for-of` 自体があまり良くない？

for-await-of を弾く設定を上の方で書いたけど、そもそも for-of を弾くべき？

AirbnbのESLintの設定をよく使ってるんだけど、そこでは for-of の利用自体が禁止されています。（別途 for-in も禁止。）

理由は設定に書いてある。

javascript/style.js at 685f37be39fd01bcfdd349de9acdcd5a50414520 · airbnb/javascript

iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations.

イテレーター、ジェネレーターは再生成ランタイム (regenerator-runtime) が必要で、それは本ガイドの許容範囲からするとあまりに重すぎます。またそれとは別に、ループの利用は回避し、配列の反復を利用してください。

arr.forEach() を使えってさ。 Object.keys() とかもだめなのかな。どれくらい遅いんだろ。

ちなみに for と比べて forEach() が遅すぎるってことはないです。

おまけ: `for-await-in`

for await (const key in obj) {
  console.log(key);
}

SyntaxError: Unexpected token in

おしまい

あんまり使いどころがなあ。 for でやれることだしせっかくだから for-of でもできるようにしておこう、とかそういう感じなのかなあ。

ああでも配列以外のジェネレーター自体の良い使い道がまだわかってないから、そこら辺わかったら非同期に繰り返したくなるかも。

参考

for-ofで配列も普通のオブジェクトも反復しよう。（配列とかおれおれAdvent Calendar2018 – 15日目）

投稿日時: 2018/12/15 00:36

カテゴリー: JavaScript

タグ: Advent Calendar 2018, for-of, 配列

LINDORのAdvent Calendar（本物）の15日目を開けたところ。 — 配列とかおれおれAdvent Calendar2018 – 15日目

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

for, while → for文を仕様からじっくり見てみる。あとwhileとか。（配列とかおれおれAdvent Calendar2018 – 13日目）
for-in → for-inの仕様も見てみたよ。使う機会なさそうだけど。（配列とかおれおれAdvent Calendar2018 – 14日目）
for-of
for-await-of → 別稿
forEach() → 別稿

for-in じゃない方です。こっち使おう。

`for-of` 文

for-in と違って値の方を持ってきてくれます。

const arr = [11, 22, 33];

for (const value of arr) {
  console.log(value);
}

// 11
// 22
// 33

`for` に置き換え

反復可能なオブジェクトを対象とする for-of を普通の for 文に置き換えることもできます。

const arr = [11, 22, 33];

const it = arr.values();
for (let cur = it.next(); !cur.done; cur = it.next()) {
  const { value } = cur;
  console.log('for', value);
}

仕様

for-in, for-of, for-await-of は全部まとめて定義されてる。

13.7.5 The for-in, for-of, and for-await-of Statements

ので、 for-in の方もみといてください。

for-inの仕様も見てみたよ。使う機会なさそうだけど。（配列とかおれおれAdvent Calendar2018 – 14日目）

for-in は列挙可能なプロパティ名を得ましたが、 for-of の方では反復子 (iterator) を用いた繰り返しを行います。

利用可能なオブジェクトと反復子 (iterator)

for-of は「反復可能」なオブジェクトでのみ利用可能です。

この「反復可能 iterable」であるとは、まあ本稿は for-of が主眼ですのでざっくり申し上げると、 [Symbol.iterator] メソッドがその反復子 iterator オブジェクトを生成するよう適切に用意されている状態を言います。

自作もできます。

const obj = {
  * [Symbol.iterator] () {
    yield 11;
    yield 22;
    yield 33;
  },
};

詳しくは別稿（予定）をご覧ください。

で、配列は反復可能なオブジェクトなので使えます。

console.log(Symbol.iterator in arr); // => true

他に Set 、 Map それから String オブジェクトも反復可能です。（文字列 "" 自体はだめ。オブジェクトでないのでメソッドもない。呼び出せるけど。）

未対応のオブジェクトを繰り返す

配列で使う分には簡単だったけど、普通のオブジェクトはそのままでは使えません。ひと手間必要。

const obj = {};
for (const value of obj) {
}
// TypeError: obj is not iterable

次の三通りのメソッドで、何の変哲もないただのオブジェクトから配列を生成します。前項の通り、配列なら反復可能。

Object.values()
Object.keys()
Object.entries()

反復可能でない通常のオブジェクトはこれら通して反復可能なオブジェクトを得、それを for-of へ与えることができる、という算段です。

以下、こういうオブジェクトがある前提でコード例を提示します。

const obj = {
  foo: 11,
  bar: 22,
  boo: 33,
};

プロパティ値を繰り返す

Object.values() – JavaScript | MDN

for (const value of Object.values(obj)) {
  console.log(value);
}

// 11
// 22
// 33

プロパティ名を繰り返す

Object.keys() – JavaScript | MDN

for (const key of Object.keys(obj)) {
  console.log(key);
}

// foo
// bar
// boo

名前と値を繰り返す

両方か！？　key と value の両方ほしいのか？　両方……イヤしんぼめ！！

はい、そんな欲張りさんのための機能もあります。ちょっとわかりづらいんだけど、戻り値としてその2つだけを格納した配列の配列を返します。

Object.entries() – JavaScript | MDN

for (const [key, value] of Object.entries(obj)) {
  console.log(key, ':', value);
}

// foo : 11
// bar : 22
// boo : 33

得られる順序

3つとも内部処理は同じこれ↓で、得られる順序は以下の通り。

整数インデックス昇順（を文字列にしたもの）
文字列キー追加順

const obj = {};

obj[2] = '#1';
obj.z = '#2';
obj[Symbol(1)] = '#3';
obj[10] = '#4';
obj.a = '#5';

console.log(obj);
// => { '2': '#1', '10': '#4', z: '#2', a: '#5', [Symbol(1)]: '#3' }

for (const [key, value] of Object.entries(obj)) {
  console.log(key, ':', value);
}

// 2 : #1
// 10 : #4
// z : #2
// a : #5

仕様はこちら。

ちなみに OrdinaryOwnPropertyKeys() ではキーが Symbol のものも追加順に取得しているのだけれど、その後 EnumerableOwnPropertyNames() の処理で文字列でないものは捨てられます。

先の例↑で console.log() の方では Symbol がキーになってるものも取れているのは、その処理が OrdinaryOwnPropertyKeys() を使ってるからなんでしょう。知らんけど、コンソールの仕様は。

任意の順序に

したい場合、別途 sort() してやります。

文字列順とか localeCompare() が便利っぽい。（ちなみに local ではなく locale です。）

String.prototype.localeCompare() – JavaScript | MDN

// プロパティ名昇順
const it = Object.entries(obj)
  .sort(([key1], [key2]) => key1.localeCompare(key2));
for (const [key, value] of it) {
  console.log(key, ':', value);
}

// bar : 22
// boo : 33
// foo : 11

sort() に与えた比較関数は実は省略可能なんですが、罠があったりするので、常に省略しないのが良いやり方かと思っております。

おしまい

強力。

参考

for…of – JavaScript | MDN
Generator – JavaScript | MDN
Object.keys() – JavaScript | MDN
Object.values() – JavaScript | MDN
Object.entries() – JavaScript | MDN
Array.prototype.sort() – JavaScript | MDN
String.prototype.localeCompare() – JavaScript | MDN … 今回初めて知った。べんり
ECMAScript® 2018 Language Specification
- 13.7.5 The for-in, for-of, and for-await-of Statements
- 13.7.5.12 Runtime Semantics: ForIn/OfHeadEvaluation ( TDZnames, expr, iterationKind ) … for-of は iterationKind が iterate
- 7.3.21 EnumerableOwnPropertyNames ( O, kind )
- 9.1.11 [[OwnPropertyKeys]] ( )
- 9.1.11.1 OrdinaryOwnPropertyKeys ( O )

for-inの仕様も見てみたよ。使う機会なさそうだけど。（配列とかおれおれAdvent Calendar2018 – 14日目）

投稿日時: 2018/12/14 00:34

カテゴリー: JavaScript

タグ: Advent Calendar 2018, for-in, 配列

LINDORのAdvent Calendar（本物）の14日目を開けたところ。 — 配列とかおれおれAdvent Calendar2018 – 14日目

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

for, while → for文を仕様からじっくり見てみる。あとwhileとか。（配列とかおれおれAdvent Calendar2018 – 13日目）
for-in
for-of → 別稿
for-await-of → 別稿
forEach() → 別稿

for-in は現代ではたぶんもう使う機会ないんじゃないかなと思う。

`for-in` 文

列挙可能 (enumerable) なオブジェクトプロパティを繰り返します。

const arr = [11, 22, 33];
for (const index in arr) {
  const value = arr[index];
  console.log(index, value);
}
// 0 11
// 1 22
// 2 33

配列じゃなくても使えます、というか配列じゃないので使う場面の方が多いかなと思います。

const obj = { a: 11, b: 22, c: 33 };
for (const prop in obj) {
  const value = obj[prop];
  console.log(prop, value);
}
// a 11
// b 22
// c 33

`index` は文字列

プロパティ名が文字列なのはわかりやすいと思うんだけど、配列の場合でも数値 0, 1, 2, … ではなく、文字列で '0', '1', '2', … が得られます。

仕様的にも、配列の各要素は文字列をキーに格納されているし、添え字アクセスは文字列へ変換してから行われます。

っていう豆知識です。

仕様

for-in, for-of, for-await-of は全部まとめて定義されてる。

13.7.5 The for-in, for-of, and for-await-of Statements

`in` 左側

for と同様、以下の三種類。

ただの式（宣言なしで i = 0 とか）
var 宣言
let, const 宣言

いったん for の方を見てください。

for文を仕様からじっくり見てみる。あとwhileとか。（配列とかおれおれAdvent Calendar2018 – 13日目）

for-in の場合は for と違って繰り返し全体のレキシカル環境は生成されないっぽい。

繰り返し毎回のレキシカル環境は for と同様、毎回引き継ぎながら用意される様子。変数の値を書き換えることなく毎回引き継いで新たに作り直すため、 const が使えます。

ただよくわからないところがあって。

13.7.5.12 Runtime Semantics: ForIn/OfHeadEvaluation ( TDZnames, expr, iterationKind )

繰り返しの前に一度 in の左側の変数を登録するレキシカル環境を作ってるんだけど、登録終わったら元のレキシカル環境へ戻してます。なんだろこれ。事前に検証してる感じ？

というか TDZ て何の頭文字？　”Tsunami Disaster Zone”？　仕様書中ここにしか出てこないんだけど。

これ↓？　（ var と違って巻き上げないよって話。）　やっぱり「本番はまだだけど事前にちょっとアレしとこうかなー」みたいな感じ？

Why is there a “temporal dead zone” in ES6?

`in` 右側

繰り返し前に評価して、 for-in の場合、繰り返し用にプロパティ名を列挙します。

対象オブジェクトからプロトタイプチェインを順々に辿ってゆき、全てのプロパティを列挙する。ただし、同じ名前のものは一度しか呼ばれない。という感じ。

もしJSで実装するならこういう↓処理らしいよ。

13.7.5.15 EnumerateObjectProperties ( O )

function* EnumerateObjectProperties(obj) {
  const visited = new Set();
  for (const key of Reflect.ownKeys(obj)) {
    if (typeof key === "symbol") continue;
    const desc = Reflect.getOwnPropertyDescriptor(obj, key);
    if (desc) {
      visited.add(key);
      if (desc.enumerable) yield key;
    }
  }
  const proto = Reflect.getPrototypeOf(obj);
  if (proto === null) return;
  for (const protoKey of EnumerateObjectProperties(proto)) {
    if (!visited.has(protoKey)) yield protoKey;
  }
}

列挙可能性

この for-in で出てくるかどうかを「列挙可能性 (enumerability)」と呼んでいるようです。

Object.defineProperty() で作るときに enumerable: false にすると、プロパティはあるけど列挙されなくなります。

const obj = { a: 11, b: 22 };
Object.defineProperty(obj, 'c', {
  enumerable: false, // ←これこれ
  value: 33,
});

console.log(obj.c); // => 33

for (const prop in obj) {
  const value = obj[prop];
  console.log(prop, value);
}
// a 11
// b 22

Object.getOwnPropertyDescriptor() を用いると、どういう設定になっているのか調べられます。

…

const descriptorA = Object.getOwnPropertyDescriptor(obj, 'a');
console.log(descriptorA);
// { value: 11,
//   writable: true,
//   enumerable: true,
//   configurable: true }

const descriptorC = Object.getOwnPropertyDescriptor(obj, 'c');
console.log(descriptorC);
// { value: 33,
//   writable: false,
//   enumerable: false,
//   configurable: false }

ちなみにgetter/setterもこいつらで扱えます。

Own property問題

クラスが導入される以前、ES 5時代のJavaScriptでは関数を使ってコンストラクターを用意していました。その場合 for-in でちょっと困ったことがあります。

prototype に設定したものまで出てきちゃうんです。

function MyClass (options) {
  this.name = options.name;
}
MyClass.prototype.sayHello = function () {
  console.log('Hi my name is ' + this.name + '!');
};

const obj = new MyClass({ name: 'Alice' });
obj.sayHello(); // Hi my name is Alice!

obj.boo = 33;
for (const prop in obj) {
  const value = obj[prop];
  console.log(prop, ':', value);
}
// name : Alice
// boo : 33
// sayHello : function () {
//   console.log('Hi my name is ' + this.name + '!');
// }

prototype へ指定している sayHello が出てますね。これは嬉しくない。

そのインスタンスが自分で持っているプロパティなのか、それとも prototype （やその他）から来ているのかを判断する必要があります。

解決

hasOwnProperty() を使います。

Object.prototype.hasOwnProperty() | MDN

これはオブジェクト自身が指定のプロパティを持っていれば true を返すものです。 obj.hasOwnProperty('sayHello') は false になります。

// ...

for (const prop in obj) {
  // prototypeに設定されたもの等は無視
  if (!obj.hasOwnProperty(prop)) {
    continue;
  }

  const value = obj[prop];
  console.log(prop, ':', value);
}

今なら `class` で大丈夫

です。うん、こっちにしよ。

class MyClass {
  constructor (options) {
    this.name = options.name;
  }

  sayHello () {
    console.log(`Hi my name is ${this.name}!`);
  }
}

const obj = new MyClass({ name: 'Alice' });
obj.boo = 123;

for (const prop in obj) {
  const value = obj[prop];
  console.log(prop, ':', value);
}
// name : Alice
// boo : 33

const desc = Object.getOwnPropertyDescriptor(MyClass.prototype, 'sayHello');
console.log(desc.enumerable); // => false

繰り返し中の操作

削除された場合

呼ばれず無視されます。

13.7.5.15 EnumerateObjectProperties ( O )

A property that is deleted before it is processed by the iterator’s next method is ignored.

反復子 (iterator) の next メソッドにより処理される前に削除されたプロパティは無視される。

追加された場合

えーと「保証されない not guaranteed」てのは、未定義ってことで良いかな。

13.7.5.15 EnumerateObjectProperties ( O )

If new properties are added to the target object during enumeration, the newly added properties are not guaranteed to be processed in the active enumeration.

新しいプロパティが列挙 (enumeration) の途中で対象オブジェクトへ追加された場合、新しく追加されたプロパティが実行中の (active) 列挙内で処理されることは保証されない。

このコード↓で試したところ、繰り返し中には呼ばれませんでした。（手元のChrome, Firefox, Edgeで確認。）　もちろん繰り返しの後で確認したら追加されている。

https://jsfiddle.net/9w47uqok/

その他

`in` の右側はゆるい

null とかでもエラーにならない。

for (const i in null) ;

for-of ではエラーです。

順不同

for-in で得られるプロパティ名の順序は未定義 (not specified) です。

13.7.5.15 EnumerateObjectProperties ( O )

The mechanics and order of enumerating the properties is not specified

Set を使う

includes() で確認する

some() でやる

Map を使う

おしまい

参考

まず for の例

forEach() にした例

仕様

第2引数

再利用

例

普通に繰り返す

配列内の他の要素を参照する

同じ処理を繰り返す

似た計算をする

forEach() でできないこと

先頭以外から、末尾以外までの繰り返し

飛ばして回す

逆順に繰り返し

配列以外の forEach()

普通のオブジェクト

Map, Set

DOM系の配列風オブジェクト

jQuery

for と速度面の比較

あ、でも

おしまい

関連

参考

仕様

async 内でのみ利用可能

非同期に反復可能なオブジェクト

非同期のおさらい

async とは

await とは

fetch() の例

使い方

繰り返さない例

普通の for で繰り返す例

for-await-of で書く例

ついでに、普通の for 文で普通に await する例

可能なら Promise.all() を

繰り返し中の await を禁じるESLintの設定

for-await-of を禁じるESLintの設定

普通の for 文で普通に await しない例

例

同意を促すメッセージ

その他

for-of 自体があまり良くない？

おまけ: for-await-in

おしまい

関連

参考

for-of 文

for に置き換え

仕様

利用可能なオブジェクトと反復子 (iterator)

未対応のオブジェクトを繰り返す

プロパティ値を繰り返す

プロパティ名を繰り返す

名前と値を繰り返す

得られる順序

任意の順序に

おしまい

関連

参考

for-in 文

index は文字列

仕様

in 左側

in 右側

列挙可能性

Own property問題

解決

今なら class で大丈夫

繰り返し中の操作

削除された場合

追加された場合

その他

`Set` を使う

`includes()` で確認する

`some()` でやる

`Map` を使う

まず `for` の例

`forEach()` にした例

`forEach()` でできないこと

配列以外の `forEach()`

`Map`, `Set`

`for` と速度面の比較

`async` 内でのみ利用可能

`async` とは

`await` とは

`fetch()` の例

普通の `for` で繰り返す例

`for-await-of` で書く例

ついでに、普通の `for` 文で普通に `await` する例

可能なら `Promise.all()` を

繰り返し中の `await` を禁じるESLintの設定

`for-await-of` を禁じるESLintの設定

普通の `for` 文で普通に `await` しない例

`for-of` 自体があまり良くない？

おまけ: `for-await-in`

`for-of` 文

`for` に置き換え

`for-in` 文

`index` は文字列

`in` 左側

`in` 右側

今なら `class` で大丈夫

`in` の右側はゆるい