はじめに
ES6の復習中に配列内の連想配列がうまく取得できず
苦戦したので己の戒めとして残します。
状況
こんな配列があります。
const items = [
{id: 1, name: "靴", price: 3000},
{id: 2, name: "服", price: 1000},
{id: 3, name: "手袋", price: 100},
{id: 4, name: "マスク", price: 50},
{id: 5, name: "帽子", price: 800},
];
この時、keyのnameが「靴」である連想配列を探す
getShoesという関数を作る時は
const getShoes = items.find((item) => {
return item.name === "靴"
});
console.log(getShoes);
// 実行結果 {id: 1, name: "靴", price: 3000}
このような関数を定義します。
次に配列と、その中のkeyを指定して、一致する値があるか
どうかを探し、一致する連想配列を表示する
getAnyOne関数を作ります。
const getAnyOne = (array, element) => {
return array.find((arr) => {
const key = Object.keys(element)[0]
return arr.key === element.key
})
}
こんな感じで書きました。
さっそく帽子の連想配列を取得できるか試すために
console.log(getAnyOne(items, {name: "帽子"}));
と書きました。するとconsoleは
{id: 1, name: "靴", price: 3000}
何故か靴の連想配列を取得しています。どして？
問題の原因
今回getAnyOne関数のreturnする部分でキーを指定する際、
連想配列(arr).keyで指定しています。
しかしキーは今回keyという変数で定義しています。
変数で定義されたキーの値を取得する時は
" . "ではなく" [ ] "を使う必要があるそうです。
よって今回の場合
const getAnyOne = (array, element) => {
return array.find((arr) => {
const key = Object.keys(element)[0]
return arr[key] === element[key]
})
}
console.log(getAnyOne(items, {name: "帽子"}));
とすれば正しくnameが帽子の連想配列を取得することができます。
おわりに
JS、というか何かしらのアプリを作ろうと思うと
ほぼ必ずといっていいほど配列を使用します。
しかしながらまだまだ配列のデータをうまく取得できないので、今後Reactもそうですがその前に前提のJSの知識をもっと深めないとなと反省しました。
（個人的にReact使ってても止まるのはJSの知識分野であることの方が多い）
ここまで読んでくださりありがとうございました！
↧