【JavaScript】配列用のメソッドをまとめてみた

書き途中なので随時追加予定です。

reduce

配列の各要素の値を累積し1つの値にするメソッド。

[対象の配列].reduce(function([累積値], [処理される値]){})

**[対象の配列]に対して配列の各要素の値を[累積値]**に累積していく。
配列の中身を1つずつ足していって合計値を出すって感じ。

使用例

例）配列の各値の合計値が知りたい

var array = [1,2,3,4,5];

var totalNum = array.reduce(function(a,b){
    return a + b;
});

console.log(totalNum); // 15

上記の例ではarray配列の値の合計値が返されている。
配列の値を1つずつ足し算し、aの[累積値]に累積してくれている。

ざっくりとこんな感じ↓

処理の回数	aの値	bの値	次処理のaに持ち越される値
1回目	0	1	1
2回目	1 ( 1回目の累積値 )	2	3
3回目	3 ( 2回目の累積値 )	3	6
4回目	6 ( 3回目の累積値 )	4	10
5回目	10 ( 4回目の累積値 )	5	-　(処理終了)

現在の処理に対して、aの[累積値]の更新をしてくれるのは次の処理になる。
そのため返り値はa + bをしてあげる必要がある。

splice

指定した配列から要素を削除、追加して組み替えた値を返してくれるメソッド。

/*
 第1引数　　：削除,追加したい要素のindex
 第2引数　　：削除したい要素の数
 第3引数以降：追加したい要素
*/

//配列の要素を削除する場合
[対象の配列].splice([削除する配列のindex],[削除する要素の数]);

//配列の要素を追加する場合
//第２引数、削除する要素はないため０にする
[対象の配列].splice([追加する配列のindex],0,[追加する要素1],[追加する要素2]...);

使用例

例）配列の３番目の要素を削除して、新しい要素を入れ直したい

//'がきぐげご'を'さしすせそ'に変更
var array = ['あいうえお','かきくけこ','がぎぐげご','たちつてと'];
array.splice(2,1,'さしすせそ');

console.log(array);//['あいうえお','かきくけこ','さしすせそ','たちつてと']

every

配列の各要素に対して指定した条件のすべてが一致した場合にtrueを返してくれるメソッド。
配列内の要素が1つでも一致しない場合はfalseを返す。

var array = [1,10,100]

array.some(value => value < 1000);
//return true
//配列の各要素、全てが1000より小さい数字のため

array.some(value => value < 10)
//return false
//配列内に10より大きい数字が存在するため

some

配列の各要素に対して指定した条件が1つでも一致した場合にtrueを返してくれるメソッド。

var array = [1,10,100]

array.some(value => value > 99);
//return true
//1つの要素は99以上であるため

Object.assing

第1引数に指定したオブジェクトに第2引数以降をコピーしてくれるメソッド。
第1引数に無名オブジェクトを指定することで、第2引数以降のコピー内容を新しいオブジェクトとして作成することができる。

let obj1 = { a:1, b:2 };
let obj2 = Object.assign({},obj1);
//　{ a:1, b:2 }

詳細はこのページをみてもらうといいかも。
いろんなコピーの方法があるみたいです。
https://qiita.com/SE-studying-now/items/ecdbc0317ba1806aed61

map

配列の各要素1つずつに対して「コールバック関数」を実行し、その結果を新しい配列として返すことができるメソッド。
元の配列は操作（変更）することはできない。新しい配列を作るのがお仕事。

let array = [1,2,3,4];

let result = array.map(function(value) {
    // 【コールバック関数】各要素に適用したい処理を記載
    // 今回は配列内の各要素を2倍にする
    return value * 2;
});
// result = [2,4,6,8]
// arrayの各要素が2倍され、resultという新しい配列に格納された

3つの引数を取得することも可能

[配列データ].map(function(value, index, array) {
    // value: 配列の値
    // index: 配列のインデックス番号
    // array: 現在処理してる配列
});

2つ目の引数indexを利用すれば、偶数の配列番号の値だけ2倍にする等ができる。

let array = [1,2,3,4];

array.map(function(value, index, array) {
    if(index % 2 === 0 ) {
        return value * 2;
    } else {
        return value;
    }
});

3つ目の引数arrayを利用すれば、元の配列データを操作（変更）することができる。
例えば、元の配列を2倍にしたい場合↓。

let base_array = [1,2,3,4];

base_array.map(function(value, index, array) {
    // arrayには現在処理している配列が格納されているので、
    // array = base_array　になる。
    array[index] = value * 2;
});
// base_array = [2,4,6,8];

indexとarrayを利用して、元の配列データ（base_array）にアクセスしている。