Javascriptでの配列の作成方法

2013/11/06 2018/10/03

いつもPHPを触っており、たまにJavascriptを使うと配列の作り方がぐっちゃぐちゃになってきたので整理。
とりあえずメモ程度に。

Javascriptで配列

配列その1

配列オブジェクトを作成し、後に値をセットする。
あらかじめ配列の要素数を指定する方法。

// 書式：
配列名 = new Array(要素数);

// 例：
operation_system = new Array(3)
operation_system[0] = "Windows";
operation_system[1] = "MacOS";
operation_system[2] = "Linux";

// アクセス方法：
console.log(operation_system[0]);	// 実行結果：Windows

// 書式：

配列名 = new Array(要素数);

// 例：

operation_system = new Array(3)

operation_system[0] = "Windows";

operation_system[1] = "MacOS";

operation_system[2] = "Linux";

// アクセス方法：

console.log(operation_system[0]); // 実行結果：Windows

配列その2

配列オブジェクトを作成する際に値をセット。
要素数の指定を省略した場合は、自動的に要素の数に合わせて配列の大きさが変化する。

// 書式：
配列名 = new Array("値1","値2","値3",…,"値n");

// 例：
operation_system = new Array("Windows","MacOS","Linux");

// アクセス方法：
console.log(operation_system[1]);	// 実行結果：MacOS

// 書式：

配列名 = new Array("値1","値2","値3",…,"値n");

// 例：

operation_system = new Array("Windows","MacOS","Linux");

// アクセス方法：

console.log(operation_system[1]); // 実行結果：MacOS

配列その3

Arrayオブジェクトの生成を省略する方法。
"[]"を使う場合は、配列を直接作成できる。

// 書式：
配列名 = ["値1","値2","値3",…,"値n"];

// 例：
operation_system = ["Windows","MacOS","Linux"];

// アクセス方法：
console.log(operation_system[2]);	// 実行結果：Linux

// 書式：

配列名 = ["値1","値2","値3",…,"値n"];

// 例：

operation_system = ["Windows","MacOS","Linux"];

// アクセス方法：

console.log(operation_system[2]); // 実行結果：Linux

JavaScript逆引きレシピ第2版

created by Rinker

連想配列

連想配列その1

配列オブジェクトを宣言、生成し、後に値を作成。

// 書式：
配列名 = new Array();
配列名["キー"] = "値";

// 例：
person = new Array();
person["name"] = "山田太郎";
person["birthday"] = "1985/11/2";
person["gendr"] = "male";

// アクセス方法：
console.log(person["name"]);	// 実行結果：山田太郎

// 書式：

配列名 = new Array();

配列名["キー"] = "値";

// 例：

person = new Array();

person["name"] = "山田太郎";

person["birthday"] = "1985/11/2";

person["gendr"] = "male";

// アクセス方法：

console.log(person["name"]); // 実行結果：山田太郎

連想配列その2

配列オブジェクトを作成する際に値をセット。
個人的に、改行した方が見やすくて好き。

// 書式：
配列名 = {
	"キー1":"値1",
	"キー2":"値2",
	"キー3":"値3"
}

// 例：
person = {
	"name":"佐藤恵子",
	"birthday":"1995/10/2",
	"gendr":"female"
}

// アクセス方法：
console.log(person["birthday"]);	// 実行結果：1995/10/2

// 書式：

配列名 = {

"キー1":"値1",

"キー2":"値2",

"キー3":"値3"

}

// 例：

person = {

"name":"佐藤恵子",

"birthday":"1995/10/2",

"gendr":"female"

}

// アクセス方法：

console.log(person["birthday"]); // 実行結果：1995/10/2

連想配列その3

// 書式：
配列名 = new Object();
配列名.キー1 = "値1";
配列名.キー2 = "値2";

// 例：
person = new Object();
person.name = "山田太郎";
person.birthday = "1985/11/2";
person.gender = "male";

// アクセス方法：
console.log(person.name);	// 実行結果：山田太郎

// 書式：

配列名 = new Object();

配列名.キー1 = "値1";

配列名.キー2 = "値2";

// 例：

person = new Object();

person.name = "山田太郎";

person.birthday = "1985/11/2";

person.gender = "male";

// アクセス方法：

console.log(person.name); // 実行結果：山田太郎

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

created by Rinker

多次元配列

二次元配列

// 書式：
var aryA = ["値A1", "値A2", "値A3"];
var aryB = ["値B1", "値B2", "値B3"];
var aryC = ["値C1", "値C2", "値C3"];

var data = [aryA, aryB, aryC];

