bl6.jp

自分用のメモです。JavaScriptの配列操作に関するメソッドなんかを整理する意味でまとめてみました。なんか、いざ使うとなった時に毎回ほぼ忘れているので自分なりに見やすいように残しておきます。

[ads_center]

配列操作

配列にデータを格納して生成するには以下のようにします。

var array1 = ['aaa', 'bbb', 'ccc'];
document.writeln(array1); // aaa,bbb,ccc

追加と削減

配列に要素を追加したり削減したりします。

shift

配列要素の先頭を削減します。

var shift1 = array1.shift();
document.writeln(array1 + '<br>');
document.writeln('削減した要素は ' + shift1 + ' です');
// 実行結果
// bbb,ccc
// 削減した要素は aaa です

unshift

引数に指定した要素を先頭に追加します。

var unshift1 = array1.unshift('ddd', 'eee', 'fff');
document.writeln(array1 + '<br>');
document.writeln('現在の要素数は ' + unshift1 + ' です');
// 実行結果
// ddd,eee,fff,aaa,bbb,ccc
// 現在の要素数は 6 です

pop

配列要素の末尾を削減します。

var pop1 = array1.pop();
document.writeln(array1 + '<br>');
document.writeln('削減した要素は ' + pop1 + ' です');
// 実行結果
// aaa,bbb
// 削減した要素は ccc です

push

引数に指定した要素を末尾に追加します。

var push1 = array1.push('ddd', 'eee', 'fff');
document.writeln(array1 + '<br>');
document.writeln('現在の要素数は ' + push1 + ' です');
// 実行結果
// aaa,bbb,ccc,ddd,eee,fff
// 現在の要素数は 6 です

ソート（並べ替え）

配列内の要素順を並べ替えます。

reverse

現在の配列内の要素順を逆にします。

array1.reverse();
document.writeln(array1);
// 実行結果 
// ccc,bbb,aaa

sort

配列内の要素を昇順に並べ替えます。

array1.sort();
document.writeln(array1);
// 実行結果
// aaa,bbb,ccc

連結

配列同士を連結したり、要素を区切る文字を指定して連結します。

concat

配列同士を連結します。

var array1 = ['aaa', 'bbb', 'ccc'];
var array2 = ['ddd', 'eee', 'fff'];
array3 = array1.concat(array2);
document.writeln(array3);
// 実行結果
// aaa,bbb,ccc,ddd,eee,fff

join

引数に指定した文字で要素を区切り連結します。

var array1 = ['aaa', 'bbb', 'ccc'];
array2 = array1.join('&');
document.writeln(array2);
// 実行結果
// aaa&bbb&ccc

取り出しと置き換え

配列内の要素を取り出したり違う要素に置き換えたりします。

slice

引数に取り出すインデックスを指定します。例えばslice(1)と指定した場合は0からスタートした1番目の要素から末尾までを取得します。また、slice(2, 4)などといった引数を指定すると2番目から4番目未満の要素を取得できます。

var array1 = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'];
array2 = array1.slice(1);
array3 = array1.slice(2, 4);
document.writeln('取り出す前の配列内要素：' + array1 + '<br>');
document.writeln('slice(1)で取り出した要素：' + array2 + '<br>');
document.writeln('slice(2, 4)で取り出した要素：' + array3);
// 実行結果
// 取り出す前の配列内要素：aaa,bbb,ccc,ddd,eee,fff
// slice(1)で取り出した要素：bbb,ccc,ddd,eee,fff
// slice(2, 4)で取り出した要素：ccc,ddd

splice

第一引数に開始インデックス、第二引数に終了インデックスを指定します。第一引数から第二引数に指定した範囲内の要素をその後に指定する引数に置き換えます。

var array1 = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'];
document.writeln('置き換え前の配列内要素：' + array1 + '<br>');
splice1 = array1.splice(3, 5, 'ggg', 'hhh', 'iii');
document.writeln('置き換え対象要素：' + splice1 + '<br>');
document.writeln('置き換え後の配列内要素：' + array1);
// 実行結果
// 置き換え前の配列内要素：aaa,bbb,ccc,ddd,eee,fff
// 置き換え対象要素：ddd,eee,fff
// 置き換え後の配列内要素：aaa,bbb,ccc,ggg,hhh,iii

配列内の要素数を取得

配列内の要素数を取得します。

length

var array1 = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'];
var length1 = array1.length;
document.writeln('現在の要素数：' + length1);
// 実行結果
// 現在の要素数：6

lengthを使えばループ時に簡単に配列内の要素を1つずつ取り出したり共通の処理を適用させることができますね。

for

var array1 = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'];
var length1 = array1.length;

for (var i = 0; i < length1; i++) {
    document.writeln(i + '. ' + array1[i] + '<br>');
}
// 実行結果
// 0. aaa
// 1. bbb
// 2. ccc
// 3. ddd
// 4. eee
// 5. fff

for…in

こちらはlength関係ないですが…。

var array1 = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'];

for (i in array1) {
    document.writeln(i + '. ' + array1[i] + '<br>');
}
// 実行結果
// 0. aaa
// 1. bbb
// 2. ccc
// 3. ddd
// 4. eee
// 5. fff

ということで、配列操作に関することをまとめてみました。また忘れた時はこれ見ようかと思います。