ES2019で加わる便利なメソッドを試してみる。

ES2019とは？

ES2019はJavaScriptの規格であるECMAScriptの2019年版のリリースのことです。
TC39と呼ばれる技術委員会があり、そこがJavaScriptの標準規格になるECMAScriptを企画し
必要な技術的な要件を整えリリースを行なっています。

現在メジャーなのはES6とよばれる2015年にリリースされたECMAScriptのバージョンであり
babelやwebpackなどの標準指定バージョンとなっているので知らなかった方はwebpack.configなんかをみてみるといいかもしれません。

今回紹介したメソッドたちはChromeやFireFoxの最新バージョンにすでに入っており、developper consoleからためすことも可能です。

蛇足的な説明はここまでにし、早速ES2019の新メソッドについてみていきましょう。

今回新たに入る便利メソッド

今回のリリースでは
Objectの操作に関わるObject.entries(), Object.fromEntries()
文字列の操作にかかわるtrimStart(), trimEnd()
配列の操作にかかわるflatMap(), flat(), flatten()
が追加されました。

Object.entires()

引数にobjectを渡すと引数のobjectの構成をArrayに入れて返してくれます。
実際にどうなるのかみてみましょう。

const obj = {1:"hoge", 2:"huga", 3:"hogehoge" }

console.log(Object.entries(obj))
// => [[1, "hoge"], [2, "huga"], [3, "hogehoge"]]

このようにオブジェクトのエンティティの数だけインデックスをつくり、エンティティのkey,Valueがつまった配列を入れ込みます。

Object.fromEntries()

Object.fromEntries()は Object.entires()の逆をしてくれるメソッドです。
つまり、[key, value]の配列を Object.fromEntires()の引数に渡すと配列の中身を持つObjectを生成してくれます。

const arr = [[1, "hello"], [2, "world"], [3, "ES2019"]]

console.log(Object.fromEntries(arr))
// =>{1:"hello", 2:"world", 3:"ES2019"}

Object.fromEntries()に渡す引数は2要素の配列に類似するオブジェクトであるかぎり
Objectへの変換をしてくれます。
どういうことかというのはsampleをみてください。

cosnt mp = new Map()
mp.set("hoge", 1)
mp.set("huga", 2)
mp.set("hogehoge", 3)

const obj = Object.fromEntries(mp)

console.log(obj)
// => {"hoge":1, "huga":2, "hogehoge": 3}

サンプルをみてわかるようにMapインスタンスを初期化し、値をセットして
Object.fromEntries()にくわせると先ほどのArrayを食わせたときとおなじくobjectをbuildして返却してくれるのです。

const obj = {a: 4, b: 9, c: 16}

// objのエンティティをArrayへ変換
const arr = Object.entries(obj)

// 変換したarrをmapし平方根をもとめる
const map = arr.map(([key, val]) => [key, Math.sqrt(val)])

// mapにつめられた平方根をobjectに変換する
const obj2 = Object.fromEntries(map)

console.log(obj2)
// => {a: 2, b: 3, c: 4}

こんな風なものもかけます。
これを使うとAPIから受け取った値を変換してオブジェクトに詰めて受け渡すのが簡単にできますね！

trimStart(), trimEnd()

これは実装的にはtrimLeft(),trimRight()とおなじです。
現在ステージ4という最終段階の提案段階にあるらしい。
これは文字列を操作するメソッドです。

const str = "   string   "
console.log(str.trimLeft())
// => "string   "

console.log(str.trimRight())
// => "   string"

Webとの互換性のために、trimLeft()とtrimRight()はtrimStart()とtrimEnd()のエイリアスとして残るそうです。

flat()

flat()は配列を操作するためのメソッドです。
例えば、配列の中に配列がはいってくるような変数があったときに配列を均してシャローコピーをつくります。

サンプルを見てみましょう。

const arr = ["a", "b", ["c", "d"]]
console.log(arr.flat()) 
// => ["a", "b", "c", "d"]

flat()をつかわないとこんな感じ

const arr = ['a', 'b', ['c', 'd']]
const flattened = [].concat.apply([], arr)

console.log(flattened)    
// => ["a", "b", "c", "d"]

ちなみにflat()はから配列に空要素があるとき空要素を破棄してきます。

const arr = ["", "", "a", "", "b", "c", "d", "", ""]
console.log(arr.flat())
// => ["a", "b", "c", "d"]

flatMap()

flatMap()はflat()とmap()を組み合わせたものです。
イメージ的にはmap()でできたシャローコピーをflat()するイメージです。

動きはサンプルを見ながらおいかけてください。

const arr = [4.25, 19.99, 25.5]

console.log(arr.flatMap(value => [Math.round(value)]))
// => [4, 20, 26]

複雑な配列から値を操作したいときに非常に便利かつ可読性をたかめてくれます。

まとめ&個人的感想

Object.entries()はめっちゃ便利な機能だなとおもった。
個人的には関数型の言語を触る機会が多いのでflat(), flatMap(), flatten()が実装されたのは
とてもうれしい。以前まではflat()を実装した外部ライブラリをプロジェクトにimportしてつかう感じだったので
公式にサポートされてライブラリのバージョン管理から開放されたのがいい。

関数型言語への慣れがないとflatMap()とかはちょっと使いづらいかもしれないが、
要は配列の皮むきをしてくれる便利関数なので積極的に使ってみてほしい。

ES2020ではstringのマッチングメソッドも予定されています。
たのしみですね！