配列の操作
配列の作成
var hoge = [];
var hoge = [1, 2, 3];
var hoge = new Array(10);
配列の初期化
配列の変数に空の配列を代入するか、長さを0にすることで配列自体の初期化が行える。
var hoge = [1, 2, 3];
hoge = [];
console.log(hoge);
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];
console.log(hoge.length);
配列の最初と最後を取得
var hoge = [1, 2, 3];
console.log(hoge[0]);
console.log(hoge[hoge.length - 1]);
配列の要素を指定位置で切り出す
var hoge = [1, 2, 3];
console.log(hoge.slice(0, 2));
console.log(hoge.slice(1, 3));
配列のループ
for of
または foreach
を使うのがベター?
var fruits = ["りんご", "バナナ"];
for(let i = 0; i < fruits.length; i++) {
console.log(fruits[i])
}
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!');
}
}
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];
console.log(fruits);
配列の先頭の要素を取り出して元の配列から削除する
var fruits = ["りんご", "バナナ"];
console.log(fruits.shift());
console.log(fruits);
配列の末尾の要素を取り出して元の配列から削除する
var fruits = ["りんご", "バナナ"];
console.log(fruits.pop());
console.log(fruits);
指定した要素に最初に合致した要素のインデックスを返す
var fruits = ["りんご", "バナナ", "りんご","りんご","バナナ"];
console.log(fruits.indexOf("バナナ"));
指定した要素に最後に合致した要素のインデックスを返す
var fruits = ["りんご", "バナナ", "りんご","りんご","バナナ"];
console.log(fruits.lastIndexOf("バナナ"));
インデックス位置を指定して要素を取り出し、元の配列から削除する
取り出した分のインデックスは詰められる
var fruits = ["いちご","りんご", "バナナ", "みかん"];
console.log(fruits.splice(0, 3));
console.log(fruits);
fruits = ["いちご","りんご", "バナナ", "みかん"];
console.log(fruits.splice(1, 2));
console.log(fruits);
インデックス位置を指定して要素を取り出し・削除し、新しい要素を追加する
上の処理の延長。
取り出す要素を指定したあと、引数に配列要素を入れることで元の配列を変更できる。
var fruits = ["いちご","りんご", "バナナ", "みかん"];
console.log(fruits.splice(0, 3,"ざくろ"));
console.log(fruits);
fruits = ["いちご","りんご", "バナナ", "みかん"];
console.log(fruits.splice(1, 2, "パイナップル", "マンゴー", "アセロラ"));
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];
console.log(a);
a.sort(function(a,b){
if( a < b ) return -1;
if( a > b ) return 1;
return 0;
});
console.log(a);
a.sort(function(a,b){
if( a > b ) return -1;
if( a < b ) return 1;
return 0;
});
console.log(a);
参考 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#Specifications