B-Teck!

お仕事からゲームまで幅広く

【JavaScript】JSの配列操作まとめ

JavaScript

配列の操作

配列の作成

// 空の配列を作成
var hoge = [];                
// 値をもった配列を作成
var hoge = [1, 2, 3];      
// 長さ10で値が未定義の配列を作成
var hoge = new Array(10);

配列の初期化

配列の変数に空の配列を代入するか、長さを0にすることで配列自体の初期化が行える。

// 空の配列を代入する場合
var hoge = [1, 2, 3];
hoge = [];
console.log(hoge);

// 配列の長さを0にする場合
hoge = [1, 2, 3];
hoge.length = 0;
console.log(hoge);

ちなみに、配列の長さを0ではない数に変更した場合は下記のようになる。

// 配列の長さを短くする場合
// 指定した要素数を残して削除される
var hoge = [1, 2, 3];
hoge.length = 1;
console.log(hoge);


// 配列の長さを長くする場合
// 未定義の要素が生成される
hoge = [1, 2, 3];
hoge.length = 5;
console.log(hoge);

配列の要素数を取得

var hoge = [1, 2, 3];
// 3と出力される
console.log(hoge.length);

配列の最初と最後を取得

var hoge = [1, 2, 3];
// 最初
console.log(hoge[0]);
// 最後
// 配列の長さは要素の個数だけど添字は0から始まるので
// 要素数から1を引くと最後の要素の添字になる
console.log(hoge[hoge.length - 1]);

配列の要素を指定位置で切り出す

var hoge = [1, 2, 3];
// sliceは2個目の引数の添字を含まずに切り出す
// 下記のような場合は0番目の要素から添字が1のものまで
console.log(hoge.slice(0, 2));
// 下記のような場合は1番目の要素から添字が2のものまで
console.log(hoge.slice(1, 3));

配列のループ

for of または foreachを使うのがベター？

  • for
var fruits = ["りんご", "バナナ"];
for(let i = 0; i < fruits.length; i++) {
    console.log(fruits[i])
}
  • foreach
var fruits = ["りんご", "バナナ"];
fruits.forEach(function (item, index, array) {
    console.log(item, index);
});
  • for in
    for inはprototypeで設定されたプロパティも参照してしまうので、hasOwnPropertyを使わないと予期しないデータが混ざる場合がある。
var fruits = ["りんご", "バナナ"];
for (var key in fruits) {
    if (fruits.hasOwnProperty(key)){
        console.log(key + ' is property of fruits!');
    }
}
  • for of
var fruits = ["りんご", "バナナ"];
// 値を取り出す
for(let v of fruits) {
    console.log(v);
}
// キーを取り出す
for(let k of Object.keys(fruits)) {
    console.log(k);
}
// キーと値を取り出す
for(let k of Object.keys(fruits)) {
    console.log(k);
    console.log(fruits[k]);
}

配列の先頭に要素を追加する

var fruits = ["りんご", "バナナ"];
fruits.unshift("いちご");
console.log(fruits);

配列の末尾に要素を追加する

var fruits = ["りんご", "バナナ"];
fruits.push("みかん");
console.log(fruits);

配列の値を削除する

delete演算子は、削除したインデックスを詰めないので注意。

var fruits = ["いちご","りんご", "バナナ", "みかん"];
delete fruits[2];
// Array [ "いちご", "りんご", <1 empty slot>, "みかん" ]のような形になる
console.log(fruits);

配列の先頭の要素を取り出して元の配列から削除する

var fruits = ["りんご", "バナナ"];
// shiftの戻り値は削除した値なので、"りんご"が出力される
console.log(fruits.shift());
console.log(fruits);

配列の末尾の要素を取り出して元の配列から削除する

var fruits = ["りんご", "バナナ"];
// popの戻り値は削除した値なので、"バナナ"が出力される
console.log(fruits.pop());
console.log(fruits);

指定した要素に最初に合致した要素のインデックスを返す

var fruits = ["りんご", "バナナ", "りんご","りんご","バナナ"];
// 1と出力される
console.log(fruits.indexOf("バナナ"));

