Array.prototype.filter() とか、配列操作時の３つの引数が理解できない

Array.prototype.filter() とか、配列操作時の３つの引数が理解できない:

実際に記事として書いていきながら検証していけば、理解も深まると思ったのでやって見ます。

---

僕の思い

いつまでもforだけでやりたくない。
filterやmapって書いてあるだけで、意図もわかりやすいので使いこなしたい。
元々の配列は壊さず、新しく配列を作って返してくれるのが嬉しい!

3つの引数？え？

---

引数が3使えるって意味不明

それぞれがどのような役割なのかがわからないので、順番に検証して確かめていきます。

1つ目の引数は何をしているの？

const filtered = [1, 2, 3, 4, 5].filter((element, index, array) => { 
    console.log(element) //1つ目の引数 
    return element >= 4; 
    }); 
console.log(filtered)//結果 

結果

1 
2 
3 
4 
5 
 
[4, 5] 

なるほど、元の配列の要素が１個づつ順番に吐き出されるわけですね。

結果として、4未満のものは全て削除された新しい配列が返りました

2つ目の引数は何をしているの？

const filtered = [1, 2, 3, 4, 5].filter((element, index, array) => { 
    console.log(index)//2つ目の引数 
    return 3 === index; 
    }); 
console.log(filtered)//結果 

結果

0 
1 
2 
3 
4 
 
[4] 

なるほど、filterにかけた配列の要素は5つあるから、0~4までを順番に1つづつ当てはめてるわけですね。

結果として [4]となっているのは、元の配列の中の、0から数えて3番目の数字が返ったからですね。

3つ目の引数は何をしているの？

const filtered = [1, 2, 3, 4, 5].filter((element, index, array) => { 
    console.log(array)//3つ目の引数 
    return 3 === index; 
    }); 
console.log(filtered)//結果 

結果

[1, 2, 3, 4, 5] 
[1, 2, 3, 4, 5] 
[1, 2, 3, 4, 5] 
[1, 2, 3, 4, 5] 
[1, 2, 3, 4, 5] 
 
[4] 

なるほど、元の配列が入っているんですね。

元の配列の要素は5つあるから、5回元の配列が吐き出されたのか。

配列を操るために必要な引数の使い方を知る事ができました。

---

React TODOリストの削除ボタンサンプル

作業を終えてデリートボタン押した時に

ボタンを押した要素のindex番号以外の要素を残して吐き出す事ができる。

onPressDelete(arg) { //押された番号を持った関数 
        this.setState({ 
            //条件にあうものだけを抽出して再描画。 
            todos: this.state.todos.filter((t, i) =>i !== arg), 
        }) 
    } 

間違っていたり、参考になるサイトやソース、リポジトリ等あれば教えてくださいませ！！