こちらも自分用の備忘録としてまとめたものです。
JavaScriptの基本的な配列の宣言方法
JavaScriptではいくつかの配列の宣言方法がある。C言語のように配列長を指定せずに生成することもできる。
//47個の空の要素をもつ配列を宣言 var todoufuken = new Array(47);
//4つの文字列を格納した配列を宣言 var fruits = ['いちご', 'みかん', 'リンゴ', '梨'];
//配列のオブジェクトを新規生成 var hairetu = new Array();
//配列のオブジェクトを新規生成 var students = [];
JavaScriptで配列の要素にアクセスする方法
fruits[3]とかで配列の前から4番目の要素にアクセスできる。
添字は0から開始する。
配列の長さを取得するには
hairetu.lengthでこの配列の要素の数を取得できる。
要素の何番目にあるかを探すには
fruits.indexOf('みかん');
とやれば「みかん」が何番目にあるかを探すことが出来る。みかんは2番目にあるので1が返される。
配列に要素を追加するにはpushを使う
students.push('佐藤 一郎');
これでこの配列の一番後ろに要素が追加される。配列長はもちろん1つ増える。
配列の最後の要素を取り除くにはpopを使う
var students = ['鈴木 太郎','佐藤 花子','小林 良夫','高橋 美和']; var last = students.pop();
こうすることでlastには’高橋 美和’が返る。
そしてpopした後は配列自体が変わる。
pop後のstudentsの配列の中身は、[‘鈴木 太郎’,’佐藤 花子’,’小林 良夫’]となる。
JavaScriptの連想配列の宣言の仕方
連想配列のオブジェクトを宣言する。これで空のオブジェクトができる。
var rensohairetu = new Object();
何でかって言うとJavaScriptでは「連想配列」という用語は使わないらしく、オブジェクトの宣言と同じだから。
JavaScriptではいわゆる連想配列に、関数を持たせることも出来て、まさにそれがオブジェクトだよねっていう話。関数が無ければ私たちがよく思い浮かぶ連想配列そのもの。
簡単な連想配列の宣言の仕方として以下の書き方がある。
var human = {};
先にキーと値を入れて宣言することもできる。
var human1 = {name: 'アベル', job: '勇者', lv: 48, hp:255, mp:100};
var human2 = {name: 'さとし', job: 'ポケモンマスター', lv:18, hp:108, mp:98};
連想配列の各要素にアクセスするにはキーを指定する
human1.name human1.hp
とか
human1['job'] human2['name']
で要素にアクセスできる。
連想配列に要素を後から追加することもできる
human1.town = 'アリアハン'; human2['town'] = 'マサラタウン';
連想配列の各要素に順番にアクセスするにはforループを使える
for (var key in human1) {
//keyは添字の文字列を表し
//human1[key]で要素にアクセスできる
}
JavaScriptで連想配列の配列を作る事も出来る
連想配列を3個もつ配列を宣言するには以下のようにすればよい。
var items = [
{
name : 'NTT東日本',
brand: 'フレッツ光',
url : 'flets.com',
ryokin: 4400,
gaiyo : 'NTT東日本で契約できるOCN光サービスです。'
},
{
name : 'NTTコミュニケーションズ',
brand: 'OCN光',
url : 'ntt.com',
ryokin: 3960,
gaiyo : 'NTTコミュニケーションズで契約できるOCN光サービスです。'
},
{
name : 'So-net',
brand: 'NURO光',
url : 'nuro.jp/hikari/',
ryokin: 5700,
gaiyo : 'So-netが回線からプロバイダーまで一括で提供しているの光通信サービス。'
},
];
これをループでまわして1個1個取り出して表示するJavaScriptをサンプルとしてCodePenで記述してみた。
See the Pen
js-array-test by pghappy (@pghappy)
on CodePen.
以上です。