指定した要素に最後に合致した要素のインデックスを返す

var fruits = ["りんご", "バナナ", "りんご","りんご","バナナ"];
// 4と出力される
console.log(fruits.lastIndexOf("バナナ"));

インデックス位置を指定して要素を取り出し、元の配列から削除する

取り出した分のインデックスは詰められる

var fruits = ["いちご","りんご", "バナナ", "みかん"];
// 添字0から3個取り出す
// Array [ "いちご", "りんご", "バナナ" ]
console.log(fruits.splice(0, 3));
// Array [ "みかん" ]
console.log(fruits);


fruits = ["いちご","りんご", "バナナ", "みかん"];
// 添字1から2個取り出す
// Array [ "りんご", "バナナ" ]
console.log(fruits.splice(1, 2));
// Array ["いちご", "みかん"]
console.log(fruits);

インデックス位置を指定して要素を取り出し・削除し、新しい要素を追加する

上の処理の延長。
取り出す要素を指定したあと、引数に配列要素を入れることで元の配列を変更できる。

var fruits = ["いちご","りんご", "バナナ", "みかん"];
// 添字0から3個取り出して,取り出した部分に1個追加する
// Array [ "いちご", "りんご", "バナナ" ]
console.log(fruits.splice(0, 3,"ざくろ"));
// Array ["ざくろ" , "みかん"]
console.log(fruits);


fruits = ["いちご","りんご", "バナナ", "みかん"];
// 添字1から2個取り出して,取り出した部分に3個追加する
// Array [ "りんご", "バナナ" ]
console.log(fruits.splice(1, 2, "パイナップル", "マンゴー", "アセロラ"));
// Array [ "いちご", "パイナップル", "マンゴー", "アセロラ", "みかん" ]
console.log(fruits);

配列のコピー

fruits2 = fruitsのようにすると参照のコピーとなってしまうので、配列のコピーとならない。
コピーするときはArray.concat()やArray.slice()を使う。

var fruits = ["いちご","りんご", "バナナ", "みかん"];
var fruits2 = fruits .concat();
var fruits3 = fruits.slice();
console.log(fruits);
console.log(fruits2);
console.log(fruits3);

配列の結合

破壊的な配列の結合

var fruits = ["いちご","りんご"];
var fruits2 = ["バナナ","みかん"];

Array.prototype.push.apply(fruits, fruits2);
// 一つ目の配列が直接変更される
console.log(fruits);
console.log(fruits2);

非破壊的な配列の結合

var fruits = ["いちご","りんご"];
var fruits2 = ["バナナ","みかん"];
var fruits3 = fruits.concat(fruits2);
// 元の配列を維持したまま、2つを結合した新しい配列が出来ている
console.log(fruits);
console.log(fruits2);
console.log(fruits3);

数値配列から最大値と最小値を取り出す

var array = [1234,15, 9999, 324, 78536];
// 最大値の取得
console.log(Math.max.apply(null, array));
// 最小値の取得
console.log(Math.min.apply(null, array));

配列に指定した値が含まれているかを確認する

var foods = ['りんご', 'バナナ', 'オレンジ'];
if (foods.includes('りんご')) {
    console.log("りんごは配列に含まれています。");
}
if (!foods.includes('キウイ')) {
    console.log("キウイは配列に含まれていません。");
}

配列のソート

//配列のソート
var a = [6,9,1,22,7,1,3,2,15,83];
//Array [ 6, 9, 1, 22, 7, 1, 3, 2, 15, 83 ]
console.log(a);
//昇順
a.sort(function(a,b){
    if( a < b ) return -1;
    if( a > b ) return 1;
    return 0;
});
//Array [ 1, 1, 2, 3, 6, 7, 9, 15, 22, 83 ]
console.log(a);
//降順
a.sort(function(a,b){
    if( a > b ) return -1;
    if( a < b ) return 1;
    return 0;
});
//Array [ 1, 1, 2, 3, 6, 7, 9, 15, 22, 83 ]
console.log(a);

参考 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#Specifications