函式陈述式与函式表达式差异

1. 函式陈述式 :

function num(x) {
    return x * x;
}

图一.

图二.

2. 函式表达式 :

const num2 = function(y) {
    return y * y;
}

图三.

图四.

由上面四张图可看出差异:

1. 函式'表达式'必须做出"宣告变数"才可以执行 console.log( )。
2. 函式'陈述式'在执行 function 时会自动提取到上方，因此 console.log( ) 先後顺序不影响。

箭头函式

1. 观念同函式表达式，都需要作出宣告变数。
2. 基本语法 :
   宣告变数 + 变数名称 = ( 参数 ) =>{ return }

//
const num3 = (z) =>{
    return z+3;
}

3. 函式表达式与箭头函示比较 :

//函式表达式
const num4 = function(y) {
    return y * y;
}

//箭头函式
const num5 = (z) =>{
    return z * z;
}

箭头函式缩写

1. 如果只有搭配 return 时才可以使用。
2. 如果只有一个参数，可以省略括号(）。
3. 如果没有参数，则不可省略括号（）。

//原始写法
const num6 = (z) =>{
    return z * z;
}    
//因为只有搭配 return 可缩写
const num6 = (z) => z * z;
//再加上只有一个参数可以在缩写
const num6 = z => z * z;

//如果没有参数写法
const num7 = () => ${a};   //${a}为变数

4. 可以搭配 map 、 filter 使用。

const data = [1,5,9,12];
//原始 function 写法
const newData = data.map(function(item){
    return item+7;
})
//使用箭头函式加缩写
const newData = data.map(item => item+7)

今天就到此结束了。