Chrome 117 で Iterator helpers が使えるようになる
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ map, filter, drop, take などのメソッドがイテレーターに追加される
◆ 配列のメソッドと違って先に全部の要素に適用されないのでムダが少ない
(追記)
◆ リリース後すぐにウェブ互換問題で unship されましたが、 Chrome 122 から再度使えるようになるようです
◆ 配列のメソッドと違って先に全部の要素に適用されないのでムダが少ない
(追記)
◆ リリース後すぐにウェブ互換問題で unship されましたが、 Chrome 122 から再度使えるようになるようです
Chrome 117 (現 dev もうすぐ beta) で Iterator Helpers が使えるようになります
https://chromestatus.com/feature/5102502917177344
より具体的には iterator にメソッドが追加されて map や filter 等のメソッドが使えるようになります
配列のメソッドとは異なり 先に全要素に map や filter を適用しないので 早期にループを抜ける場合に効率が良くなります
map や filter の関数は最初の 1 つ目にしか実行されていません
以前こういうのを作りましたが 標準機能でできるようになったということですね
map や filter みたいな配列にもあったメソッド以外では drop と take メソッドがあります
他言語でよく見るのと同じで drop は指定数を捨てて take は指定数だけを取得します
色々組み合わせて
1 以上の整数から 5 の倍数だけ残して 2 つ (5 と 10) を捨てて 2 つ (15 と 20) を取得するという感じで書けます
toArray を使えば配列に変換できます
昔ながらのスプレッド記法で
でもいいですが メソッドチェーンが長くなると見づらくなります
末尾に toArray() をつけるほうが書きやすく見やすいと思いので 地味に嬉しい機能です
プロトタイプチェーンにも変更が入っています
Iterator 関数ができて その prototype のオブジェクトに変更されています
これまでも共通のオブジェクトではありましたが 独自のオブジェクトという感じで Iterator 関数の prototype という扱いではなかったです
constructor がないのでプロトタイプを辿って Object.prototype.constructor へのアクセスになって Object 関数が参照されていました
ここまで配列を使っていましたが イテレーター全般に使えるのでもちろんジェネレーターから作るイテレーターにも使えます
https://chromestatus.com/feature/5102502917177344
より具体的には iterator にメソッドが追加されて map や filter 等のメソッドが使えるようになります
const it = [1, 2, 3, 4, 5].values().map(x => x + 10).filter(x => x % 2)
for (const v of it) {
console.log(v)
}
11
13
15
配列のメソッドとは異なり 先に全要素に map や filter を適用しないので 早期にループを抜ける場合に効率が良くなります
const it = [1, 2, 3, 4, 5].values().map(x => {
console.log("MAP", x)
return x + 10
}).filter(x => {
console.log("FILTER", x)
return x % 2
})
for (const v of it) {
console.log(v)
break
}
MAP 1
FILTER 11
11
map や filter の関数は最初の 1 つ目にしか実行されていません
以前こういうのを作りましたが 標準機能でできるようになったということですね
map や filter みたいな配列にもあったメソッド以外では drop と take メソッドがあります
他言語でよく見るのと同じで drop は指定数を捨てて take は指定数だけを取得します
const it = [1, 2, 3, 4, 5].values().drop(3)
for (const v of it) {
console.log(v)
}
4
5
const it = [1, 2, 3, 4, 5].values().take(2)
for (const v of it) {
console.log(v)
}
1
2
色々組み合わせて
const arr = Array(1000).keys()
.drop(1)
.filter(x => x % 5 === 0)
.drop(2)
.take(2)
.toArray()
console.log(arr)
// [15, 20]
1 以上の整数から 5 の倍数だけ残して 2 つ (5 と 10) を捨てて 2 つ (15 と 20) を取得するという感じで書けます
toArray を使えば配列に変換できます
昔ながらのスプレッド記法で
const arr = [...Array(5).keys()]
console.log(arr)
// [0, 1, 2, 3, 4]
でもいいですが メソッドチェーンが長くなると見づらくなります
末尾に toArray() をつけるほうが書きやすく見やすいと思いので 地味に嬉しい機能です
プロトタイプチェーンにも変更が入っています
/// Iterator Helper 未対応バージョン
[].keys().__proto__.__proto__.constructor
// ƒ Object() { [native code] }
/// Iterator Helper 対応バージョン
[].keys().__proto__.__proto__.constructor
// ƒ Iterator() { [native code] }
Iterator 関数ができて その prototype のオブジェクトに変更されています
これまでも共通のオブジェクトではありましたが 独自のオブジェクトという感じで Iterator 関数の prototype という扱いではなかったです
constructor がないのでプロトタイプを辿って Object.prototype.constructor へのアクセスになって Object 関数が参照されていました
ここまで配列を使っていましたが イテレーター全般に使えるのでもちろんジェネレーターから作るイテレーターにも使えます
const gen = function* () {
let i = 0
while (true) {
yield i++
}
}
// 2 乗して 1 の位が 1 の値を 5 つ取得
const arr = gen().map(x => x * x).filter(x => x % 10 === 1).take(5).toArray()
console.log(arr)
// [1, 81, 121, 361, 441]