string|string[] な値をいい感じに処理する

公開:2020/09/22
更新:2020/10/02
1 min読了の目安(約700字TECH技術記事

next.jsなどをいじってると、よくstring|string[]みたいな値を取り扱うことがあるときの処理を忘れがちなのでメモ。

こういうときはflat()してmap()するといい感じに処理出来る(似ているがflatMap()ではない)

function appendC(strOrArr : string | string[]) : string[] {
  return [strOrArr].flat().map( item => item + "c" )
}

appendC("a")  // ["ac"]
appendC(["aa", "bb"])  // ["aac", "bbc"]

例えば配列を更に返したいようなケースならflatMapに変えられる

function splitItems(strOrArr : string | string[]): string[]{
  return [strOrArr].flat().flatMap( item => item.split(",") )
}

splitItems("a,b")  // ["a","b"]
splitItems(["aa,bb", "bb,cc"])  // ["aa","bb", "bb", "cc]

ちなみに[1,[1,2,[1,2,3],2],[3,2]]のような深いArrayならばflat(Infinity)を使うことも出来る

[deepArray].flat(Infinity).map(...