勉強記録(2024/09/13)分割代入とブラケット記法

使用教材

https://www.sbcr.jp/product/4815615758/

職業訓練校で使用していたもの。
引き続きこちら。

勉強内容

ブラケット記法での記述ミス

続き。

const lists = [
    {
        name: 'イチゴ',
        img: 'strawberry',
        price: 450,
    },
    {
        name: 'ライム',
        img: 'lime',
        price: 400,
    },
    {
        name: 'マンゴー',
        img: 'mango',
        price: 450,
    },
    {
        name: 'レモン',
        img: 'lemon',
        price: 400,
    },
    {
        name: 'イチジク',
        img: 'fig',
        price: 550,
    },
    {
        name: 'リンゴ',
        img: 'apple',
        price: 450,
    },
];

こんな感じで複数のオブジェクトをひとまとめにして、一旦画像だけを呼び出し。

エラーが出た。「定義できない」らしい

コードはこれ。

for(let i = 0; i < lists.length; i++){
    const content = `<div><img src="images/${lists[i][img]}.jpg" alt=""></div>`;
    menu.insertAdjacentHTML('afterbegin', content);
}

一つずつ検証。
まず教材通り(↓)にやってみる。と、ちゃんと出た。

for(let i = 0; i < lists.length; i++){
    const content = `<div><img src="images/${lists[i].img}.jpg" alt=""></div>`;
    menu.insertAdjacentHTML('afterbegin', content);
}

つまりブラケット記法での指定方法に問題がある。
よく見ると[img]が '' でくくられてない。

for(let i = 0; i < lists.length; i++){
    const content = `<div><img src="images/${lists[i]['img']}.jpg" alt=""></div>`;
    menu.insertAdjacentHTML('afterbegin', content);
}

↑のように直したらきちんと出た。単純ミス!
関数にするか文字列にするかで、処理が大きく変わってしまうんだなあ。
その後、商品名や金額も問題なく出た。

分割代入

さらに省略。
ただ消しただけ(''を付けたまま)だと文字扱いされるため、当然ダメ。

for(let i = 0; i < lists.length; i++){
    const {name, img, price} = lists[i];
    const content = `<div><img src="images/${'img'}.jpg" alt=""><h2>${'name'}</h2><p>${'price'}円</p></div>`;
    menu.insertAdjacentHTML('afterbegin', content);
}
画像も文字も出てない

教材通り(↓)にしてみるとちゃんと出た。

for(let i = 0; i < lists.length; i++){
    const {name, img, price} = lists[i];
    const content = `<div><img src="images/${img}.jpg" alt=""><h2>${name}</h2><p>${price}円</p></div>`;
    menu.insertAdjacentHTML('afterbegin', content);
}

調べた感じ、分割代入にはドット記法もブラケット記法もない?みたい。

分割代入で定数にキーを格納して呼び出せるか

ブラケット記法だとドット記法と違って、定数にキーを格納して呼び出せるけど、分割代入ではできるのか検証。

for(let i = 0; i < lists.length; i++){
    const {name, img, price} = lists[i];
    const key = name; //追加
    const content = `<div><img src="images/${img}.jpg" alt=""><h2>${key}<!--変更--></h2><p>${price}円</p></div>`;
    menu.insertAdjacentHTML('afterbegin', content);
}
出た!

出た!
ということは分割代入できるのであれば、それを使ったほうが綺麗かつ楽に書けるってことだ。どんどん活用していこう。

というわけで今日の分終わり。

この記事が気に入ったらサポートをしてみませんか?