ES6之函数

2019-12-14  本文已影响0人  27亿光年中的小小尘埃

带默认参数的函数

在 ES5 或更早的版本中，你可能会使用下述模式来创建带有参数默认值的函数：

function makeRequest(url, callback) {
    callback = callback || function() {};
    // 函数的剩余部分
}

ES6 能更容易地为参数提供默认值，它使用了初始化形式，以便在参数未被正式传递进来时使用。例如：

function makeRequest(url, callback = function() {}) {
// 函数的剩余部分
}

在函数声明中能指定任意一个参数的默认值，即使该参数排在未指定默认值的参数之前也是可以的。例如，下面这样是可行的：

function makeRequest(url, timeout = 2000, callback) {
    // 函数的剩余部分
}

在本例中，只有在未传递第二个参数、或明确将第二个参数值指定为 undefined 时，
timeout 的默认值才会被使用，例如：

// 使用默认的 timeout
makeRequest("/foo", undefined, function(body) {
    doSomething(body);
});
// 使用默认的 timeout
makeRequest("/foo");
// 不使用默认值
makeRequest("/foo", null, function(body) {
    doSomething(body);
});

参数默认值最有意思的特性或许就是默认值并不要求一定是基本类型的值,可以是表达式

剩余参数

剩余参数（ rest parameter ）由三个点（...）与一个紧跟着的具名参数指定，它会是包
含传递给函数的其余参数的一个数组

function pick(object, ...keys) {
    let result = Object.create(null);
    for (let i = 0, len = keys.length; i < len; i++) {
        result[keys[i]] = object[keys[i]];
    }
    return result;
}

剩余参数的限制条件：

函数构造器的增强能力

Function 构造器允许你动态创建一个新函数，但在JS中并不常用。传给该构造器的参数都是字符串，它们就是目标函数的参数与函数体，这里有个范例：

var add = new Function("first", "second", "return first + second");
console.log(add(1, 1)); // 2

扩展运算符

与剩余参数关联最密切的就是扩展运算符。剩余参数允许你把多个独立的参数合并到一个数组中；而扩展运算符则允许将一个数组分割，并将各个项作为分离的参数传给函数。

考虑一下 Math.max() 方法，它接受任意数量的参数，并会返回其中的最大值。这里有个此方法的
简单用例：

let values = [25, 50, 75, 100]
console.log(Math.max.apply(Math, values)); // 100

ES6 的名称属性

ES6 中所有函数都有适当的 name 属性值。

new.target 元属性

元属性指的是“非对象”（例如 new ）上的一个属性，并提供关联到它的目标的附加信息。当函数的 [[Construct]] 方法被调用时， new.target 会被填入 new 运算符的作用目标，该目标通常是新创建的对象实例的构造
器，并且会成为函数体内部的 this 值。而若 [[Call]] 被执行， new.target 的值则会是undefined 。

因此可以用new.target来检测函数是调用构造函数创建还是只是函数调用

function Person(name) {
    if (typeof new.target !== "undefined") {
        this.name = name; // 使用 new
    } else {
        throw new Error("You must use new with Person.")
    }
}
var person = new Person("Nicholas");
var notAPerson = Person.call(person, "Michael"); // 出错！

块级函数

ES6可以在代码块内部声明一个函数。示例如下：

if (true) {
    // 在 ES5 会抛出语法错误， ES6 则不会
    function doSomething() {
    // ...
    }
}

箭头函数

ES6 最有意思的一个新部分就是箭头函数（ arrow function ）。箭头函数正如名称所示那样
使用一个“箭头”（ => ）来定义，但它的行为在很多重要方面与传统的 JS 函数不同：

箭头函数语法

箭头函数的语法可以有多种变体，取决于你要完成的目标。所有变体都以函数参数为开头，
紧跟着的是箭头，再接下来则是函数体。参数与函数体都根据实际使用有不同的形式。例
如，以下箭头函数接收单个参数并返回它

var reflect = value => value;
// 有效等价于：
var reflect = function(value) {
    return value;
};

当箭头函数只有单个参数时，该参数可以直接书写而不需要额外的语法；接下来是箭头以及
箭头右边的表达式，该表达式会被计算并返回结果。即使此处没有明确的 return 语句，该
箭头函数仍然会将所传入的参数返回出来。

如果需要传入多于一个的参数，就需要将它们放在括号内，就像这样

var sum = (num1, num2) => num1 + num2;
// 有效等价于：
var sum = function(num1, num2) {
    return num1 + num2;
};

当你想使用更传统的函数体、也就是可能包含多个语句的时候，需要将函数体用一对花括号
进行包裹，并明确定义一个返回值，正如下面这个版本的 sum() ：

var sum = (num1, num2) => {
    return num1 + num2;
};
// 有效等价于：
var sum = function(num1, num2) {
    return num1 + num2;
};

创建立即调用函数表达式

let person = ((name) => {
    return {
    getName: function() {
        return name;
    }
    };
})("Nicholas");
console.log(person.getName()); // "Nicholas"

尾调用优化

在 ES6 中对函数最有趣的改动或许就是一项引擎优化，它改变了尾部调用的系统。尾调用（tail call ）指的是调用函数的语句是另一个函数的最后语句，就像这样：

function doSomething() {
    return doSomethingElse(); // 尾调用
}

尾部调用就是在函数的尾部返回一个纯函数，引擎后台能自动对其优化
尾调用优化允许某些函数的调用被优化，以保持更小的调用栈、使用更少的内存，并防止堆、栈溢出。

上一篇 下一篇

猜你喜欢

热点阅读