配列の色々な操作〜モダンなJavaScript

JavaScript

JavaScriptの配列の作りかたには[]ブラケットを使う方法と、newArray()を使う方法があります。
値は、数値でも文字列でもオブジェクトでも好きに入れることができます。

const numbers = [73,16,32,41,43,22,3];
const numbers2 = new Array(12,48,23,46,74);
const fruit = ['りんご', 'バナナ', 'オレンジ', 'グレープ'];
const mixed = [18, 'Tahara', true, undefined, null, {x:1, y:1}, new Date()];

length プロパティは配列の要素数を取得します。

let val = numbers.length;
console.log(val); // 7

Array.isArray()メソッドは、オブジェクトが配列であればtrueを、そうでなければfalseを返します。

let val = Array.isArray(numbers);
console.log(val);  // true

配列の特定要素をインデックスで呼び出します。

let val = numbers[3];
console.log(val);  //41

val = numbers[0];
console.log(val);  //73

配列の特定のインデックスの値を入れ替えることができます。

numbers[2] = 100;
console.log(numbers);  // (7) [73, 16, 100, 41, 43, 22, 3]

配列の特定の値からインデックス番号を調べることができます。配列に存在しない値をパラメータに指定した場合は -1 を返します。

let val = numbers.indexOf(41);
console.log(val);  // 3

push() メソッドは、配列の末尾に 1 つ以上の要素を追加することができます。また戻り値として新しい配列の要素数を返します。

numbers.push(150);
console.log(numbers);  // (8) [73, 16, 100, 41, 43, 22, 3, 150]

unshift() メソッドは、配列の最初に 1 つ以上の要素を追加し、新しい配列の長さを返します。

numbers.unshift(220);
console.log(numbers);  // (9) [20, 73, 16, 100, 41, 43, 22, 3, 150]

pop() メソッドは、配列から最後の要素を取り除き、その要素を返します。このメソッドは配列の長さを変化させます。

numbers.pop();
console.log(numbers);  // (8) [20, 73, 16, 100, 41, 43, 22, 3]

shift() メソッドは、配列から最初の要素を取り除き、その要素を返します。このメソッドは配列の長さを変えます。

numbers.shift();
console.log(numbers);  // (7) [73, 16, 100, 41, 43, 22, 3]

splice()は配列の指定した位置から一つ以上の値を削除します。

  • 第1引数は、開始位置を指定
  • 第2引数は、開始位置からの削除する個数を指定
  • 第3引数以降は、開始位置に新しく挿入する要素を任意の数だけ指定
  • 返り値は元の配列から削除した結果残った要素の配列
  • 開始位置は正の数、または負の数で指定。
numbers.splice(1,3);
console.log(numbers);  // [73, 43, 22, 3]

配列の要素を反転させます。最初の要素は最後に、最後の要素は最初になります。

numbers.reverse();
console.log(numbers);  // [3, 22, 43, 73]

concat() メソッドは、配列に他の配列や値をつないでできた新しい配列を返します。

let val = numbers.concat(numbers2);
console.log(val);  // (9) [3, 22, 43, 73, 12, 48, 23, 46, 74]

配列の要素をソートします。このソートは必ずしも順番が守られる訳ではありません。 それは、デフォルトではUnicodeコードポイントの昇順にソートされているからです。
例えば、1桁の数字の場合は昇順になりますが。2桁の数字の場合には昇順にはなりませんので注意してください。

let val = fruit.sort();
console.log(val);  // ["りんご", "オレンジ", "グレープ", "バナナ"]
val = numbers.sort();
console.log(val);  // [22, 3, 43, 73]

正しくソートするには比較関数を使用します。
昇順にする場合は次のようにします。

let val = numbers.sort(function(x, y){
   return x - y;
 });
console.log(val); //  [3, 22, 43, 73]

降順にするには次のようにします。

let val = numbers.sort(function(x, y){
   return y - x;
 });
console.log(val);  //  [73, 43, 22, 3]

配列の要素に指定されたテスト関数を適用していき、テストを満たす最初の要素の 値 を返します。見付からない場合は undefined を返します。

function over50(num){
  return num > 50;
}

let val = numbers.find(over50);
console.log(val);  //73
タイトルとURLをコピーしました