ES6运算符

ES6引入了一些新的运算符，让我们来一一了解一下。

箭头函数

箭头函数是ES6中非常重要的一个新特性，它可以让我们更方便地定义函数，而且还可以避免this的陷阱。

语法

箭头函数的语法非常简单，由参数列表和箭头符号 => 组成，后面跟着函数体。例如，以下代码定义了一个箭头函数，它接收两个参数并返回它们的和：

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

箭头函数的this

箭头函数有一个非常重要的特点，就是它们没有自己的this值，它们的this指向定义它们的函数的this。

我们来看一个例子：

function User(name) {
  this.name = name;
  this.sayHello = () => {
    console.log(`Hello, ${this.name}!`);
  };
}

const user = new User('John');
user.sayHello(); // Hello, John!

在上面的代码中，我们定义了一个构造函数User，它接收一个名字参数，并给this添加了一个名字属性和一个sayHello方法。在sayHello方法中，我们使用箭头函数来定义函数体。由于箭头函数没有自己的this值，它的this指向User构造函数的this，也就是user对象。

扩展运算符

扩展运算符（Spread Operator）是ES6中非常实用的一个新特性，它可以把一个数组或对象展开为多个参数。在函数调用或数组、对象赋值的时候非常方便。

数组展开

我们来看一个数组展开的例子：

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

在上面的代码中，我们使用...运算符（也就是扩展运算符）把数组展开为多个参数。console.log函数接收多个参数，所以它会依次输出数组中的元素。

对象展开

我们也可以把一个对象展开为多个参数，例如：

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

const { firstName, lastName, ...info } = person;

console.log(firstName); // John
console.log(lastName); // Doe
console.log(info); // { age: 30 }

在上面的代码中，我们使用对象的解构赋值，把person对象中的firstName和lastName属性赋值给firstName和lastName变量，把剩下的属性展开为info对象。

函数调用

扩展运算符在函数调用中也非常实用，它可以把一个数组展开成多个参数，例如：

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

const numbers = [1, 2, 3];
console.log(add(...numbers)); // 6

在上面的代码中，我们使用扩展运算符把numbers数组展开为多个参数，传递给add函数。

Nullish 合并运算符

Nullish 合并运算符（??）是ES11中的新特性，它可以让我们更方便地检查 null 或 undefined 值。

语法

const result = a ?? b;

上面的代码中，??表示Nullish合并运算符。如果a是null或undefined，返回b，否则返回a。

示例

const config = {
  appTitle: 'My App',
  appDescription: '',
  appVersion: '1.0.0',
};

const title = config.appTitle ?? 'Untitled';
const description = config.appDescription ?? 'No description provided';
const version = config.appVersion ?? 'Unknown';

console.log(title); // My App
console.log(description); // No description provided
console.log(version); // 1.0.0

在上面的代码中，我们使用了Nullish合并运算符来检查config对象的属性是否为null或undefined，如果是，则使用默认值。

Optional Chaining运算符

Optional Chaining运算符（?.）是ES11中的新特性，它可以让我们更方便地访问对象的嵌套属性或方法，避免出现undefined的错误。

示例

const user = {
  name: 'John',
  address: {
    street: 'Main St',
    city: 'New York',
  },
};

const city = user?.address?.city;

console.log(city); // New York

在上面的代码中，我们使用Optional Chaining运算符访问user对象的address.city属性，如果user或address是null或undefined，city变量就会被赋值为undefined而不是抛出错误。

总结

这就是ES6运算符的介绍，包括箭头函数、扩展运算符、Nullish 合并运算符和Optional Chaining运算符。这些运算符都是非常实用的，掌握它们可以让我们更方便地编写代码。