ES6 JavaScript 函数详解

1、函数概念

1.1 函数语法

function 函数名（参数列表）｛
    函数体;
    return 返回值;
｝

1.1.1 示例

function add(x, y) {
    return x + y;
};

console.log(add(1, 2))

Info: Start process (下午6:24:17)
3
Info: End process (下午6:24:17)

1.2 函数表达式

• 使用表达式来定义函数，表达式中的函数名可以省略
• 如果这个函数名不省略，也只能用在此函数内部

1.2.1 匿名函数

const add = function(x, y) {
    return x + y;
};

console.log(add(3, 6));

Info: Start process (下午6:31:51)
9
Info: End process (下午6:31:51)

1.2.2 有名字的函数表达式-1

const sub = function fn(x, y) {
    return x - y;
};

console.log(sub(3, 2))

Info: Start process (下午6:34:53)
1
Info: End process (下午6:34:53)

1.2.3 有名字的函数表达式-2

const { fn } = require("jquery");

const sub = function fn(x, y) {
    return x - y;
};

console.log(fn(3, 2))

执行报错，fn 只能用在函数内部

1.2.4 有名字的函数表达式-3（递归函数）

const sum = function _sum(n) {
    if (n === 1) {
        return n;
    }
    return n + _sum(--n);   // _sum only uses inside the function
}

console.log(sum(9))

Info: Start process (下午6:39:27)
45
Info: End process (下午6:39:28)

1.3 函数/匿名函数/函数表达式的差异

• 函数和匿名函数，本质上都是一样的，都是函数对象，只不过函数有自己的标识符—函数名，匿名函数需要借助其它的标识符而已
• 区别在于：函数会声明提升，函数表达式不会

console.log(add(3, 5))   // Output is normal

function add(x, y) {
    return x + y;
};

console.log(sub(5, 3))    // sub is not defined

const sub = function(x, y) {
    return x - y; 
};

1.4 高阶函数

• 高阶函数：函数作为参数或返回一个参数

1.4.1 示例-计数器 counter

const counter = function() {
    let c = 0;
    return function() {
        return ++c;
    };
};

const c = counter()
console.log(c())
console.log(c())
console.log(c())
console.log(c())
console.log(c())

Info: Start process (下午7:27:43)
1
2
3
4
5
Info: End process (下午7:27:43)

1.4.2 示例-计数器 counter（生成器版）

const counter = ( function * () {
    let c = 1;
    while (true) {
        yield c++
    }
})()

console.log(counter.next().value)
console.log(counter.next())
console.log(counter.next().value)
console.log(counter.next())
console.log(counter.next().value)

Info: Start process (下午7:33:22)
1
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 4, done: false }
5
Info: End process (下午7:33:22)

2、函数参数

2.1 普通参数

• 一个参数占一个位置，支持默认参数
• JS 中并没有 Python 中的关键字传参
• JS 只做参数位置的对应
• JS 并不限制默认参数的位置
• 建议：默认参数写到后面，这是 一个好的习惯

const add = (x, y) => x + y
console.log(add(4, 5))

const add2 = (x=6, y) => x + y
console.log(add2())          // NaN  add2(undefined, undefined)
console.log(add2(1))         // NaN  add2(1. undefined)
console.log(add2(y=3, z=2))  // 5 add2(3, 2)
console.log(add2(y=3))       // NaN  add2(3, undefined)

Info: Start process (下午12:53:07)
9
NaN
NaN
5
NaN
Info: End process (下午12:53:07)

2.2 可变参数（rest parameters 剩余参数）

• JS 中使用 … 表示可变参数（Python 用 * 收集多个参数）

const sum = function (...args) {
    let result = 0;
    for (let x in args) {
        result += args[x];
        console.log(args[x])
    };
    return result;
};

console.log(sum(1, 2, 3, 4, 5))

Info: Start process (下午1:15:24)
1
2
3
4
5
15
Info: End process (下午1:15:24)

2.3 arguments 对象

(function (p1, ...args) {
    console.log(p1);
    console.log(args);
    console.log('='.repeat(55));
    console.log(arguments);
    for (let x in arguments) { 
        console.log(x, arguments[x]);
    };
})('abc', 1, 3, 5)

Info: Start process (下午1:25:17)
abc
[ 1, 3, 5 ]
=======================================================
[Arguments] { '0': 'abc', '1': 1, '2': 3, '3': 5 }
0 abc
1 1
2 3
3 5
Info: End process (下午1:25:17)

• 函数的所有参数会被保存在一个 arguments 的 键值对 对象中
• ES6 之前，arguments 是唯一实现 可变参数的
• ES6 开始后，不推荐，建议使用可变参数，为了兼容而保留
• 注意：使用箭头函数时，取到的 arguments 不是我们想要的

((x, ...args) => {
    console.log(args);         // 数组
    console.log(x);
    // console.log(arguments);  // 不是传入的值
})(...[1, 2, 3]);

Info: Start process (下午1:28:41)
[ 2, 3 ]
1
Info: End process (下午1:28:41)

2.4 参数解构

• 和 Python 类似， JS 提供了参数解构，依然使用了 … 符号来解构
• JS 解构后的值的个数不需要和参数个数对应

const add = (x, y) => {console.log(x, y); return(x + y)};

console.log(add(...[100, 200]))
console.log(add(...[100, 1, 2, 3]))
console.log(add(...[555]))

Info: Start process (下午1:32:10)
100 200
300
100 1
101
555 undefined
NaN
Info: End process (下午1:32:10)

3、函数返回值

• Python 中可以使用return 1, 2返回多值，本质上也是一个值，就是一个元组
• JS 中返回多值的话，只会返回最后一个值

const add = (x, y) => {return x, y};
const add2 = (x, y, z) => {return x, y, z};

console.log("add:", add(1, 2))
console.log("add2:", add2(1, 2, 3))

Info: Start process (下午1:38:28)
add: 2
add2: 3
Info: End process (下午1:38:28)

3.1 表达式的值

• 类 C 的语言，都有一个概念 — 表达式的值
• 赋值表达式的值：等号右边的值
• 逗号表达式的值：类 C 语言，都支持逗号表达式，逗号表达式的值，就是最后一个表达式的值

a = (x = 5, y = 6, true)
console.log(a)

b = (123, true, z = 'test');
console.log(b)

function c() {
    return x = 5, y = 6, true, 'ok'
};
console.log(c())

console.log((1, 2, 3))

Info: Start process (下午1:53:44)
true
test
ok
3
Info: End process (下午1:53:44)