ES6 ++：5-箭头功能
#javascript #es6 #esnext

箭头功能

箭头函数是在 es6 中编写功能的新方法。它们是编写功能的较短语法，并且没有自己的this和arguments。他们也没有prototype属性。

如何使用箭头功能？

要使用箭头函数，您需要使用=>运算符而不是function关键字。

// normal function
function add(a, b) {
  return a + b;
}

// arrow function
const add = (a, b) => {
  return a + b;
};

实际上，我们可以更缩短它：

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

我们在这里所做的是，当我们在功能体中只有返回语句时，我们可以删除卷曲括号和return关键字，并且该函数将返回表达式的值。

让我们看看几个示例：

// normal function
function isPositive(number) {
  return number >= 0;
}

// arrow function

const isPositive = (number) => number >= 0;

// normal function
function randomString() {
  return Math.random().toString(36).substring(2);
}

// arrow function

const randomString = () => Math.random().toString(36).substring(2);

更多较短的语法

如果箭头函数只有一个参数，则可以删除括号：

// normal function

function double(number) {
  return number * 2;
}

// arrow function

const double = (number) => {
  return number * 2;
};

// shorter syntax
const double = (number) => number * 2;

// more shorter syntax
const double = number => number * 2;

没有参数

如果箭头函数没有参数，则需要使用空括号：

// normal function

function getPi() {
  return Math.PI;
}

// arrow function

const getPi = () => {
  return Math.PI;
};

// shorter syntax
const getPi = () => Math.PI;

箭头功能和this

箭头函数没有自己的this，这意味着箭头函数中的this关键字将参考外部范围中的this关键字。

// normal function
function Person() {
  this.age = 0;

  setTimeout(function growUp() {
    this.age++; // The this refers to the global object, which is window
  }, 1000);
}

let p = new Person();

在上面的示例中，this函数内的this关键字是指全局对象，即window。要解决此问题，我们可以使用bind方法：

// normal function
function Person() {
  this.age = 0;

  setTimeout(
    function growUp() {
      this.age++; // The this refers to the Person object
    }.bind(this),
    1000
  );
}

let p = new Person();

绑定方法返回一个新函数，其中this关键字绑定到Person对象。

在 es6 中，我们可以使用箭头功能来解决此问题：

// normal function
function Person() {
  this.age = 0;

  setTimeout(() => {
    this.age++; // The this refers to the Person object
  }, 1000);
}

let p = new Person();

箭头功能和arguments

箭头功能没有自己的arguments对象。 arguments对象是一个类似数组的对象，包含传递给函数的参数。

// normal function
function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 15

在上面的示例中，arguments对象包含传递给sum函数的参数。我们可以使用arguments对象循环通过参数，并将它们添加到total变量中。

在 es6 中，我们可以使用其余参数来解决此问题：

// normal function
function sum(...args) {
  let total = 0;
  for (let i = 0; i < args.length; i++) {
    total += args[i];
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 15

箭头功能和prototype

箭头功能没有prototype属性。这意味着您不能将new关键字与箭头函数一起使用。

const Person = (name) => {
  this.name = name;
};

const p = new Person("John"); // TypeError: Person is not a constructor

最佳实践

您最终会使用大部分时间箭头功能进入真实的项目，它们较短，更容易，并且在其余参数的帮助下，您可以根据需要传递尽可能多的参数。

，如果要摆脱this头痛，并且要编写较短的功能，请使用箭头功能。

- 结论

在本文中，我们了解了 es6 中的箭头功能。我们学会了如何使用箭头功能以及它们与正常功能的不同。我们还了解了箭头函数中的this关键字和arguments对象。

â•给我买一杯咖啡。

如果您喜欢我的文章和工作，则可以buy me a coffee，这将帮助我继续前进并继续创建更多内容。

ð加入我们的社区

在Discord上加入我们的社区以获得帮助和支持（Node JS 2023频道）。

ð奖励内容ð

您可能会看这些文章，这肯定会提高您的知识和生产力。

一般主题

软件包和库

React JS软件包

课程（文章）