【JavaScript】 連想配列を操作する方法。追加、削除、変更、並び替えを徹底解説

プログラミング

配列の基本的な構造と種類について

まずは配列について理解していきましょう。

配列は大きく分けて2つになります。

  • 配列
  • 連想配列

に分けることができるでしょう。

配列

  • 同じ型のデータを一列に並べたもの
  • 先頭が「0」であること(0,1,2,3,4…と増えていく)
var array = ["a","b", "c", "d"]

連想配列

  • 1つの変数で複数の「キー」と「値」または「関数(メソッド)」を持てます。
  • キーは任意の文字列を使えます。
  • 構文は、波括弧( { } )でくくります。項目が複数の場合はカンマで区切ります。
var associative_array = {
  a: '1',
  b: '2',
  c: '3',
  d: '4'
}

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

連想配列から要素を削除する場合はdelete文を使います。

delete associative_array[キー];

といった形で記述をします。

次に、連想配列の特定の値を削除する方法を見ていきましょう。

var associative_array = { a: '400', b: '300', c: '600' }

// 連想配列からキーがbの要素を削除
delete associative_array['b']

console.log(associative_array)

// ↓↓↓出力結果↓↓↓
// { a: '400', c: '600' }

上記の例は、associative_arrayの連想配列からbというキーの値を削除するといった処理になります。

連想配列の値を取得する方法

連想配列はオブジェクトになっているので、値を取得する場合はキーを指定する必要があります。

キーを指定する方法はいくつかあり、ドットつなぎでたどっていく方法配列名.キーまたは、配列のキーを配列名[’キー’]といった形で記述します。

var associative_array = { a: '400', b: '300', c: '600' }

// keyがaの値を取得する方法

console.log(associative_array['a']);
// or
console.log(associative_array.a);

// ↓↓↓ 出力結果 ↓↓↓
// 400
オブジェクトとは?

オブジェクト
とは、物、物体、目標物、対象、目的語、客体、などの意味を持つ英単語。
コンピュータ上で操作や処理の対象となる何らかの実体
のことをオブジェクトという。例えば、操作画面上でアイコン
などの形で表示されるデータ集合や操作要素、図形描画ソフトで画面上に配置した個々の図形、3次元コンピュータグラフィックス3DCG)で空間に配置した立体などが該当する。

https://e-words.jp/w/オブジェクト.html

連想配列のキーを取得する方法

連想配列のキーだけを取得する方法もあります。

その場合はObject.keys(配列名)と記述することでキーを取得することができます。

var associative_array = { a: '400', b: '300', c: '600' }

console.log(Object.keys(associative_array))

// ↓↓↓ 出力結果 ↓↓↓
// [ 'a', 'b', 'c' ]

連想配列に値を追加する方法

連想配列に値を追加する場合は、キーと値のセットで追加する必要があります。

追加方法は値を取得するときと同じように、配列名.キーまたは、配列名[’キー’]のような記述をします。

var associative_array = { a: 400, b: 300, c: 600 }

associative_array.d = 900
// or
associative_array['d'] = 900

console.log(associative_array)

// ↓↓↓ 出力結果 ↓↓↓
// { a: 400, b: 300, c: 600, d: 900 }

SAMURAI TERAKOYA

SAMURAI TERAKOYAの特徴とメリット

  1. 40種類以上の教材で、プログラミングスキル習得に必要な基礎から実戦までのすべてを学習できる
  2. つまづいたらいつでも相談できる「Q&A掲示板」があり現役エンジニアが学習のサポートをしてくれる
  3. SAMURAI ENGINEER Plus+にいる人達と一緒に学習をすることができる ←継続するにはかなりいい環境ですね!
  4. 単体レッスンも実施してくれるので、言語化できない悩みも相談することができる
  5. 月額のサブスクになっているので、利用しやすい!

注意点とデメリット

  • プログラミングスクールによくある就職できなかったらといったサポートが無い
  • 講義形式ではないので、自発的に行動しないといけない

SAMURAI TERAKOYAがおすすめの人

  • 月々定額で挫折せずプログラミングを学びたい人
  • エラーなどの悩みを相談できる環境が欲しい人
  • オンラインで学べるので地方やスクールに通う時間がない人

\ 今なら学び応援キャンペーンも実施中 /

プログラミング
スポンサーリンク
スポンサーリンク
e-logsをフォローする
スポンサーリンク
eLogs

コメント

タイトルとURLをコピーしました