JS 基础篇(四)：JS中的函数

目录：

• 函数的参数
• 函数的返回值
• 立即执行函数
• 箭头函数

简单介绍下关于JS函数使用过程中的一些情况。

一、函数的参数

1、调用函数时没有提供足够的参数，缺少的参数将会被underfined替代。

function add(a,b){
    console.log("a:"+a); // a:1
    console.log("b:"+b);// b:underfined
    return a + b;
}
console.log(add(1)); //NaN 1和underfined相加为NaN

2、调用参数时，给予了超过要求个数的参数，多余的将会被忽略。

function add(a,b){
    console.log("a:"+a);
    console.log("b:"+b);
    return a + b;
}
console.log(add(2,3,8));//5  第三个参数“8”时多余的，被忽略了。

注：函数实际上是访问了函数体中一个名为 arguments 的内部对象，这个对象就如同一个类似于数组的对象一样，包括了所有被传入的参数。

二、函数的返回值

1、在函数中return 语句在返回一个值并结束函数。如果没有使用 return 语句，或者一个没有值的 return 语句，JavaScript 会返回 undefined。

function returnNone1(){

}
console.log(returnNone1());//underfined

function returnNone2(){
    return ;
}
console.log(returnNone2());//underfined

三、立即执行函数

1、问题描述：
通常我们在声明函数之后，通过在后面添加括号进行执行，如下代码所示：

var foo = function(){ /* code */}
foo();

那么这个是不是意味着我们在声明函数的时候直接在它后面添加括号，它就可以立即执行了，比如这样：

function(){ /* code */ }();

然而运行时会报错，因为在解析器解析全局的function或者function内部function关键字的时候，默认是认为function声明，而不是function表达式。

2、解决方案：
只要我们让解析器知道我们这个地方代表着是function表达式就行了。
如下所示：

//1、使用“（）”
(function () { /* code */ } ()); // 推荐使用这个
(function () { /* code */ })(); // 但是这个也是可以用的

//2、由于括弧()和JS的&&，异或，逗号等操作符是在函数表达式和函数声明上消除歧义的，所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了。
var i = function () { return 10; } ();
true && function () { /* code */ } ();
0, function () { /* code */ } ();

// 3、如果你不在意返回值，或者不怕难以阅读，你甚至可以在function前面加一元操作符号。
!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();

//4、使用new关键字,也可以用
new function () { /* code */ }
new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧()

四、箭头函数

1、箭头函数定义
ES6标准新增了一种新的函数：Arrow Function（箭头函数）
定义为：

x => x * x

//相当于：

function (x) {
    return x * x;
}

2、箭头函数格式
箭头函数相当于匿名函数，并且简化了函数定义。
箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ … }和return都省略掉了。
还有一种可以包含多条语句，这时候就不能省略{ … }和return：

x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}

3、箭头函数参数
如果参数不是一个，就需要用括号()括起来：

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

4、箭头函数返回值

//如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错：
// SyntaxError:
x => { foo: x }

//因为和函数体的{ ... }有语法冲突，所以要改为：
// ok:
x => ({ foo: x })

注意：箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。箭头函数完全修复了this的指向，this总是指向词法作用域。