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

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

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

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

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

 

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] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

それでは実際に書いてみましょう。まずは、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・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。