プログラミングのスピードが早い人の特徴として、データ処理をすぐにコーディングできるというポイントがあります。
データベースから取得したデータを、順番に並べ直したり、
特定のデータの中から、条件に一致するデータのみを抽出したり、
データを仕様に沿って、整形し直したり、
こうした処理は、アルゴリズムが重要とも考えガチですが、Javascriptにおいては、便利な配列関数やオブジェクト関数などが多数用意されているので、
そうした既存関数を理解しておくという事も重要なスキルになります。
Javascript学習 : 配列操作とオブジェクト操作編
- 配列関数について
- オブジェクト関数について
配列関数について
配列で内部に連想配列をもつリスト型のデータ構造は、実用的です。
データベース(SQL)などから取得するデータ形式もこれと同様の形式であるため、この配列データを扱えるようになると、データをコントロールする事自体が苦になりません。
元のデータ
const arr = [
{id: 1 , value: 'apple'},
{id: 2 , value: 'banana'},
{id: 3 , value: 'cherry'},
{id: 4 , value: 'grape'},
{id: 5 , value: 'lemon'},
{id: 6 , value: 'melon'},
{id: 7 , value: 'orange'},
]
指定した値を取得 : .find()
idが5の値を取得する方法。
const res = arr.find(e => e.id === 5)
console.log(res)
> {id: 5 , value: 'lemon'}
arrは、Array型なので、そこに使える.find()という命令は、配列の中から条件に合うものを１つ（複数ある場合は一番先頭に近いモノ）をピックアップしてくれます。
丸括弧の中は、条件処理の関数を書くのですが、上記のサンプルだと分かりにくいので、分かりやすく書くと以下の様になります。
arr.find(function(element){
if(element.id === 5){
return true
}
else{
return false
}
})
これを簡単に書くと上のようなアロー関数の書き方になります。
elementも、単語として長いので、eと略しています。
そして、この.find()は、もう少しだけ機能を持っていて、コールバック関数内部で、次のような値も取得できます。
関数の中は、booleanを返すだけで、trueが返った場合に、その対象のデータを返すという仕様になっています。
arr.find(function(element , index , array){
console.log(element , index , array)
if(element.id === 5){
return true
}
else{
return false
}
})
// 実行結果
{id: 1, value: 'apple'} 0 (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
{id: 2, value: 'banana'} 1 (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
{id: 3, value: 'cherry'} 2 (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
{id: 4, value: 'grape'} 3 (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
{id: 5, value: 'lemon'} 4 (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
indexというのは、0からスタートする順番の値が取得できます。
arrayは、検索元になる配列全体がはいります 。
これを利用して、内部でもっと複雑な判定を行い事もできます。
関数内で値がヒットした5の値でloopが終了しているのが、特徴的ですね。
複数のデータを検索 : .filter()
取得したい結果が複数ある場合は、次のように処理します。
idが2以上4以下を検索
const res = arr.filter(e => e.id >= 2 && e.id <= 4)
console.log(res)
// 実行結果
{id: 2, value: 'banana'}
{id: 3, value: 'cherry'}
{id: 4, value: 'grape'}
上記のコールバックを分かりやすく書いてみると
const res2 = arr.filter(function (element){
if(element.id >= 2 && element.id <= 4){
return true
}
else{
return false
}
})
配列を作り直す : .map()
.map()機能は、使い慣れると、自由に配列を組み直すことができます。
上記の配列データをidだけの配列を取得する場合は、
arr.map(e => e.id)
> [1, 2, 3, 4, 5, 6, 7]
valueの値だけを配列にすると
arr.map(e => e.value)
> ['apple', 'banana', 'cherry', 'grape', 'lemon', 'melon', 'orange']
こんな事ができます。
次に、それぞれのデータに、値を追加したい場合は、
arr.map(e => e.sample='abc')
console.log(arr)
// 実行結果
[
{id: 1 , value: 'apple' , sample : 'abc'},
{id: 2 , value: 'banana' , sample : 'abc'},
{id: 3 , value: 'cherry' , sample : 'abc'},
{id: 4 , value: 'grape' , sample : 'abc'},
{id: 5 , value: 'lemon' , sample : 'abc'},
{id: 6 , value: 'melon' , sample : 'abc'},
{id: 7 , value: 'orange' , sample : 'abc'},
]
mapは、破壊的関数です、コールバック関数内での配列に変更をすると、元のデータを書き換えます。
でもこれを利用すると、さらなる自由な形に変更することができます。
それぞれのデータの中が複雑になるほど、扱いやすい形に整形することで、間違いの無いプログラミングを構築することができます。
オブジェクト関数について
次に、オブジェクトデータとしての連想配列データの扱いは、配列と少し変わります。
元のデータ
const obj = {
apple : {
id : 1,
type : 'fruit'
},
dog : {
id : 2,
type : 'animal'
},
tomato : {
id : 3,
type : 'vegetable'
}
}
keyの一覧を配列で取得 : Object.keys()
Object.keys(obj)
> ['apple', 'dog', 'tomato']
keyをnameに格納して、配列に変換する。
const obj = {
apple : {
id : 1,
type : 'fruit'
},
dog : {
id : 2,
type : 'animal'
},
tomato : {
id : 3,
type : 'vegetable'
}
}
const res = Object.entries(obj).map(e => {e[1].name = e[0];return e[1]})
console.log(res)
// 実行結果
[
{
id : 1,
type : 'fruit',
name : 'apple'
},
{
id : 2,
type : 'animal',
name : 'dog'
},
{
id : 3,
type : 'vegetable',
name : 'tomato'
}
]
URLクエリを連想配列に変換（相互変換）
// url : https://example.com/?id=1&name=abc
Object.fromEntries(new URLSearchParams(location.search).entries()).test
{
id : 1,
name : 'abc'
}
