js の配列操作について詳しくなかったのでいくつかの method について手を動かしながら理解を深める.
概要は次の通り.
動作環境
- 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]
数字の大きさとかじゃなく, あくまでも要素番号の反転.
まとめ
慣れている人は Underscore.js とか lodash.js とかを使うんだろうけど, 基本は大切.
直近ではライブラリに頼らず力技でデータ整形ができるようになりたい.
今回は以上.
