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, 多次元配列, 連想配列, 配列

: スマホアプリでよく見る横から出てくるスライドメニューを実装できるjQueryのプラグイン「Sidr」。

スマホ向けサイトを作成の際、メニューをスマホアプリのように横から出したくなり探しました所、「Sidr」というプラグインを発見。

: 「クリックしたらツールチップを表示するスクリプト」のバージョン2を作ってみた

以前作成した「クリックしたらツールチップを表示するスクリプト」がQiitaでいい感じに改造されていたのに影響を受け、もう少しだけ上手に書いた(と思う) バージョン2がようやく出来上がったので晒してみたいと思います。

: 【JS】定義リスト/記述リスト（dl, dd）タグの個数をカウントするスクリプトをjQueryで作ってみた

このブログの一番人気記事である「三文字略語」のページには現在何個の略字を載っけたのか数えたくなったのですが、いちいち自分で数えるのもバカらしく感じたのでプログラムにやらせてみようと作ってみました。

: ファイルをまとめてアップロードする jQuery のプラグイン「Uploadify」の使い方。

画像ファイルを複数枚一気にアップロード出来ないかと探していましたら「Uploadify」というjQueryのプラグインを発見しましたので、その設置方法を忘備録代わりにポストです。

: jQueryで日数計算をしてみる

娘の百日膳を行うにあたって「誕生日からの100日目っていつなんだ？」というのを調べる機会があったのですが、せっかくなので勉強がてら自分でも組んでみようと思い、日数計算できるスクリプトをjQueryを利用して作ってみたので公開してみたいと思います。

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

Javascriptでの配列の作成方法

Javascriptで配列

配列その1

配列その2

配列その3

連想配列

連想配列その1

連想配列その2

連想配列その3

多次元配列

二次元配列

二次元配列（連想配列）

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

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

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

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

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

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

Javascriptでの配列の作成方法

Javascriptで配列

配列 その1

配列 その2

配列 その3

連想配列

連想配列 その1

連想配列 その2

連想配列 その3

多次元配列

二次元配列

二次元配列（連想配列）

配列その1

配列その2

配列その3

連想配列その1

連想配列その2

連想配列その3