js の配列操作について詳しくなかったのでいくつかの method について手を動かしながら理解を深める.
概要は次の通り.
動作環境
- Chrome
Chrome の console を使ってざっと確認.
今回扱う method
今回は次のものを扱ってみる.
- push
- pop
- shift
- unshift
- splice
- sort
- reverse
いざ, 実践.
push
配列の末尾に 1 つ以上の要素を追加する method.
|
1 2 3 4 5 6 7 |
// js var list = ['foo', 'bar']; list.push('hoge'); console.log(list); // ["foo", "bar", "hoge"] |
pop
配列から最後の要素を取り除き、その要素を返す.
|
1 2 3 4 5 6 7 |
// js var list = ['foo', 'bar']; list.pop(); console.log(list); // ["foo"] |
shift
配列から先頭の要素を取り除く & 残った要素を返す.
|
1 2 3 4 5 6 7 |
// js var list = ['foo', 'bar']; list.shift(); console.log(list); // ["bar"] |
unshift
配列の先頭に1つ以上の要素を追加 && 追加後の要素の長さを返す.
追加する要素を 1, 2, 3 個に分けて実験する.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// 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 って順番で実験.
|
1 2 3 4 5 6 7 8 |
// 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: 追加したい要素.,(カンマ)区切りで複数指定可能.- 要素の先頭に追加される
実験してみる.
|
1 2 3 4 5 6 7 8 9 |
// js var list = ['foo', 'bar']; // 削除しない. 要素だけ追加 list.splice(0, 0, 'hoge'); console.log(list); // ["hoge", "foo", "bar"] |
|
1 2 3 4 5 6 7 8 9 |
// js var list = ['foo', 'bar']; // 削除だけ行う list.splice(1, 1); console.log(list); // ["foo"] |
|
1 2 3 4 5 6 7 8 9 |
// js var list = ['foo', 'bar']; // 削除 & 追加 list.splice(0, 1, 'hoge', 'fuga'); console.log(list); // ["hoge", "fuga", "bar"] |
この method も追加した要素の順序が保たれるんだね.
sort
unicode の符号位置順に sort する method.
気が向いたらこの順序について詳しく調べてみる.
イマは sort してくれる, ってことだけ把握しておく.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 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 とかを使うんだろうけど, 基本は大切.
直近ではライブラリに頼らず力技でデータ整形ができるようになりたい.
今回は以上.
