ES6 JavaScript 函数详解

时间:2020-7-28 作者:admin


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)
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。