関数型 - ntuf/Tips GitHub Wiki

■書き換え
a => a * 2
a => { return a * 2 }
function(a){ return a * 2 }

・引数が複数なら括弧で囲む
(a, b) => a + b
(a, b) => { return a + b }
function(a, b){ return a + b }

■map
map() メソッドは、
与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。写像

const arr = [1, 2, 3];
const ret1 = arr.map(e => e * 2);
const ret2 = arr.map(e => { return e * 2 })
const ret3 = arr.map(function(e) {
return e * 2;
});
const ret4 = arr.map((element, index, array) => element * 2);
const ret5 = arr.map((element, index, array) => { return element * 2 })
const ret6 = arr.map(function(element, index, array) {
return element * 2;
});
console.log(ret1); // > Array [2, 4, 6]
console.log(ret2); // > Array [2, 4, 6]
console.log(ret3); // > Array [2, 4, 6]
console.log(ret4); // > Array [2, 4, 6]
console.log(ret5); // > Array [2, 4, 6]
console.log(ret6); // > Array [2, 4, 6]
※(element, index, array)の指定は
変数名がどうあれ第一引数がvalue,第二引数がindex,第三引数がarray全体が入ってくる

var properties = [“a”,“c”];// mapを使う配列はこっち
var dic = {
“a”: “xxx”,
“b”: “yyy”,
“c”: “zzz”
}
properties.map(function(value) {
// functionである必要がある。thisの挙動の違いがあるため、アロー関数では同じ動きをしない
console.log(this[value])
}, dic )// 第二引数にオブジェクトdicを設定(callback を実行するときに this として使う値を第二引数として指定できる)
// > “xxx”
// > “zzz”
//https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

■foreach
const arr = [1, 2, 3];
arr.forEach(e => { console.log(e) })
> 1
> 2
> 3

■filter
引数として与えられたテスト関数を各配列要素に対して実行し、
それに合格したすべての配列要素からなる新しい配列を生成します。

const arr = [1, 2, 3];
const ret1 = arr.filter(e => e >= 2);
const ret2 = arr.filter(e => { return e >= 2 })
const ret3 = arr.filter(function(e) {
return e >= 2;
});
const ret4 = arr.filter((element, index, array) => element >= 2);
const ret5 = arr.filter((element, index, array) => { return element >= 2 })
const ret6 = arr.filter(function(element, index, array) {
return element >= 2;
});
console.log(ret1); // > Array [2, 3]
console.log(ret2); // > Array [2, 3]
console.log(ret3); // > Array [2, 3]
console.log(ret4); // > Array [2, 3]
console.log(ret5); // > Array [2, 3]
console.log(ret6); // > Array [2, 3]
※(element, index, array)の指定は
変数名がどうあれ第一引数がvalue,第二引数がindex,第三引数がarray全体が入ってくる

■reduce
reduce() は配列の各要素に対して（引数で与えられた）reducer 関数を実行して、
単一の値にします。
map,filter は配列が返ってくるが、reduceは計算結果を一個返す

const arr = [1, 2, 3];
const ret1 = arr.reduce((a, c) => a + c);
const ret2 = arr.reduce((a, c) => { return a + c });
const ret3 = arr.reduce(function(a, c){ return a + c });
const ret4 = arr.reduce((accumulator, currentValue, index, array) => accumulator + currentValue);
const ret5 = arr.reduce((accumulator, currentValue, index, array) => { return accumulator + currentValue })
const ret6 = arr.reduce(function(accumulator, currentValue, index, array) {
return accumulator + currentValue;
});
console.log(ret1); // 6
console.log(ret2); // 6
console.log(ret3); // 6
console.log(ret4); // 6
console.log(ret5); // 6
console.log(ret6); // 6

※(accumulator, currentValue, index, array)の指定は
変数名がどうあれ第一引数が合計値,第二引数がの値,第二引数がindex,第三引数がarray全体が入ってくる

const arr = [1, 2, 3];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(arr.reduce(reducer)); // 6
//第二引数を使用する（初期値として設定できる
//https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce）
console.log(arr.reduce(reducer, 4)); // 10
console.log(arr.reduce((a,b) => a + b , 4)); // 10
console.log(arr.reduce( function(a,b){ return a + b } , 4)); // 10
console.log(arr.reduce( function(a,b){ return a * b } , 4)); // 24

⚠️ **GitHub.com Fallback** ⚠️