ESnd 箭头函数综合指南

es6简介

ecmascript 2015，也称为 es6 (ecmascript 6)，是对 javascript 的重大更新，引入了新的语法和功能，使编码更高效、更易于管理。 javascript 是最流行的 web 开发编程语言之一，es6 的改进大大增强了其功能。

本指南将涵盖 es6 中引入的重要功能，特别关注箭头函数，这是一种强大的新函数编写方式。

es6 的主要特性

1. let 和 const

es6 引入了两种新的变量声明方式：let 和 const。

• let：声明一个块作用域变量，这意味着该变量仅在声明它的块内可用。
  

   let x = 10;
   if (true) {
     let x = 2;
     console.log(x); // 2 (inside block)
   }
   console.log(x); // 10 (outside block)
  

• const：声明一个不能重新赋值的常量变量。然而，这并不会使变量不可变——用 const 声明的对象仍然可以更改其属性。
  

   const y = 10;
   y = 5; // error: assignment to constant variable.
  
   const person = { name: "john", age: 30 };
   person.age = 31; // this is allowed.
  

2. 箭头函数

es6 最受关注的功能之一是箭头函数。它为编写函数提供了更短、更简洁的语法。

#### 语法比较：

传统函数 (es5):

   var add = function(x, y) {
     return x + y;
   };

箭头函数 (es6):

   const add = (x, y) => x + y;

以下是箭头函数的不同之处：

• 更短的语法：不需要写function关键字，如果函数只有一条语句，可以省略大括号{}。
• 隐式返回：如果函数只包含一个表达式，则自动返回该表达式的结果。
• 没有 this 绑定：箭头函数没有自己的 this，使得它们不适合对象方法。

单线箭头函数示例：

   const multiply = (a, b) => a * b;
   console.log(multiply(4, 5)); // 20

箭头函数也可以不带参数使用：

   const greet = () => "hello, world!";
   console.log(greet()); // "hello, world!"

对于多行函数，需要大括号{}，并且返回语句必须明确：

   const sum = (a, b) => {
     let result = a + b;
     return result;
   };

箭头函数和这个
一个重要的区别是箭头函数中的行为方式。与传统函数不同，箭头函数不绑定自己的 this — 它们从周围的上下文继承 this。

   const person = {
     name: "john",
     sayname: function() {
       settimeout(() => {
         console.log(this.name);
       }, 1000);
     }
   };
   person.sayname(); // "john"

在上面的示例中，settimeout 中的箭头函数从 sayname 方法继承了 this，它正确引用了 person 对象。

3. 解构赋值

解构允许我们从数组或对象中提取值，并以更简洁的方式将它们分配给变量。

对象解构：

   const person = { name: "john", age: 30 };
   const { name, age } = person;
   console.log(name); // "john"
   console.log(age);  // 30

数组解构：

   const fruits = ["apple", "banana", "orange"];
   const [first, second] = fruits;
   console.log(first);  // "apple"
   console.log(second); // "banana"

4. 展开和休息运算符 (...)

... 运算符可用于将数组扩展为单个元素或将多个元素收集到一个数组中。

• 扩展：将数组扩展为单个元素。
  

  

  Face Swap Online

  在线免费换脸，支持图片换脸和视频换脸

  下载

   const numbers = [1, 2, 3];
   const newnumbers = [...numbers, 4, 5];
   console.log(newnumbers); // [1, 2, 3, 4, 5]
  

• rest：将多个参数收集到一个数组中。
  

   function sum(...args) {
     return args.reduce((acc, curr) => acc + curr);
   }
   console.log(sum(1, 2, 3, 4)); // 10
  

5.承诺

promises 用于处理 javascript 中的异步操作。 promise 代表了一个可能现在、将来或永远不可用的值。

示例：

   const mypromise = new promise((resolve, reject) => {
     settimeout(() => {
       resolve("success!");
     }, 1000);
   });

   mypromise.then(result => {
     console.log(result); // "success!" after 1 second
   });

在此示例中，promise 在 1 秒后解析，然后 then() 方法处理解析后的值。

6. 默认参数

在es6中，你可以为函数参数设置默认值。当未提供或未定义参数时，这非常有用。

示例：

   function greet(name = "guest") {
     return `hello, ${name}!`;
   }
   console.log(greet());       // "hello, guest!"
   console.log(greet("john")); // "hello, john!"

7. 字符串方法（包括()、startswith()、endswith()）

向字符串添加了新方法，使常见任务变得更容易：

• includes()：检查字符串是否包含指定值。
  

   let str = "hello world!";
   console.log(str.includes("world")); // true
  

• startswith()：检查字符串是否以指定值开头。
  

   console.log(str.startswith("hello")); // true
  

• endswith()：检查字符串是否以指定值结尾。
  

   console.log(str.endswith("!")); // true
  

8. 数组方法（find()、findindex()、from()）

es6 引入了处理数组的新方法：

• find()：返回第一个满足条件的元素。
  

   const numbers = [5, 12, 8, 130, 44];
   const found = numbers.find(num => num > 10);
   console.log(found); // 12
  

• findindex()：返回第一个满足条件的元素的索引。
  

   const index = numbers.findindex(num => num > 10);
   console.log(index); // 1 (position of 12 in the array)
  

9. 课程

es6 向 javascript 引入了类，它们是 javascript 现有的基于原型的继承的语法糖。类允许更清晰、更易于理解的面向对象编程。

示例：

   class Car {
     constructor(brand, year) {
       this.brand = brand;
       this.year = year;
     }

     displayInfo() {
       return `${this.brand} from ${this.year}`;
     }
   }

   const myCar = new Car("Toyota", 2020);
   console.log(myCar.displayInfo()); // "Toyota from 2020"

结论

es6 改变了 javascript，使其更高效、更易于使用。 箭头函数的引入简化了函数语法，而解构、承诺、类和扩展运算符等新功能 允许开发人员编写更清晰、更具表现力的代码。无论您是初学者还是高级开发人员，了解这些 es6 功能对于编写现代 javascript 至关重要。

通过掌握这些概念，您将能够更好地应对现实世界的编码挑战并构建高效、可扩展的 web 应用程序。

跟进 github 上的 arrow functions 项目

参考

• https://www.w3schools.com/js/js_es6.asp
• https://towardsdatascience.com/javascript-es6-iterables-and-iterators-de18b54f4d4
• https://developer.mozilla.org/en-us/docs/web/javascript/reference/functions/rest_parameters
• https://developer.mozilla.org/en-us/docs/web/javascript/reference/functions/default_parameters
• https://developer.mozilla.org/en-us/docs/web/javascript/reference/functions/arrow_functions
• https://developer.mozilla.org/en-us/docs/web/javascript/reference/statements