JavaScriptのArray(配列)/Object/ソートのランキング機能まとめ

おすすめのオンラインプログラミング学習

JavaScriptの配列、オブジェクト関連のまとめ記事です。初心者向けサンプルです。個人的な覚書もかねています。

基礎はUdemyで何本か適当に買いました。

動画編集/プログラミング/資産運用などUdemyのおすすめコース
プログラミング、動画編集、資産運用などudemyのすべて実経験でおすすめコースをまとめていきます。Udemyは日本に来る前から愛用しています。半分ぐらい英語の講座を買っています。 udemyはセールがあるため、とりあえず会員登録してお...

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)

参考。

javascript — プロパティ値によるJavaScriptオブジェクトのソート
次のようなJavaScriptオブジェクトがあるとします。var list = { "you": 100, "me": 75, "foo": 116, "bar": 15 }; 値に基づいてプロパティを並べ替える方法はありますか?だから私はに終わるlist = { "bar": 15...

配列から配列のコピー

const array = ["A", "B", "C"];
const copiedArray = array.slice();

sliceは引数があると開始地点と終了地点を切り出す関数ですが、引数がないとarrayのコピーを返します。非破壊系メソッドなので、元の配列に影響ありません。

破壊と非破壊のチートシートです。

[JavaScript] Arrayメソッド破壊・非破壊チートシート - Qiita
JSのArrayメソッドで破壊非破壊がまとまっている表が欲しいな〜〜 と思ったので作りました。 チートシート メソッド名 破壊 非破壊 用途         splice() ○      配列から配列の一部を取り...

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

詳しくはこちらの記事が参考になります。

JavaScriptで配列の最大値・最小値求めるならreduceで - Qiita
JavaScriptでMath.max.applyやMath.maxに対してスプレッド構文が使えなかった時にreduceを使って最大値を求めた時のメモです。なんでreduceいいかも!と思ったのか、なんでapplyやスプレッド構文が使...
【JavaScript】配列の最大値(最小値)を取得するには reduce を使うのがいいらしい - Qiita
要素が数値のみからなる配列の最大値(もしくは最小値)を取得する方法について調べた結果、いろいろな方法が見つかったので、記録しておきます。 要約 配列の最大値を取得するなら、reduce を使うのが better Math.m...

reduceは万能型であり、他にもいろいろなことができますよ。

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました