- 配列の操作
- 配列の作成
- 配列の初期化
- 配列の要素数を取得
- 配列の最初と最後を取得
- 配列の要素を指定位置で切り出す
- 配列のループ
- 配列の先頭に要素を追加する
- 配列の末尾に要素を追加する
- 配列の値を削除する
- 配列の先頭の要素を取り出して元の配列から削除する
- 配列の末尾の要素を取り出して元の配列から削除する
- 指定した要素に最初に合致した要素のインデックスを返す
- 指定した要素に最後に合致した要素のインデックスを返す
- インデックス位置を指定して要素を取り出し、元の配列から削除する
- インデックス位置を指定して要素を取り出し・削除し、新しい要素を追加する
- 配列のコピー
- 配列の結合
- 数値配列から最大値と最小値を取り出す
- 配列に指定した値が含まれているかを確認する
- 配列のソート
配列の操作
配列の作成
// 空の配列を作成 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