JavaScriptの配列、オブジェクト関連のまとめ記事です。初心者向けサンプルです。個人的な覚書もかねています。
基礎はUdemyで何本か適当に買いました。
目次
- 1 JavaScriptのArray(配列)/Object/ソートのランキング機能まとめ
- 1.1 object → array
- 1.2 object → arrayの中にobject
- 1.3 object → arrayの中にobject その2
- 1.4 object → object
- 1.5 配列のソート(ランキング化)
- 1.6 objのソート(別バージョン)
- 1.7 配列から配列のコピー
- 1.8 objectを検索して指定の文字列をすべて抽出する
- 1.9 keyはそのまま、すべてのobjectのvalueを初期値に戻す(forEachやmap)
- 1.10 objectと配列の結合
- 1.11 同じkeyがあった場合のobjectの結合
- 1.12 配列の階層を減らして別の配列に入れる
- 1.13 Math.max.applyではなく、reduceで最大値を取得
JavaScriptのArray(配列)/Object/ソートのランキング機能まとめ
object → array
一時的に純粋な配列にしたい場合、便利です。
const array = Object.keys(obj).map(function(key) {
return obj[key]
})
object → arrayの中にobject
このパターンはわりとよくあります。
const array = Object.entries(
this.obj
).map(([key, value]) => ({ key, value }))
[
{
"key": "key1",
"value": "value1"
},
{
"key": "key2",
"value": "value2"
}
]
object → arrayの中にobject その2
このパターンもわりとよくあります。この方がよく使いますかね。
const array = Object.entries(
this.obj
).map(([key, value]) => ({ [key]: value }))
[
{
"key1": "value1"
},
{
"key2": "value2"
}
]
object → object
オブジェクトにしたい場合は次のとおりです。keyがidで同じものになります。
const array = Object.keys(obj).map(function(key) {
return { id: obj[key] }
})
配列のソート(ランキング化)
ランキングはスコアだけではないでしょうから、考え方としてはオブジェクトのソートでしょう。
配列をソートしようしたら次のエラーがでました。
sort is not a function
配列に統一感がなかったため、配列を統一してランキング化しました。
Obj {"type1":11,"type2":9,"type3":10}
scoreのobjでランキング化したい場合。
const array = Object.keys(obj).map((key) => {
return { score: obj[key] }
})
array.sort((a, b) => {
// return a.score - b.score // 昇順
return b.score - a.score // 降順
})
console.log('ソート済', JSON.stringify(array))
純粋な配列でランキング化したい場合。
const array = Object.keys(obj).map((key) => {
return obj[key]
})
array.sort((a, b) => {
return b - a // 降順
})
console.log('ソート済', JSON.stringify(array))
objのソート(別バージョン)
このobjをそのまま使いたい場合は次のようになります。
Obj {"type1":11,"type2":9,"type3":10}
const entries = Object.entries(obj) const sorted = entries.sort((a, b) => b[1] - a[1]) // 降順 sortedObj = Object.fromEntries(sorted) keys = Object.keys(sortedObj) values = Object.values(sortedObj)
参考。
配列から配列のコピー
const array = ["A", "B", "C"]; const copiedArray = array.slice();
sliceは引数があると開始地点と終了地点を切り出す関数ですが、引数がないとarrayのコピーを返します。非破壊系メソッドなので、元の配列に影響ありません。
破壊と非破壊のチートシートです。
objectを検索して指定の文字列をすべて抽出する
const newObj = obj.filter((v) => v.value === 'apple')
console.log('newObj', JSON.stringify(newObj))
上記はオブジェクトの中でappleだけ抽出する方法です。
appleが複数ある場合、findだと1つだけしか抽出できないためfilterを使います。
idを検索する場合は、v.id = 1とかにすればOKです。
keyはそのまま、すべてのobjectのvalueを初期値に戻す(forEachやmap)
考え方としてはfor文でまわして置換するですね。すべてのセレクトボックスをチェックボックスで初期値に戻すときに使いました。
this.arr.forEach((obj) => {
obj.value = 'none'
})
this.arr.map((obj) => {
return (obj.value = 'none')
})
どちらでもできますが、違いとしては
mapは新しい配列。
forEachは新しい配列ではありませんが、速度が早いです。
forEachは戻り値がないため、もうちょっと混み入ってくれるとpushして別配列を生成して使う場合が多いですね。
objectと配列の結合
基本。objectの結合は2つの方法があります。
this.obj3 = Object.assign(this.obj1, this.obj2)
ディープコピーではありません。重複データはobj2に上書きされます。
this.obj3 = { ...this.obj1, ...this.obj2 }
arrayの結合は2つの方法があります。
Array.prototype.push.apply(obj1, obj2)
result = obj1.concat(obj2)
同じkeyがあった場合のobjectの結合
this.table.forEach((obj) => {
const existring = setList.find((set) => obj.key === set.key)
if (existring) {
// 重複データがあった場合、existringに上書きされる
this.result.push(Object.assign(obj, existring))
// このような書き方もできる
// this.result.push({ ...obj, ...existring })
} else {
this.result.push(obj)
}
})
ベースとなるtableはvueのローカルのdata。
setListはfirebaseから取得したデータ。
うっかりどちらかベースなのか把握せず逆に書かないように注意。Object.assignも入れ替えるとしっかりと上書きされない。
firebaseには必要なデータしか保存してもらず割り当てるような流れ。
forEachは戻り値がないため、resultのデータを使う形。
配列の階層を減らして別の配列に入れる
this.types = this.getData.types
Math.max.applyではなく、reduceで最大値を取得
配列操作の場合はMath.max.applyを使うと融通が聞きにくいです。単純に最大値を取得するならいいのですが、最大値の名前を取得する場合など困ります。
const max = Math.max.apply(
null,
obj.map(function(o) {
return o.value
})
)
数字の最大値ではなく、最大値のキーワードが取得できます。
const maxKey = object.reduce((a, b) => a.value > b.value ? a : b ).key
詳しくはこちらの記事が参考になります。
reduceは万能型であり、他にもいろいろなことができますよ。
コメント