javascript で配列操作をする

js の配列操作について詳しくなかったのでいくつかの method について手を動かしながら理解を深める.
概要は次の通り.

概要

動作環境
今回扱う method
push
pop
shift
unshift
splice
sort
reverse
まとめ

動作環境

Chrome

Chrome の console を使ってざっと確認.

今回扱う method

今回は次のものを扱ってみる.

push
pop
shift
unshift
splice
sort
reverse

いざ, 実践.

push

配列の末尾に 1 つ以上の要素を追加する method.

// js

var list = ['foo', 'bar'];
list.push('hoge');
console.log(list); // ["foo", "bar", "hoge"]

pop

配列から最後の要素を取り除き、その要素を返す.

// js

var list = ['foo', 'bar'];
list.pop();
console.log(list); // ["foo"]

shift

配列から先頭の要素を取り除く & 残った要素を返す.

// js

var list = ['foo', 'bar'];
list.shift();
console.log(list); // ["bar"]

unshift

配列の先頭に1つ以上の要素を追加 && 追加後の要素の長さを返す.

追加する要素を 1, 2, 3 個に分けて実験する.

// js

// 1個追加
var list = ['foo', 'bar'];
var length = list.unshift('1st');
console.log(list); // ["1st", "foo", "bar"]
console.log(length); // 3

// 2個追加
var list = ['foo', 'bar'];
var length = list.unshift('1st', '2nd');
console.log(list); // ["1st", "2nd", "foo", "bar"]
console.log(length); // 4


// 3個追加
var list = ['foo', 'bar'];
var length = list.unshift('1st', '2nd', '3rd');
console.log(list); // ["1st", "2nd", "3rd", "foo", "bar"]
console.log(length); // 5

unshift() の引数で指定した要素の順番が保持されるっぽい.
順番を気にするデータを作成する場合は注意が必要かも.

試しに 2nd, 1st って順番で実験.

// js

var list = ['foo', 'bar'];
var length = list.unshift('2nd', '1st');
console.log(list); // ["2nd", "1st", "foo", "bar"]
console.log(length); // 4

やはり.
スコープを意識しないと意図せぬところでデータが変わっちゃいそう.

splice

次の動作を1度に実現する method.

特定の要素を削除
新たに要素を追加

削除だけを行う or 削除後に要素を追加するの選択は, 引数に値を渡すかどうかで決まる.
第1, 2引数で削除する要素を指定.
第3引数以降は追加したい要素を指定.

構文はこれ↓

array.splice(index, howMany, [element1][, ..., elementN]);
- index: 変更を開始する要素番号. 0始まり.
- howMany: 削除する要素数. default=0. 削除したいなら 1以上を指定.
- element: 追加したい要素. ,(カンマ) 区切りで複数指定可能.
  - 要素の先頭に追加される

実験してみる.

// js

var list = ['foo', 'bar'];

// 削除しない. 要素だけ追加
list.splice(0, 0, 'hoge');
console.log(list); // ["hoge", "foo", "bar"]

// js

var list = ['foo', 'bar'];

// 削除だけ行う
list.splice(1, 1);
console.log(list); // ["foo"]

// js

var list = ['foo', 'bar'];

// 削除 & 追加
list.splice(0, 1, 'hoge', 'fuga');
console.log(list); // ["hoge", "fuga", "bar"]

この method も追加した要素の順序が保たれるんだね.

sort

unicode の符号位置順に sort する method.
気が向いたらこの順序について詳しく調べてみる.
イマは sort してくれる, ってことだけ把握しておく.

// js

// 数字を sort
var list_num = [20, 4, 6, 15, 1, 3];
list_num.sort();
console.log(list_num); // [1, 15, 20, 3, 4, 6]

// 文字列を sort
var list_str = ['foo', 'bar', 'hoge'];
list_str.sort();
console.log(list_str); // ["bar", "foo", "hoge"]

// 英数字混合文字列を sort
var list = [2, 4, 6, 'foo', 'bar', 'hoge', 5, 1, 3];
list.sort();
console.log(list); // [1, 2, 3, 4, 5, 6, "bar", "foo", "hoge"]

桁数の多い数字を sort とするときは注意が必要そう.

reverse

要素の順番を反転させる method.

// js

// 数字を reverse
var list_num = [20, 4, 6, 15, 1, 3];
list_num.reverse();
console.log(list_num); // [3, 1, 15, 6, 4, 20]

// 文字列を reverse
var list_str = ['foo', 'bar', 'hoge'];
list_str.reverse();
console.log(list_str); // ["hoge", "bar", "foo"]

// 英数字混合文字列を reverse
var list = [2, 4, 6, 'foo', 'bar', 'hoge', 5, 1, 3];
list.reverse();
console.log(list); // [3, 1, 5, "hoge", "bar", "foo", 6, 4, 2]

数字の大きさとかじゃなく, あくまでも要素番号の反転.