アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < 転職してフロントエンド勉強中 あとFE聖戦1周クリアしてトラキアやりながらSQX待ち

jsで配列操作いろいろ

jQuery限定な話は混ざってないと思う…たぶん。

配列をつくる

基本の配列
// 空の配列を定義
var list_1 = [];
// データの入った配列を定義
var list_2 = ["a", "b", "c"];
連想配列
// 空の配列を定義
var list_1 = {};
// データの入った配列を定義
var list_2 = {name : "山田", age : "25", pref : "東京都"};

普通の配列はArrayですが、
連想配列をコンソールに出してみるとObjectと表示されますね。
型が違うレベルの別物なら記事を分けるべきかと思いましたが
PHP脳なのでいっしょくたのままにしておきます。配列は配列。

多次元配列

もちろん連想配列も使えます。

var list_1 = [
    [1, 2, 3],
    [4, 5, 6]
];
var list_2 = [
    {name : "山田", age : "25", pref : "東京都"},
    {name : "佐藤", age : "30", pref : "千葉県"}
];
var list_3 = {
    hoge : {name : "山田", age : "25", pref : "東京都"},
    fuga : {name : "佐藤", age : "30", pref : "千葉県"}
};

配列⇔文字列

配列の各要素を文字列として結合

phpのimplodeみたいなやつ。

var list = ["hoge", "fuga", "piyo"];
console.log(list.join(",")); // 「hoge,fuga,piyo」と表示
文字列を特定の文字で区切って配列化

phpのexplodeみたいなやつ。

var str = "hoge,fuga,piyo";
console.log(str.split(",")); // 「["hoge", "fuga", "piyo"]」の配列を表示

要素の取得

// 普通の配列の場合
var list_1 = ["a", "b", "c"];
console.log(list_1[1]); // 「b」と表示

// 連想配列の場合
var list_2 = {hoge : "a", fuga : "b", piyo : "c"};
console.log(list_2["fuga"]); // 「b」と表示
console.log(list_2.fuga); // この書き方でもOK

// 多次元配列でも同様
var list_3 = [
    {hoge : "a", fuga : "b", piyo : "c"},
    {hoge : "d", fuga : "e", piyo : "f"},
];
console.log(list_3[1]["fuga"]); // 「e」と表示

配列の長さ

var list = ["a", "b", "c"];
console.log(list.length); // 「3」と表示

要素の追加・削除

要素の追加
var list = ["a", "b", "c"];

// 先頭に追加
list.unshift("x"); // ["x", "a", "b", "c"] になる

// 末尾に追加
list.push("d"); // ["x", "a", "b", "c", "d"] になる

キーを指定することも可能。
連想配列の場合は使いやすいかも。

var list = {};
list["hoge"] = "a"; // {hoge : "a"} になる
list.fuga = "b"; // {hoge : "a", fuga : "b"} になる
list.fuga = "c"; // {hoge : "a", fuga : "c"} になる(上書き)

通常の配列の場合はややコワい動き。

var list = [];
list[1] = 1;
list[5] = 5;
console.log(list.length);

↑これ、lengthは「6」でした。
どうやらlist[0]とlist[2~4]が空きスロットと見なされる模様。
また、ここから「list.push」すると次はlist[6]に格納されます。

要素の削除
var list = ["a", "b", "c"];

// 先頭を削除
list.shift(); // ["b", "c"] になる

// 末尾を削除
list.pop(); // ["b"] になる

こちらもキー指定で削除することが可能。
やはり連想配列の場合は使いやすそう。

var list = {hoge : "a", fuga : "b", piyo : "c"};
delete list.fuga; // {hoge : "a", piyo : "c"} になる

そしてこちらが通常配列。
追加時と似たような感じで、消した部分は詰められず空きスロットになるようです。
詰めたい場合は「splice」を使用するとよさそう。
(ちょっとややこしそうなので別記事にします)

var list = ["a", "b", "c"];
delete list[1]; // ["a", undefined, "c"] になる
要素の全削除(配列の初期化)
// 「配列の長さをゼロにする」方法
var list_1 = [1, 2, 3];
list_1.length = 0;

// 「空の配列を再定義する」方法
var list_2 = [1, 2, 3];
list_2 = [];

配列の結合

var list_1 = ["a", "b"];
var list_2 = ["c", "d"];
var list_3 = list_1.concat(list_2); // ["a", "b", "c", "d"] になる

参考
JavaScriptの配列・多次元配列・連想配列の基本 | てらこや.work
JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。
【javascript】配列と文字列の変換