トップJavaScript > 配列および連想配列

配列および連想配列

はじめに

厳密には JavaScript には連想配列はない。 オブジェクトが連想配列に似た働きをする。

配列の基本

配列の宣言

//@配列コンストラクタの例
var array1 = new Array('リンゴ', 'バナナ', 'イチゴ');

//A配列リテラルの例
var array2 = ['リンゴ', 'バナナ', 'イチゴ'];

要素 N個分の配列を用意する

例えば、5つ分の配列要素を用意するには次のようにする。

var array = new Array(5);

var array = [5]; とした場合は、配列要素数は 1 であり、 数値 5 が格納される。

配列の要素数

配列の要素数は lengthプロパティである。

配列オブジェクト.length

要素の追加

要素の追加は push を使う。

 array1.push('ミカン');

要素の削除

var array1 = new Array('リンゴ', 'バナナ', 'イチゴ');
delete array1[1];

array1 から 'バナナ' が削除される。

すべての要素を削除するときは次のようにする。

 array1 = [];

要素の参照

 var array = ['リンゴ', 'バナナ', 'イチゴ'];
 array[1] = 'ミカン';
 console.log( array[1] );  // ミカン
 console.log( array );     // ["リンゴ", "ミカン", "イチゴ"]

要素の検索

var array1 = new Array('リンゴ', 'バナナ', 'イチゴ');
var result = array1.indexOf('リンゴ');

連想配列

配列と連想配列の違いを下に示す[4]。

// @配列のサンプル
var array1 = [ 'apple', 'banana', 'melon', 'grape' ];
 
// A連想配列のサンプル
var array2 = { apple : 10, banana : 20, melon : 30, grape : 40 };

連想配列は以下の構文となる。値は文字列、数値、関数、オブジェクトなど様々なものとなる。

var array = { キー名称 : 値 , キー名称 : 値 , キー名称 : 値 , キー名称 : 値 , ・・・ }

連想配列への要素の追加方法は二つある[4]。

// @チェーンで追加する方法
user.country = '日本';

// A添字で追加する方法
user['country'] = 'アメリカ';

チェーンでの追加ではキー名称に制約があるが、 添え字での追加ではキー名称はどんな文字列でもいいのであろう。

連想配列の要素数

連想配列の実態はオブジェクトであるから、連想配列の要素数はオブジェクトのキー数であり、 Object.keys(array).length となる。

4.オブジェクト配列から条件に合うものを探す

const users = [
  { id: '101', name: 'Alice' },
  { id: '102', name: 'Bob' },
  { id: '103', name: 'Charlie' },
];
 
const id = '102';
const targetUser = users.find((v) => v.id === id);
console.log(targetUser);
// => { id: '102', name: 'Bob' }

リファレンス

[1] 【JavaScript入門】配列の使い方と操作まとめ(初期化・追加・結合・検索・削除)
[2] JavaScriptの配列(array)に要素を追加(add)する方法について現役エンジニアが解説【初心者向け】
[3] 配列から条件に合うものはfind()で見つけよう
[4] 【JavaScript入門】連想配列(Dictionary)の取得/追加/ソートまとめ