Day-16　回呼函式、高阶函式与IIFE

回呼函式

所谓回呼函式（callback function）与一般函式基本相同，差别在於它须「具一定条件後」，才会「被动执行」：

1. 达成条件，然後执行的函式。
2. 一个函式执行完，再去执行另一个函式。

实际上，这就是「把一个函式当作另一个函式」使用的参数，如前文所提到的，包括时间控制在内**「高阶函式」**。

如下例，把 a 函式传入 b 函式，稍後呼叫之：

function b(a) {
    	if (typeof () == “function” ) {
return a()}	
}

const a = () => {
    return console.log("123")
}

b(a)    //  回传 123

若想要控制复数函式间的执行顺序（如：解决setTimeout造成的顺序异动），也能活用回呼函式。意者可参考：
https://medium.com/appxtech/%E4%BB%80%E9%BA%BC%E6%98%AFcallback%E5%87%BD%E5%BC%8F-callback-function-3a0a972d5f82

更多高阶函式

map 新阵列

对每个元素做事情，并收集成一个新阵列，回传值 = 新阵列。例：

• 把大於 3 的数字乘以 3 倍

const lists = [4, 2, 1, 4, 6, 8, 7]
	let result = lists.map(x => {
        if (x > 3) {
            return x * 3
        } else {
            return x
    }    
})
console.log(result)

• 全部x乘以2

console.log (lists.map ( (x) => x * 2) )

• 全部x乘以2（宣告变数result）

let result = (lists.map ( (x) => x * 2) )
console.log (result)

forEach 回圈

对每个元素做事情，不会变成新阵列，回传值 = undefined。
针对数字加减时需要（不能用回圈）。例：

• 判定回圈heroes最大值

let top = 0
Heroes.forEach((hero) => {
    if (hero.power > top){
	    top=hero.power
    }
 })
console.log(top);

filter 过滤器

条件成立的就留下来，并收集成一个新阵列，回传值 = 新阵列。
回传值只要是true就会保留，但索引值0是false。例：

• 选出大於3的数字乘以2

const lists = [4, 2, 1, 4, 6, 8, 7]
let a = lists.filter( (n) => n > 3)
	.map((n) => n*2)
console.log(a)

reduce 归纳

归纳、简化。常用来加总数值。
通常设acc预设值为0。若不设预设值，则取阵列第一个当acc，第二个当cv的开头。

具体上，将阵列的每个元素传到 callback 进行运算，并回传一个单一值。

acc=累加值、currentValue=目前值。

const lists = [4, 2, 1, 4, 6, 8, 7]　//每回的目前值
.reduce( (acc, currentValue) => {
    return 1　//每圈开始的累加值=下一轮的acc。若设return acc + currentValue 就会累加。
} , 0 ) //第一圈的累加值起始值0

宣告reducer的写法:

function reducer (acc, currentValue) {
	return acc + currentValue
}

let r = lists.reducer(reducer, 0)
console.log(r)

注意：

• reduce 本身及callback都有两个参数要带入。
• 起始值没给的话，会直接将第一个数当成起始值，currentValue 会从第二个数开始拿。
• 每一轮结束後的 return 值是下一轮的 累加值acc。

立即呼叫函式表达式 IIFE

IIFE全名「Immediately Invoked Function Expression」，这是一种不用宣告，立即定义，马上执行的函式。

具体写法，是在函式尾端加上一组小括号 () ，可以带引数进去，一并呼叫。如：

(function() {} )()

此外，jQuery 是个大 IIFE，意者可再深入研究之。