JavaScript ES6的函数拓展

下面是关于JavaScript ES6的函数拓展的详细攻略。

什么是函数拓展

函数拓展是ECMAScript 6（简称ES6）中引入的一些新特性，可以让我们编写更简洁、易读、易维护的函数代码，并为函数提供了更多的灵活性和可扩展性。

ES6函数拓展的特点

ES6函数拓展具有以下几个特点：

1. 箭头函数
2. 默认参数
3. 剩余参数
4. 扩展运算符

接下来我们将分别讲解这些特点，并提供相应的代码示例说明。

箭头函数

箭头函数是ES6中最令人激动的函数拓展之一。它使函数声明更简洁、清晰，并且允许我们以一种新的、更短的方式编写函数代码。

箭头函数的语法如下：

(param1, param2, …, paramN) => { statements }

箭头函数使用箭头“=>”来连接函数的参数和函数体。

下面是一个简单的箭头函数示例：

// ES5写法
var x = function(x, y) {
  return x + y;
};

// ES6写法
const x = (x, y) => x + y;

当函数内只有一个表达式时，可省略大括号和return语句。

另外，箭头函数为函数绑定了当前执行上下文中的this，可以避免this指向被错误绑定的问题。

默认参数

默认参数是ES6中的一个新特性。它允许我们为函数的参数设置默认值，当函数被调用时，如果没有为参数传递值，则会自动使用默认值。

默认参数的语法如下：

function functionName(param1 = defaultValue1, param2, …, paramN = defaultValueN) {
    //函数体
}

下面是一个简单的默认参数示例：

// ES5写法
function multiply(x, y) {
    x = (typeof x !== 'undefined') ? x : 1;
    y = (typeof y !== 'undefined') ? y : 1;
    return x * y;
}

// ES6写法
function multiply(x = 1, y = 1) {
    return x * y;
}

console.log(multiply());  // 1
console.log(multiply(3)); // 3
console.log(multiply(3, 4)); // 12

剩余参数

剩余参数是ES6中另一个有用的新特性。它允许我们为参数列表设置一个“接收剩余参数”的变量，这个变量接收函数调用时传递的所有参数，可以被函数内部使用。

剩余参数的语法如下：

function functionName(param1, param2, ..., ...restParams) {
    //函数体
}

其中，“restParams”变量名是任意的，用来接收剩余参数。

下面是一个简单的剩余参数示例：

// ES5写法
function multiply(multiplier, ...theArgs) {
    return theArgs.map(function (element) {
        return multiplier * element;
    });
}

// ES6写法
function multiply(multiplier, ...theArgs) {
    return theArgs.map(element => multiplier * element);
}

console.log(multiply(2, 1, 2, 3)); // [ 2, 4, 6 ]

扩展运算符

扩展运算符是ES6中的另一个新特性。它允许我们将一个数组展开为单个元素，并在函数调用时以逗号分隔的形式传递它们。

扩展运算符的语法如下：

function functionName(param1, param2, …, ...restParams) {
    //函数体
}

const array = [1, 2, 3];
functionName(…array); //等同于 functionName(1, 2, 3)

下面是一个简单的扩展运算符示例：

// ES5写法
function myFunction(x, y, z) {
    return x + y + z;
}

var args = [0, 1, 2];
console.log(myFunction.apply(null, args)); // 3

// ES6写法
function myFunction(x, y, z) {
    return x + y + z;
}

const args = [0, 1, 2];
console.log(myFunction(...args)); // 3

以上是关于JavaScript ES6函数拓展的详细攻略，希望对你有所帮助。