函数的参数与箭头函数——ES6进阶教程第三天

2023-09-08 14:23:32

前言

在前面的教程中，我们学习了ES6的基本语法，包括变量声明、常量声明、箭头函数、模板字符串、解构赋值等。从今天开始，我们将学习ES6中一些更高级的特性，包括函数的参数与箭头函数。

函数的参数

在ES6中，函数的参数可以有默认值。默认值是指在调用函数时，如果没有为某个参数传递值，那么该参数就会使用默认值。

例如，我们有一个函数add(a, b)，这个函数计算两个数字的和。如果我们在调用这个函数时，只传递了一个参数，那么另一个参数就会使用默认值。

function add(a, b = 0) {
  return a + b;
}

console.log(add(1)); // 1
console.log(add(1, 2)); // 3

在上面的代码中，函数add的第二个参数b的默认值是0。当我们只传递了一个参数1时，第二个参数b就会使用默认值0，因此函数的返回值是1。当我们传递了两个参数1和2时，函数的返回值是3。

函数参数与解构赋值

ES6中的函数参数还可以使用解构赋值。解构赋值是一种将对象或数组中的值赋给变量的语法。

例如，我们有一个对象person，这个对象有两个属性name和age。我们可以使用解构赋值来将对象的属性值赋给两个变量。

const person = {
  name: 'John',
  age: 30
};

const {name, age} = person;

console.log(name); // John
console.log(age); // 30

在上面的代码中，我们使用解构赋值将对象的两个属性值赋给了两个变量name和age。然后，我们使用这两个变量来输出对象的值。

我们可以使用解构赋值来将函数的参数值赋给多个变量。

function greet({name, age}) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

greet({name: 'John', age: 30}); // Hello, John! You are 30 years old.

在上面的代码中，我们使用解构赋值将函数的参数值赋给了两个变量name和age。然后，我们使用这两个变量来输出函数的参数值。

箭头函数

箭头函数是ES6中引入的一种新的函数语法。箭头函数的写法更简洁，而且可以避免一些常见的问题。

例如，我们有一个函数add(a, b)，这个函数计算两个数字的和。我们可以使用箭头函数来重写这个函数。

const add = (a, b) => a + b;

console.log(add(1, 2)); // 3

在上面的代码中，我们使用箭头函数来定义了一个函数add。箭头函数的定义方式非常简单，只需要在参数列表后面写一个箭头=>，然后跟上函数体。

箭头函数有以下几个特点：

箭头函数没有自己的this。
箭头函数不能使用arguments对象。
箭头函数不能使用yield关键字。

函数作用域

函数的作用域是指函数内部的变量和函数可以访问的范围。在ES6中，函数的作用域与块级作用域相同。这意味着，函数内部的变量和函数只能在函数内部访问，不能在函数外部访问。

例如，我们有一个函数add(a, b)，这个函数计算两个数字的和。在函数内部，我们可以访问两个参数a和b。但是，在函数外部，我们不能访问这两个参数。

function add(a, b) {
  // 函数内部
  console.log(a); // 1
  console.log(b); // 2

  // 函数外部
  console.log(a); // ReferenceError: a is not defined
  console.log(b); // ReferenceError: b is not defined
}

add(1, 2);