函数篇

ES6 2020-08-23 817

Es6对于函数的扩展比较多,主要列举以下几点:

1.支持参数设置默认值

2.rest参数,即(...)

3.箭头函数

4.尾调用

1.参数默认值

ES6以前常用以下方式指定默认值,但是有个问题就是如果参数本身是false那么这种方式就失去作用了,这时你就要判断类型是不是undefined

ES6之前的写法:

function func(x, y) {
    y = y || 1;
    console.log(y)
}

参数默认值:

function func(x, y=1) {
    console.log(y)
}

参数默认值可以与解构赋值结合(内容比较复杂,只写使用)

function func({x=5, y=1}) {
    console.log(x, y)
}
func({}); // 5 1
func({x:6}) // 6, 1
func({x:8, y:1}) // 8  1
func() // error

一个有意思的问题:

function func({x=5, y=1} = {}) { // 注意{}才是参数,{x=5, y=1}为解构默认值
    console.log(x, y)
}
function func0({x, y} = {x: 0, y: 0}){ // {x: 0, y: 0}为参数
    console.log(x, y)
}
func(); // 5 1
func0(); // 0 0
// x 有值
func({x:6}); // 6 1
func0({x: 1}); // 1 undefined
// x, y都无值
func({}); // 0 0
func0({}); // undefined undefined

参数设置默认值后,其后的参数无效

函数设置默认值后,length属性失真。即2个参数,但只返回1

2.rest参数

我比较喜欢将它与python中*args比较,可以理解为1当n使用

let a = [1, 2, 3, 4];
function func(...args){
    console.log(args);
}
func(a); // [ [ 1, 2, 3, 4 ] ]

同样该参数同样只能是参数中的最后一个

3.函数名有name属性,可以直接获取到函数名

function func(...args){
    console.log(args);
}
console.log(func.name); // func

4.箭头函数

var f = (x) => console.log(x);
//        等同于
var f = function(x) {
    console.log(x);
};

如果代码块多于1条语句,建议使用大括号括起

var f = (x) => console.log(x);

如果箭头函数返回一个对象,那么对象外使用括号

var f3 = item => ({x: item, y: 1});
console.log(f3(6)); // {x: 6, y: 1}

箭头函数支持解构

var f4 = ({x, y}) => x + y;
console.log(f4({x: 6, y:7})); // 13

箭头函数可以简化回调

console.log([1, 2, 3].map(a => a*a)); // [ 1, 4, 9 ]

箭头函数使用注意事项:

函数体内的this对象就是定义时所在的对象,而不是使用时所在对象

不可以当作构造函数。也就是不可以使用new命令

不可以使用arguments对象,该对象在函数体内不存在,可以使用rest参数替代

不可以使用yield命令,英文箭头函数不能当作Generator函数。

function f1() {
    this.id = 1;
    this.obj = () => console.log(this.id);
}
const ff = new f1(); // f1为定义时所在对象,因此箭头函数的this执行f1
console.log(ff.obj()); // 1

函数绑定运算符为::,双冒号左边为对象,右边为函数。该运算符会自动将左边对象作为上下文环境(即this)绑定到右边。

foo::bar;
等于 bar.bind(foo)
foo::bar(...args)
等同于 bar.bind(foo, args)

如果双冒号左边为空,右边是对象的方法,即等于该方法绑定到该对象上
var m = obj::obj.foo
等于 var m = ::obj.foo

5.函数尾调用

函数最后一步调用另一个函数,不能添加各种奇怪的操作,如调用函数同时+1,直接调用函数(这时最后一步为return undefined)

正确写法:

function f5(x) {
    if (x === 5)
        return f6();
    return f7()
}

尾递归

对于尾递归来说,只存在一个调用栈

普通递归:

function fib(n) {
    if(n===1){
        return n;
    }
    return n * fib(n - 1);
}

算法复杂度为O(n)

尾递归:

function fib(n, total=1) {
    if(n===1){
        return total;
    }
    return fib(n - 1, n * total);
}

复杂度O(1)

标签:ES6

文章评论

评论列表

已有0条评论