JavaScriptの連想配列で要素を削除する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptの連想配列で要素を削除する方法について現役エンジニアが解説しています。連想配列はインデックスの代わりに文字列と要素を対応させることができます。JavaScriptの連想配列の要素を削除するには、deleteを使用します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptの連想配列で要素を削除する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptの連想配列で要素を削除する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

JavaScriptの連想配列とは

JavaScriptには、通常の配列の他に連想配列というものがあります。通常の配列では、各要素は0から始まる数字(index)と対応して保存されています。

例えば、以下のfruitsの配列であれば
0 には”apple”
1 には”orange”
2 には”banana”

といったように対応しています。

 

const fruits = ["apple","orange","banana"]

一方、連想配列はインデックスの代わりに文字列と要素を対応させることができます。

以下の連想配列の場合は
red => “stop”
green => “go ahead”
yellow => “attention”

という形で対応しています。

 

const signals = {red: "stop", green: "go ahead", yellow: "attention"}

red,gree,yellowの方をkey,”stop”,”go ahead”,”attention”の方をvalueといったりします。

要素の書き換える場合や追加する場合、出力する場合は以下のように書きます。

 

//書き換え
signals[green]="move forward"
signals.yellow="caution" 
//追加
signals[pink]="no meaning"
signals.blue="go ahead"
//全ての要素を出力
for (let key in signals){
 console.log(`${key} means ${signals[key]}`)
}

 

連想配列で要素を削除する方法

連想配列を削除する場合には、deleteを使用します。使い方は以下の通りです。

delete 連想配列.key
// もしくは
delete 連想配列[key]

keyには、先ほどの例でいうred,green,yellowなどが入ります。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際に書いてみましょう。まずは、signal配列を用意して中身を確認してみます。

const signals = {red: "stop", green: "go ahead", yellow: "attention"}
for (let key in signals){
 console.log(`${key} means ${signals[key]}`)
}

実行結果は以下の通りです。

red means stop
green means go ahead
yellow means attention

それではdeleteを使って、yellowを削除します。

delete signals.yellow
// または
delete signals[yellow]

deleteは返り値にtrueかfalseを持ちます。削除に成功すればtrueが返ります。最後にsignalsを出力して結果を確認します。

for (let key in signals){ 
 console.log(`${key} means ${signals[key]}`)
}

実行結果は以下の通りです。

red means stop
green means go ahead

このように要素が削除されているのがわかるかと思います。以上で解説を終わります。

筆者プロフィール

メンター金成さん

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。