ES6 中的箭头函数详解及使用注意-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，箭头函数是一种新的函数定义方式，它的出现使得代码更加简洁，同时也有一些需要注意的使用细节。本文将详细介绍 ES6 中的箭头函数，并提供实例代码作为参考。

箭头函数的定义

箭头函数的定义方式有多种，最常使用的方式如下所示：

(parameters) => { statements }

其中 (parameters) 是函数的参数列表，{ statements } 是函数的代码块，它们之间用 => 符号连接起来。

与传统的函数定义方式不同，箭头函数没有 function 关键字，函数体中的语句可以直接写在代码块中，同时它也没有自己的 this，箭头函数中的 this 取决于它被创建的上下文，通常是指向函数定义时所在的对象。

箭头函数的使用注意

1. 箭头函数的参数和返回值

在箭头函数中，如果只有一个参数，则可以省略括号；如果没有参数，则需要写一个空括号；其他情况下，参数列表需要使用括号括起来。

// 一个参数，可以省略括号
const func = param => console.log(param);

// 没有参数，需要写一个空括号
const func = () => console.log("no parameter");

// 多个参数，需要使用括号
const func = (param1, param2) => {
  console.log(param1);
  console.log(param2);
};

如果箭头函数的代码块只有一行，且没有显式的 return 语句，则会自动将这一行的值作为函数的返回值，否则需要使用 return 关键字显式地返回值。

// 自动返回
const func = param => param * 2;

// 显式返回
const func = param => {
  return param * 2;
};

2. 箭头函数的 this

由于箭头函数没有自己的 this，它的 this 取决于它被创建的上下文。如果箭头函数被定义在一个对象的方法中，那么它的 this 将指向这个对象；如果箭头函数被作为参数传递给其他函数，那么它的 this 将指向全局对象。

const obj = {
  name: "Tom",
  sayName: function() {
    console.log(this.name);
  },
  sayNameArrow: () => {
    console.log(this.name);
  }
};

obj.sayName(); // 输出 "Tom"
obj.sayNameArrow(); // 输出 undefined

在上面的例子中，sayName 方法使用了传统的函数定义方式，它的 this 指向 obj 对象；而 sayNameArrow 方法使用了箭头函数来定义，它的 this 指向全局对象，因此输出 undefined。

3. 箭头函数与变量作用域

在 ES6 中，块级作用域被引入，它使得在循环和条件语句中定义的变量只在当前块中有效。但使用传统函数定义方式，变量会被绑定在函数对象上，而不是当前作用域中。这就会导致在循环中定义的函数，其内部使用的变量始终指向最后一个值。

const array = [1, 2, 3];
const funcs = [];

// 传统函数定义方式
for (let i = 0; i < array.length; i++) {
  funcs[i] = function() {
    return array[i];
  };
}

// 箭头函数定义方式
for (let i = 0; i < array.length; i++) {
  funcs[i] = () => array[i];
}

console.log(funcs[0]()); // 输出 1
console.log(funcs[1]()); // 输出 2
console.log(funcs[2]()); // 输出 3

在上面的例子中，funcs 是一个函数数组，其中的每个函数都返回 array 数组中对应下标的元素。如果使用传统函数定义方式，由于变量 i 被绑定在函数对象上，每个函数都会返回 array 数组中的最后一个元素；而如果使用箭头函数定义方式，由于箭头函数没有自己的 this 和 arguments，它们的内部环境与创建时的环境相同，所以每个函数都能正确地返回 array 数组中对应下标的元素。

箭头函数的示例代码

下面是一些使用箭头函数的示例代码，可以用来参考和借鉴。

1. 使用箭头函数过滤数组

const array = [1, 2, 3];

// 传统函数定义方式
const result1 = array.filter(function(item) {
  return item % 2 === 1;
});

// 箭头函数定义方式
const result2 = array.filter(item => item % 2 === 1);

console.log(result1); // 输出 [1, 3]
console.log(result2); // 输出 [1, 3]

在上面的例子中，使用 filter 方法过滤数组中的奇数元素。传统函数定义方式需要使用 function 关键字、参数列表和 return 语句，而箭头函数定义方式则更加简洁。

2. 使用箭头函数映射数组

const array = [1, 2, 3];

// 传统函数定义方式
const result1 = array.map(function(item) {
  return item * 2;
});

// 箭头函数定义方式
const result2 = array.map(item => item * 2);

console.log(result1); // 输出 [2, 4, 6]
console.log(result2); // 输出 [2, 4, 6]

在上面的例子中，使用 map 方法将数组中的每个元素乘以 2。传统函数定义方式和箭头函数定义方式均能实现相同的功能，样例代码更加紧凑和易读。

3. 使用箭头函数定义对象方法

const obj = {
  name: "Tom",
  sayName: function() {
    console.log(this.name);
  },
  sayNameArrow: () => {
    console.log(this.name);
  }
};

obj.sayName(); // 输出 "Tom"
obj.sayNameArrow(); // 输出 undefined

在上面的例子中，使用传统函数定义方式和箭头函数定义方式分别定义了一个对象的方法。传统函数定义方式中的 this 指向 obj 对象，而箭头函数定义方式中的 this 指向全局对象，因此取到的值不同。

总结

本文详细介绍了 ES6 中的箭头函数的定义、使用注意和示例代码，并重点关注了箭头函数的参数和返回值、this 和变量作用域。通过本文的学习，读者可深入理解 ES6 中的箭头函数，并能更加合理地使用它们来编写代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6595eac3eb4cecbf2d9dbf68

ES6 中的箭头函数详解及使用注意