// 以下でも同じ
二次元配列 = [
	["値A1", "値A2", "値A3"],
	["値B1", "値B2", "値B3"],
	["値C1", "値C2", "値C3"]
];


// 例：
var data = [
	[58, 45, 32],
	[98, 75, 12],
	[68, 15, 92]
];

// アクセス：
console.log(data[1][2]);	// 実行結果：12

// 書式：

var aryA = ["値A1", "値A2", "値A3"];

var aryB = ["値B1", "値B2", "値B3"];

var aryC = ["値C1", "値C2", "値C3"];

var data = [aryA, aryB, aryC];

// 以下でも同じ

二次元配列 = [

["値A1", "値A2", "値A3"],

["値B1", "値B2", "値B3"],

["値C1", "値C2", "値C3"]

];

// 例：

var data = [

[58, 45, 32],

[98, 75, 12],

[68, 15, 92]

];

// アクセス：

console.log(data[1][2]); // 実行結果：12

二次元配列（連想配列）

// 書式：
二次元配列 = {
	"a" : ["値A1", "値A2", "値A3"],
	"b" : ["値B1", "値B2", "値B3"],
	"c" : ["値C1", "値C2", "値C3"]
}

// 例：
data = {
	"a" : [58, 45, 32],
	"b" : [98, 75, 12],
	"c" : [68, 15, 92]
}

// アクセス：
console.log(data["a"][1]);		// 実行結果：45

// 書式：

二次元配列 = {

"a" : ["値A1", "値A2", "値A3"],

"b" : ["値B1", "値B2", "値B3"],

"c" : ["値C1", "値C2", "値C3"]

}

// 例：

data = {

"a" : [58, 45, 32],

"b" : [98, 75, 12],

"c" : [68, 15, 92]

}

// アクセス：

console.log(data["a"][1]); // 実行結果：45

"[]" と "{}" の使い方を理解（区別）できれば、混乱は少なそうな気がします。
ただ、慣れてないとやっぱり混乱するｗ

-Javascript,jQuery
-javascript, js, 多次元配列, 連想配列, 配列

: Twitter風にページ上部にメッセージを通知するスクリプトを2種、jQueryで組んでみた

ツイッター風の通知バーを作りたくなり、jQueryで組んでみましたので、公開。コード自体はほんの少しなんですが、なかなかうまく行かず結構時間が掛かってしまった…。

: 【JS】マウスオーバーでブロックごとスライドしてくるナビゲーションバーをjQueryで組んでみた

マウスオーバーすると画面外に隠れていたナビゲーションバー、HTMLでいうところのリストタグでできた部分がスライドして出てくるスクリプトは調べていていくつか見たのですが、メニュー部分そのもの（HTMLでいうところのULタグ）が出てくるってのは見かけなかったので、自分で作ってみました。

: 多角レーダーチャートを作成する「Jquery Canvas Chart」を使ってみた。

作成しているシステムのとある一覧画面に、得点に応じたチャート図をつけて欲しいとの依頼があったので、色々と調べてみたのですが、「Jquery Canvas Chart」が簡単でわかり易かったのでご紹介。

: CakePHP2 + jQueryUIでテキストボックスにオートコンプリート（オートサジェスト）機能をつける方法

テキストボックスにオートコンプリート（オートサジェスト）機能を、CakePHP2 + jQueryUI環境で作成したので作り方を備忘録としてポストします。

: 【JS】チェックボックスでフォームの disabled を設定/解除するスクリプトをjQueryで組んでみた

チェックボックスでフォームのdisabledを制御するjQueryのスクリプトを作成したので忘備録としてポストします。

PREV: 【JS】jQueryでAタグ（リンク）を無効化する方法
NEXT: 【MySQL】 CSVデータをphpMyAdminからインポートする方法

Javascriptでの配列の作成方法

Javascriptで配列

配列その1

配列その2

配列その3

連想配列

連想配列その1

連想配列その2

連想配列その3

多次元配列

二次元配列

二次元配列（連想配列）

【DIY】2x4や1x4など、SPF材サイズ早見表 (562,158)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (277,483)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (254,915)

【歴史】江戸幕府歴代将軍一覧 (142,957)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (128,859)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (127,917)

Javascriptでの配列の作成方法

Javascriptで配列

配列 その1

配列 その2

配列 その3

連想配列

連想配列 その1

連想配列 その2

連想配列 その3

多次元配列

二次元配列

二次元配列（連想配列）

配列その1

配列その2

配列その3

連想配列その1

連想配列その2

連想配列その3