箭头函数，函数默认参数，数组和对象的解构

箭头函数

ES6更新引入了箭头函数，这是声明和使用函数的另一种方式。它带来的好处：

• 更简洁
• 函数式编程
• 隐式返回

示例代码:

• 简洁

function double(x) { return x * 2; } // Traditional way
console.log(double(2)); // 4
复制代码

• 隐式返回

const double = x => x * 2; // Same function written as an arrow function with implicit return
console.log(double(2));  // 4
复制代码

• 作用域

在箭头函数中，this就是定义时所在的对象，而不是使用时所在的对象。基本上，使用箭头函数，您不必在调用函数内部的函数之前执行that = this技巧。

function myFunc() {
  this.myVar = 0;
  setTimeout(() => {
    this.myVar++;
    console.log(this.myVar) // 1
  }, 0);
}
复制代码

详细介绍

简洁

在许多方面，箭头函数比传统函数更简洁。

• 隐式VS显示返回

一个显示返回是其中一个函数返回关键字在它的身上使用。

function double(x) {
    return x * 2; // this function explicitly returns x * 2, *return* keyword is used
  }
复制代码

在传统的函数中，返回总是显而易见的。但是使用箭头函数，您可以执行隐式返回，这意味着您不需要使用关键字return来返回值。

const double = (x) => {
    return x * 2; // 显示 return
  }
复制代码

由于这个函数只返回一些东西（在return关键字之前没有指令），我们可以做一个隐式返回。

  const double = (x) => x * 2; // 隐式  return x*2

复制代码

为此，只需要删除括号和返回关键字。这就是为什么它被称为隐式返回，return关键字不存在，但是这个函数确实会返回x * 2。

注意：如果函数没有返回一个值（带有副作用），它不会执行显式或隐式返回。

另外，如果想隐式地返回一个对象，必须在它周围有括号，因为它会和块大括号冲突：

const getPerson = () => ({ name: "Nick", age: 24 })
console.log(getPerson()) // { name: "Nick", age: 24 } -- 函数隐式返回对象

复制代码

• 只有一个参数

如果函数只有一个参数，可以省略它周围的括号:

  const double = (x) => x * 2; // this arrow function only takes one parameter

复制代码

参数周围括号可以省略:

  const double = x => x * 2; // this arrow function only takes one parameter

复制代码

• 没有参数

当没有参数提供给箭头函数时，需要提供圆括号，否则它将不是有效的语法。

() => { // parentheses are provided, everything is fine
    const x = 2;
    return x;
  }
复制代码

=> { // No parentheses, this won't work!
    const x = 2;
    return x;
  }
复制代码

• this作用域

在箭头函数中，this就是定义时所在的对象，而不是使用时所在的对象。 没有箭头函数，如果想在函数内的某个函数中从这个函数访问一个变量，必须使用that=this或者self=this这个技巧。

示例代码

在myFunc中使用setTimeout函数：

function myFunc() {
  this.myVar = 0;
  var that = this; // that = this trick
  setTimeout(
    function() { // A new *this* is created in this function scope
      that.myVar++;
      console.log(that.myVar) // 1

      console.log(this.myVar) // undefined -- see function declaration above
    },
    0
  );
}
复制代码

但是有了箭头功能，这是从其周围取得的

function myFunc() {
  this.myVar = 0;
  setTimeout(
    () => { // this taken from surrounding, meaning myFunc here
      this.myVar++;
      console.log(this.myVar) // 1
    },
    0
  );
}
复制代码

函数默认参数值

从ES6开始，可以使用以下语法将默认值设置为函数参数:

function myFunc(x = 10) {
  return x;
}
console.log(myFunc()) // 10 -- no value is provided so x default value 10 is assigned to x in myFunc
console.log(myFunc(5)) // 5 -- a value is provided so x is equal to 5 in myFunc

console.log(myFunc(undefined)) // 10 -- undefined value is provided so default value is assigned to x
console.log(myFunc(null)) // null -- a value (null) is provided, see below for more details
复制代码

函数默认参数应用于两种情况b并且只有两种情况:

• 没有提供参数
• 提供未定义的参数

如果传入null，默认参数将不会被应用。

注意：默认值分配也可以与解构参数一起使用

对象和数组的解构

解构是通过从存储在对象或数组中的数据中提取一些值来创建新变量的一种便捷方式。

示例代码：

• 对象

const person = {
  firstName: "Nick",
  lastName: "Anderson",
  age: 35,
  sex: "M"
}
复制代码

没有解构

const first = person.firstName;
const age = person.age;
const city = person.city || "Paris";
复制代码

随着解构，所有在一行中：

const { firstName: first, age, city = "Paris" } = person; // That's it !

console.log(age) // 35 -- A new variable age is created and is equal to person.age
console.log(first) // "Nick" -- A new variable first is created and is equal to person.firstName
console.log(firstName) // ReferenceError -- person.firstName exists BUT the new variable created is named first
console.log(city) // "Paris" -- A new variable city is created and since person.city is undefined, city is equal to the default value provided "Paris".
复制代码

注意：在const关键字const { age } = person;之后的括号不用于声明对象或块，而是解构语法。

• 函数参数

没有解构

function joinFirstLastName(person) {
  const firstName = person.firstName;
  const lastName = person.lastName;
  return firstName + '-' + lastName;
}

joinFirstLastName(person); // "Nick-Anderson"
复制代码

在解构对象参数的过程中，得到一个更简洁的函数:

function joinFirstLastName({ firstName, lastName }) { // we create firstName and lastName variables by destructuring person parameter
  return firstName + '-' + lastName;
}

joinFirstLastName(person); // "Nick-Anderson"
复制代码

解构使用箭头函数:

const joinFirstLastName = ({ firstName, lastName }) => firstName + '-' + lastName;

joinFirstLastName(person); // "Nick-Anderson"
复制代码

• 数组

定义一个数组:

const myArray = ["a", "b", "c"];
复制代码

没有解构

const x = myArray[0];
const y = myArray[1];
复制代码

解构

const [x, y, ...z] = myArray; // That's it !

console.log(x) // "a"
console.log(y) // "b"
console.log(z) // ["c"]
复制代码

参考资料

• 函数的扩展

• JavaScript箭头功能 - MDN

• 默认参数-MDN

• ES6解构赋值

转载于:https://juejin.im/post/5b0d0a4d51882515861d246d