JavaScript 配列とループで使うメソッド一覧

ループとは

決まった回数や条件を満たしている間、同じ処理を繰り返し行う場合に使う構文のこと

##Array(配列)

• push
  • 引数の値を配列の末尾に代入
• pop
  • 配列末尾の値を削除
    • 削除された値は戻り値として返却する
• shift
  • 配列先頭の値を削除
• unshift
  • 引数の値を配列先頭に代入
• splice
  • 第一引数の設定値から第二引数の設定値の長さ分だけ配列を切り取る
  • 第二引数以降に設定の引数は、第一、第二引数で切り取られた場所に代入される
• concat
  • 配列の結合
  • ES6からスプレット演算子が使用可能

const arry = [1, 2, 3, 4, 5];

arry.push(6)
console.log(arry); // (6) [1, 2, 3, 4, 5, 6]

const result = arry.pop();
console.log(arry, result); // (5) [1, 2, 3, 4, 5] 6

arry.shift();
console.log(arry); // (4) [2, 3, 4, 5]
arry.unshift(1);
console.log(arry); // (5) [1, 2, 3, 4, 5]

// 0番目から1つ配列を切り取る設定
arry.splice(0, 1, 2);
console.log(arry); // (5) [2, 2, 3, 4, 5]

const arry2 = arry.concat([6,7,8]);
console.log(arry2); // (8) [2, 2, 3, 4, 5, 6, 7, 8]

##forEach
配列を繰り返し処理するメソッド

配列.forEach(functioned (要素, インデックス, 配列) {})

const arry = [1, 2, 3, 4, 5];

arry.forEach(function(value, index) {
  console.log(value); // 1...5までが出力
})

##map
元となる配列から新しい配列を生成するためのメソッド

配列.map(functioned (要素, インデックス, 配列) {})

const arry = [1, 2, 3, 4, 5];
const newArry = arry.map(function (value, index, array) {
  console.log(value); // 1...5までを繰り返し出力
  console.log(array); // (5) [1, 2, 3, 4, 5]
  return value * 2;
});
console.log(newArry); // (5) [2, 4, 6, 8, 10]

• オブジェクトをループさせる場合
• keysメソッドでオブジェクトを配列に変換してからループを行う必要がある

const fruits = { banana: 2, apple: 3, orange: 1 };

const newData = Object.keys(fruits).map((value, index, array) => {
  return value + "s";
});

console.log(Object.keys(fruits)); // (3) ['banana', 'apple', 'orange']
console.log(newData); // (3) ['bananas', 'apples', 'oranges']

##filter

• 与えられた関数によって実装された処理がtrueの場合、その結果を新しい配列にして返すメソッド
• falseの場合、**空の配列[]**が返却される

配列.filter(functioned (要素, インデックス, 配列) {})

• 配列から奇数の値のみ返却して新しい配列を作成する場合

const arry = [1, 2, 3, 4, 5];
const filterArry = arry.filter((value, index, array) => {
  return value % 2 === 1;
});

console.log(filterArry); // (3) [1, 3, 5]

• 1以外の要素を格納する場合

const arry = [1, 2, 3, 4, 5];
const filterArry = arry.filter((value) => {
  return value !== 1;
});

console.log(filterArry); // (4) [2, 3, 4, 5]

##reduce

配列のすべての要素に対して関数を実行し、単一の値にするメソッド

• 二次元配列を一次元配列にしたり、オブジェクトの値のインスタンスを返したりと利用範囲が広い

構文 -> 配列.reduce(functioned (累計値, 要素) {})

• 配列に格納されている数値の合計値を算出する場合

const arry = [1, 2, 3, 4, 5];

const result = arry.reduce(function(accu, curr) {
  console.log(accu, curr);
  return accu + curr;
})
console.log(result);

// 出力結果
// 1 2
// 3 3
// 6 4
// 10 5
// 15

##sort
配列要素の並び順を変更するメソッド

破壊的メソッドのため、元の配列データを変更してしまう点に注意！

• 昇順にする場合

const data = [1, 4, 2, 5, 3];
const newData = data.sort((a, b) => {
  return a - b;
});

console.log(data);    // (5) [1, 2, 3, 4, 5]
console.log(newData); // (5) [1, 2, 3, 4, 5]

• 降順にする場合

const data = [1, 4, 2, 5, 3];
const newData = data.sort((a, b) => {
  return b - a;
});

console.log(data);    // (5) [5, 4, 3, 2, 1]
console.log(newData); // (5) [5, 4, 3, 2, 1]

• 元の配列データを残しておきたい場合
• sliceメソッドを間に挟み、配列をコピーしてから作成する

const data = [1, 4, 2, 5, 3];
const newData = data.slice().sort((a, b) => {
  return a - b
});

console.log(data);
console.log(newData);

##参考教材