普段はフロントエンドエンジニアとしてNuxt.js/vue.js/TypeScriptを
中心に開発業務を行なっています。
配列やオブジェクトの操作におけるTipsの知識が少し溜まってきたので、アウトプットしたいと思います。
オブジェクトから配列に変換
オブジェクトから配列に変換する場合はObject.keysメソッドやObject.entireメソッドを使用します。
Objects.keys()とmapメソッドの組み合わせ
オブジェクトに含まれる全てのキーを配列として返す、Object.keysメソッドとmapメソッドを組み合わせることで、配列を生成できます。
const schools = {
'NewYork': 10,
'WashTown': 5,
'Windo': 8
}
const schoolsToArray = Object.keys(schools).map((key) => ({
name:key,
wins: schools[key]
}))
console.log(schoolsToArray)
// [Object { name: "NewYork", wins: 10 }, Object { name: "WashTown", wins: 5 }, Object { name: "Windo", wins: 8 }]Object.entire()とmapメソッド、filterメソッドの組み合わせ
Object.entireメソッドは引数にオブジェクトを指定すると、[key, value]からなる配列に変換してくれます。基本的にはfor...inの場合と同じ挙動を取ります。このObject.entireにmapやfilterメソッドを併用して、オブジェクトを意図する配列に組み替えることができます。
const priceType = Object.entries(price.rate).map(
([key, value]) => {
return {
rate: value,
amount: null,
}
}
)
const priceAmount = Object.entries(price)
.filter(([key, _]) => key !== 'レート')
.map(([key, value]) => {
return {
rate: null,
amount: value
}
})
const prices = [...priceRate, ...priceAmount]配列をオブジェクトに変換
Array.reduceメソッドを使用して配列をオブジェクトに変換することが可能です。
reduceの処理を行う際に空のオブジェクトを設定し、初期化。コールバック関数により、このオブジェクトのプロパティ値をブラケット表記[]を使って代入することで配列をオブジェクト化しています。
const colors = [
{
id: 'x',
title: 'red',
rating: 3,
},
{
id: 'y',
title: 'blue',
rating: 4,
},
{
id: 'z',
title: 'green',
rating: 6,
},
{
id: 'h',
title: 'yellow',
rating: 7,
},
]
const hashColor = colors.reduce((hash, {id, title, rating}) => {
hash[id] = {title, rating}
return hash
}, {})
console.log(hashColor)
// Object { x: Object { title: "red", rating: 3 }, y: Object { title: "blue", rating: 4 }, z: Object { title: "green", rating: 6 }, h: Object { title: "yellow", rating: 7 } }配列からオブジェクトへの変換はObject.assignメソッドでも行うことができます。第一引数に空のオブジェクトを渡し、Indexがkeyと配列の値がvalueとなるオブジェクトを生成します。
let array = ['red', 'green', 'yellow'];
let obj = Object.assign({}, array);
console.log(obj); // Object { 0: "red", 1: "green", 2: "yellow" }配列から値の重複を取り除く
配列から値の重複を取り除く方法です。
let array = ['red', 'green', 'yellow', 'blue', 'red'];
let arrayOne = array.reduce((one, color) =>
one.indexOf(color) !== -1 ? one : [...one, color],[]
)
console.log(arrayOne); // ["red", "green", "yellow", "blue"]配列から単一の値に変換する
Array.reduceメソッドで一番分かりやすい使用方法は、配列から単一の値に変換することです。公式ドキュメントでは配列から合計値を算出してます。
const array1 = [1, 2, 3, 4];
const initialValue = 0;
const sumWithInitial = array1.reduce(
(accumulator, currentValue) => accumulator + currentValue,
initialValue
);
console.log(sumWithInitial);// expected output: 10それ以外にもArray.reduceメソッドを利用して、配列から一番大きな値を取得することが可能です。配列の各要素毎に比較を行い、数の大きい方を返す処理を繰り返すことで最大値を得ることができます。
const array = [1, 2, 4, 5,10 ,25 ,40 ,61 , 30 , 56];
const maxAge = array.reduce(
(max, age) => (age > max ? age : max),
0
);
console.log(maxAge); // expected output: 61
上記2つの処理はArray.reduceRightメソッドでも可能です。Array.reduceとの違いは、配列の値を先頭からではなく末尾から処理を行います。
■ 文献
