配列の型をコンストラクタ関数で一括変更
先日JavaScriptのコードを見ていたら以下のようなコードがあった。
const arr = ['1', '2', '3']
const a = Number(arr[0])
const b = Number(arr[1])
const c = Number(arr[2])
console.log(a)
console.log(b)
console.log(c)
わりとよく見かけるコードですが、Numberを何回も使用しなくても配列にmapを使用してNumberを入れて返せばすべての型を数値にできます。
const arr = ['1', '2', '3'].map(Number)
const a = arr[0]
const b = arr[1]
const c = arr[2]
console.log(a)
console.log(b)
console.log(c)
逆にすべて文字列にしたい場合はStringを使用します。
また、const [a, b, c] = arr を使用すれば1行で代入できます。
const arr = [1, 2, 3].map(String)
const [a, b, c] = arr
console.log(a)
console.log(b)
console.log(c)
Booleanにしたい場合は以下の通りです。
プログラム言語によっては0がfalse、1がtrueなのですが、それをサーバーサイドからフロントエンド側に返しているケースもあるので、その場合はBooleanで変換すると便利です。
const arr = [1, 0, 1].map(Boolean)
const [a, b, c] = arr
console.log(a) // true
console.log(b) // false
console.log(c) // true
配列オブジェクトの場合の型変換
配列オブジェクトの場合は各キーの値の型をNumberなどのコンストラクタ関数で変換してreturnで返せばすべてを同じ方に揃えることができます。
const arr = [
{
id: 1,
user: 'foo',
flag: 1,
},
{
id: '2',
user: 'bar',
flag: 0,
},
{
id: 3,
user: 'baz',
flag: 1,
},
]
const result = arr.map(obj => ({
...obj,
id: Number(obj.id),
flag: Boolean(obj.flag),
}))
console.log(result)
// 0: {id: 1, user: 'foo', flag: true}
// 1: {id: 2, user: 'bar', flag: false}
// 2: {id: 3, user: 'baz', flag: true}
ちなみにオブジェクト内のプロパティの内容を保持して反映させるためにスプレッド構文を使用しています。
このように書くと新しいキーおよび値を新しいオブジェクトに反映できます。
知らない方もいると思うので補足として書いておきます。
const obj = {
foo: 1,
bar: 2,
}
console.log({...obj, bar: 777, baz: 123})
// {foo: 1, bar: 777, baz: 123}
配列内の値を特定の型に揃えたいケースはよくあるので、前述のやり方を覚えておけば型の変更が簡単にできるようになるので覚えておくと良いです。
