JavaScriptの配列、オブジェクト関連のまとめ記事です。初心者向けサンプルですが、個人的な覚書もかねて加筆しています。
基礎はUdemyで何本か適当に買いました。
目次
- 1 【Vue】JavaScriptのObjectとArray操作まとめ
- 1.1 objectのkey取得
- 1.2 objectからarray
- 1.3 arrayからobjectはreduceが便利
- 1.4 reduceの引数と初歩の使い方
- 1.5 objectからarrayの中にobject
- 1.6 objectからarrayの中にobject その2
- 1.7 objectからobject
- 1.8 配列のソート(ランキング化)
- 1.9 objのソート(別バージョン)
- 1.10 objectをn回文繰り返す
- 1.11 配列から配列のコピー
- 1.12 objectを検索して指定の文字列をすべて抽出する
- 1.13 keyはそのまま、すべてのobjectのvalueを初期値に戻す(forEachやmap)
- 1.14 objectの結合
- 1.15 arrayの結合(arrayにarrayを追加)
- 1.16 同じkeyがあった場合のobjectの結合
- 1.17 配列の階層を減らして別の配列に入れる
- 1.18 Math.max.applyではなく、reduceで最大値を取得
- 1.19 オブジェクトの2番目にアクセス
- 1.20 配列の空判定
- 1.21 objectの空判定
- 1.22 vueのobjectのadd,clear、配列の追加削除
- 1.23 vueでconsole.logのobjectを表示はJSON.stringify(obj)
- 1.24 文字列から数字だけを抽出
- 1.25 小数点の切り捨て、切り上げ、四捨五入
- 1.26 配列内オブジェクトを別の配列でfilterする
- 2 配列関連のエラー
【Vue】JavaScriptのObjectとArray操作まとめ
objectのkey取得
Object.keys(obj) Object.keys(obj)[0] Object.keys(obj)[1]
objectからarray
一時的に純粋な配列にしたい場合、便利です。
var obj = {type1: 10, type2: 9};
const array = Object.keys(obj).map(function(key) {
return obj[key]
})
console.log(array) // --> [10, 9]
値の方を抽出できます。arrayからobjectはreduceが便利とあわせて使うと配列にしたりオブジェクトにしたりができます。
arrayからobjectはreduceが便利
Object.assignなどが使われますが、少し複雑なことをしたい場合はreduceが便利です。
const typesArray = [9, 8, 5];
const obj = typesArray.reduce((result, array, index) => {
result['type' + (index + 1)] = array
return result;
}, {});
console.log(obj); // { 'type1': 9, 'type2': 8, 'type3': 5 }
reduceの引数と初歩の使い方
reduceの引数は次のとおりです。
array.reduce(function(accumulator(累積), value(要素), index(省略可), array(省略可)) {
console.log( 'reduce', accumulator, value, index, array)
}, 5)
// accは初期値の5が入り、何度もコールされて累積されていく、実際は空オブジェクトを使うことが多い。
// valueはarrayの値が順番に入る
// indexは0から
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))
JavaScriptは配列のソートする際、同値の場合はブラウザにより挙動が違うようなので、その対策も考慮する必要があります。return 0;する(読んだだけで詳しくは未検証)
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)
参考。
nodeのバージョンに制限がある場合、Object.fromEntriesは使えません。他の命令で代替が必要になったケースがありました。
const entries = Object.entries(obj)
const sorted = entries.sort((a, b) => b[1] - a[1]) // 降順
const sortedObj = Object.assign(
...sorted.map(([key, value]) => ({ [key]: value }))
)objectをn回文繰り返す
ソートしたオブジェクトからトップ３だけ抽出する場合などに便利です。
Array.from({ length: 3 }, (_, i) => {
console.log('3回数ぶん、繰り返す', _, i)
const best3 = Object.keys(obj)[i]
console.log('best3', best3)
})
length: 3で3回分繰り返します。
_はすべてundefined。
iは0, 1, 2です。
{ length: 3 }だけの指定や_を省くと、すべてundefinedになります。
Rangeを使うやり方など、いろいろなやり方があります。
配列から配列のコピー
const array = ["A", "B", "C"]; const copiedArray = array.slice();
sliceは引数があると開始地点と終了地点を切り出す関数ですが、引数がないとarrayのコピーを返します。非破壊系メソッドなので、元の配列に影響ありません。
objでは使えません。
破壊と非破壊のチートシートです。
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の結合(arrayにarrayを追加)
arrayの結合は2つの方法があります。
新しい配列を作る場合は次のとおりです。
obj3 = obj1.concat(obj2)
Array.prototype.concat()。concatは浅いコピーのようです。
Array.prototype.push.apply(obj1, obj2)
Array.prototype.push.applyの方が高速のようです。obj1に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
詳しくはこちらの記事が参考になります。
最大値の2番目、3番目を取り出すならソートするのが早そうです。
reduceは万能型であり、他にもいろいろなことができますよ。
オブジェクトの2番目にアクセス
Objectのキーの並びは固定ではないためArrayを使う必要があります。
配列の空判定
空じゃない。すなわち0じゃない。
if ( array.length > 0)
省略すると、
if ( array.length )
空の場合は!をつければいいだけです。
if ( !array.length )
この方法がシンプルです。
objectの空判定
配列と考え方は一緒。
Object.keys(obj).length;ただしオブジェクトが{}じゃないと判定できません。チェックボックスをオフにした次のようなものはダメ。
obj: {
name: "",
age: "",
hobby: "",
}その場合は事前に空プロパティのkeyを削除するを取り除く必要があります。
for (const key in this.obj) {
if (this.obj[key] === '') {
delete this.obj[key]
}
}vueのobjectのadd,clear、配列の追加削除
一瞬うまくいかなかったことがあり、調べたらこちらにまとまっていました。2記事あるようです。
【Vue】オブジェクト追加・削除には注意が必要
【Vue】配列の追加・削除には注意が必要
vueでconsole.logのobjectを表示はJSON.stringify(obj)
vueというかjavascriptの知識ですね。
console.log((obj))
でもいいけど、(…)をクリックしないとChromeで値が見れません。クリックが手間。
下記にすると値が綺麗に表示されるため、視認性がよいです。
console.log(JSON.stringify(obj))
文字列から数字だけを抽出
正規表現を使う方法がよさそうです。
const data = 'type11' const result = data.replace(/[^0-9]/g, '') console.log(result) // 11
小数点の切り捨て、切り上げ、四捨五入
Math.floor // 小数点切捨て Math.ceil // 小数点切上げ Math.round // 小数点四捨五入 toFixed(0) // 桁数指定で小数点四捨五入
配列内オブジェクトを別の配列でfilterする
objects: [
{ id: 'apple', text: 'りんご' },
{ id: 'pear', text: '梨' },
{ id: 'banana', text: 'バナナ' }
]
array: [apple, pear]サーバー側に保存したデータが配列のみ。オブジェクトをフイルタリングして初期値をセットする場合なんかに使います。
const resultObj = objects.filter((obj) => {
return array.includes(obj.id)
})
console.log('resultObj', resultObj)
>> objects: [
{ id: 'apple', text: 'りんご' },
{ id: 'pear', text: '梨' }
]includesないに複数指定できませんが、これならOKですね。他にsomeやeveryを使ったやり方もあるかもしれません。
ちなみに、オブジェクトとオブジェクトを比較する場合、次の記事が参考になるかもしれません。
配列関連のエラー
[Vue warn]: You may have an infinite update loop in a component render function.
Vueで破壊的メソッドを使用すると、でるエラー
[Vue warn]: You may have an infinite update loop in a component render function.
たとえば、sortの場合、次のような対応が必要。
slice().sort() [...numbers].sort() // スプレッド構文を使う手もある
ご参考になれば幸いです。
コメント