ループとは
決まった回数や条件を満たしている間、同じ処理を繰り返し行う場合に使う構文のこと
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);
参考教材
↧