JavaScript函数基础

一. 定义和调用函数

JavaScript的函数也是一个对象

// 定义方式1：
// 定义的 abs() 函数实际上是一个函数对象，而函数名abs可以视为指向该函数的变量。
function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}


// 定义方式2：
// function (x) { ... }是一个匿名函数，它没有函数名。
// 但是，这个匿名函数赋值给了变量abs，所以通过变量 abs 就可以调用该函数。
var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};


// 调用函数
abs(10); // 返回10
abs(-9); // 返回9


// JavaScript允许传入任意个参数而不影响调用
abs(10, 'blablabla');          // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9


// 判断类型的函数
function abs(x) {
    if (typeof x !== 'number') {
        throw 'Not a number';
    }
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

1.1 arguments参数

它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array。即便函数不定义任何参数，函数内部也能拿到传入到函数的值。

• 实际上arguments最常用于判断传入参数的个数。

function foo(x) {
    console.log('x = ' + x);
    for (var i=0; i<arguments.length; i++) {
        console.log(i + ' ' + arguments[i]);
    }
}
foo(10, 20, 30);

x = 10
0 10
1 20
2 30

1.2 rest参数

rest参数可以获取额外传入的其他参数，rest参数只能写在最后，前面用...标识

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

1.3 函数返回值

• 由于 JavaScript 会在默认自动加上一个分号，所以下面的写法是错误

function foo() {
    return
        { name: 'foo' };
}

foo(); // undefined

• 正确的写法为

function foo() {
    return { // 这里不会自动加分号，因为{表示语句尚未结束
        name: 'foo'
    };
}
foo(); // { name: 'foo' }


function foo() {
    return { name: 'foo' };
}
foo(); // { name: 'foo' }

二. 高阶函数

一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。

2.1 map/reduce/filter

// map
function pow(x) {
    return x * x;
}
var arr = [1, 2, 3, 4];
arr.map(pow);    // [1, 4, 9, 16]
arr.map(String); // ['1', '2', '3', '4']


// reduce
var arr = [1, 2, 3, 4];
arr.reduce(function (x, y) {
    return x + y;
});  // 10


// filter
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var res = arr.filter(function (x) {
    return x % 2 !== 0;
});
res;  // [1, 5, 9, 15]

2.2 sort

Array 的 sort() 方法默认把所有元素先转换为 String 再排序，所以通常不是我们想要的结果，所以需要自定义排序。

• 注意：sort()方法会直接对Array进行修改，它返回的结果仍是当前Array

// 正序排序
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
});
console.log(arr); // [1, 2, 10, 20]


// 倒序排序
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return 1;
    }
    if (x > y) {
        return -1;
    }
    return 0;
}); // [20, 10, 2, 1]

三. 箭头函数

箭头函数相当于匿名函数，并且简化了函数定义。

// 定义1
var fn1 = x => x * x;


// 定义2
var fn2 = (x, y) => x * x + y * y


// 定义3
var fn3 = x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}

// 定义4：无参
var fn4 = () => 3.14


// 定义5：返回对象，注意返回值要用 () 包含
var fn5 = x => ({ foo: x })

四. 生成器 generator

JavaScript的生成器和Python的生成器类似，用法也类似。

• generator由 function* 定义（注意多出的*号），并且，除了return语句，还可以用yield返回多次。

function* fib(max) {
    var
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n ++;
    }
    return;
}
for (var x of fib(10)) {
    console.log(x);         // 依次输出0, 1, 1, 2, 3, ...
}