icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

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

 

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

なお本記事は、TechAcademyのオンラインブートキャンプ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] コーディングで副業する方法とは

実際に書いてみよう

それでは実際に書いてみましょう。まずは、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講座を開催しています。

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