JavaScript/配列操作

JavaScript/配列操作

foreach

of

最近の JS ならコレクション要素を走査する特別な構文があるのでそれが使える

for(let v of vList){
    console.log(v);
}

メタ情報取得系

配列であることを確認する

変数 hoge の中身が配列がどうかを確認するには

if(hoge instanceof Array){
    // 配列ならばここ
}

配列の大きさを得る

console.log([1, 2, 3, 4, 5].length); // -> 5

作成系

配列オブジェクトを作る

var hoge = new Array();

短縮版としてよくこのように書く

var hoge = [];

内容が同一な新たな配列を作る

参照を通じての変更を嫌う場合に配列の中身をまったく新たに詰め替えたい場合がある。

concat は引数の配列を結合して新たな配列を作るメソッドなので引数を与えなければそのまま詰め替え動作になる。

var piyo = hoge.concat();

削除系

先頭を削除(破壊的)し先頭を取得する(POPな動作)

var hoge = [1,2,3,4];
var piyo = hoge.shift(); //[2,3,4];
alert(piyo);    //1

戻りと副作用が動作としてセットなので↑は破壊的。

末尾を削除(破壊的)し末尾を取得する

var hoge = [1,2,3,4];
hoge.pop(); //[1,2,3]
alert(piyo);    //4

破壊的

配列を空にする、内容を全削除

長さをゼロに指定すると内部もなくなる。

var hoge = [1,2,3];
hoge.length = 0;

要素位置を指定して削除する(破壊的詰めない版)

なぜか Array には削除メソッドが無い。しかし局内部は単なる連想配列なのでdelete演算子が使える。

var a = ["a","b","c"];
delete a[1];  //=>["a", undefined, "c"]

結果は undefined がセットされて要素数は変わらない

要素位置を指定して削除する(破壊的詰める版)

deleteと違って要素数も減らす版

var a = ["a","b","c"];
a.splice(1, 1);  //=> ["a", "c"]

注意点としてこの「詰める版」は要素数が減少するので定番のforループとかで操作すると操作対象とインデックスがズレる。

追加系

末尾に追加する(破壊的)

var hoge = ['bbb', 'ccc'];
hoge.push('aaa');
console.log(hoge); // => [bbb, ccc, aaa];

実はこのメソッド

var hoge = ['ddd', 'eee'];
hoge.push('aaa', 'bbb', 'ccc');

引数を何個もとって連続で追加することができる。

末尾に配列を結合する(破壊的)

「末尾に追加する」pushは引数を複数個とれるので、こいつを応用すると破壊的に配列を結合することができる

var hoge = ['aaa'];
Array.prototype.push.apply(hoge, ['bbb', 'ccc']);

applyメソッドは関数に成り代わって関数を実行するメソッドで第二引数を配列でとることができる。

だからこれを利用してpushを呼び出せば内部的には展開されてpushされるので、結果配列を結合したことと同じ効果を得ることができる。

配列を結合して新たな配列を作る(非破壊的)

var hoge = [1,2,3];
var moge = hoge.concat([4,5,6]);

mogeは

[1,2,3,4,5,6]

非破壊的

このconcatメソッドは引数を複数取ることもでき複数の配列を並列に同じようにつなぐ

var hoge = [1,2,3];
var moge = hoge.concat([4,5,6],[7,8,9]);

mogeは

 [1,2,3,4,5,6,7,8,9]

その他

オブジェクトを無理やり配列化する

JavaScriptは数値っぽいメンバとlengthプロパティがくっついていれば配列オブジェクトのように扱われるようだ。

つまりオブジェクトにそれをとりつけてやればよい jQuery内部ではそういう操作してた。

JavaScriptのダックタイピング的性質とういうことでこういうことが可能

var hoge = {}
hoge[0] = 'aaa';
hoge[1] = 'bbb';
hoge.length = 2;
 
Array.prototype.push.apply(hoge, ['ccc']); //実装は無いので借りてくる
alert(hoge[2]); // -> ccc

hoge は単なる Object なのだが Array として普通に動作していることがわかる。

JSON形式の文字列に変換する

toStringメソッドを使うことによって、JSON形式の文字列に変換してくれる。

基本的に要素のカンマ区切りとして展開される(一番外側の[]括弧が無い)が、要素に格納されているtoStringメソッドを勝手に探索して存在したならばそれを実行し戻りで展開してくれる。

これによってオリジナルオブジェクトにtoStringを実装しておけば容易にJSON形式の文字列を生成することができるようになる。

配列の一部を配列として取り出す

これにはsliceメソッドを使う。第一引数に取り出したい場所の開始インデックス、第二引数に終了未満インデックスを入力する。つまり第一引数以上第二引数未満の要素を配列として取り出すことができる。

1個ズレなら1要素

[4, 5, 6, 7].slice(2, 3);
//[6]

同じなら無し

[4, 5, 6, 7].slice(2, 2);
//[]

オーバーしてもOK

[4, 5, 6, 7].slice(2, 10);
//[6, 7]

開始を指定して最後まで切り出す

第二引数を省略すると最後まで切り出す

[4, 5, 6, 7].slice(0);
//[4, 5, 6, 7]
[4, 5, 6, 7].slice(1);
//[5, 6, 7]

ちなみに slice は存在しない要素のインデックスを指定しても空配列が戻るだけでエラーにはならない。

範囲を指定して頭から切り出す

[4, 5, 6, 7].slice(0, 2);
//[4, 5]

後ろから切り出す

負の数を指定することで後ろ側から切り出せる。順番は格納順と変わらない。後ろ3要素を切り出したいなら

[4, 5, 6, 7].slice(-3);
//[5, 6, 7]

っで切り出せる

要素指定で順番を1つ下げる

つまり、

var a = ["a", "b", "c", "d"];
//これを b 指定で ["a", "c", "b", "d"] にする

ソート

ソート用のメソッドがあるので、そいつに評価関数を渡せばソートしてくれる

評価関数

評価関数の仕様はこのようになっていて、配列中の任意の2値 a, b において、a が小さいと判断するなら -1 b が小さいと判断するなら 1 同じならゼロとする。 この場合は昇順(小さいほうが先)になるように評価関数を作っている

function(a, b){
    if(a < b){
        return -1;
    }
    if(a > b){
        return 1;
    }
    return 0;
}

昇順ソート

ソートは破壊的に行われる。

var list = [3, 2, 1, 4, 5];
list.sort(function(a, b){
    if(a < b){
        return -1;
    }
    if(a > b){
        return 1;
    }
    return 0;
});
console.log(list); //=> [1,2,3,4,5]

このやりかたを文字列に対して行うとアルファベット順ソート(UTF8順?)される。

タグ

javascript/ope/array_ope/start.txt · 最終更新: 2019-06-10 12:24 by ore