ECMAScript 2019：你需要知道的新操作符-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript（ES）是JavaScript的官方标准之一，每一年都会更新一次。在2019年，ECMAScript 2019（ES10）被发布了，其中包含了一些新的操作符。本篇文章将会详细介绍这些新操作符，并提供实用的示例。

展开运算符

展开运算符是使用三个点符号（...）表示的。它可以将一个数组或对象中的元素展开为一系列以逗号分隔的值。这个新操作符在简化很多代码中特别有用。

对于数组

下面是一个展开运算符应用于数组的示例。

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [...a, ...b];

console.log(c); // Output: [1, 2, 3, 4, 5, 6]

在上面的代码中，我们把数组a和数组b的值合并到一个新的数组c里面，使用了展开运算符（...）来实现。这个操作符让代码变得更简单易懂。

对于对象

在ES6之前，如果我们需要复制或合并一个对象，需要使用Object.assign方法。现在，有了展开运算符，复制或合并对象就更加简单了。

下面是一个展开运算符应用于对象的示例。

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

console.log(obj2); // Output: { a: 1, b: 2, c: 3 }

在上面的代码中，我们把obj1对象的属性复制到一个新的对象obj2里面，然后在obj2里面添加了一个新的属性c。这样就实现了对象的复制和合并。

带剩余参数的函数

ECMAScript 2019还为函数添加了一些新操作符。其中，带剩余参数的函数是一种非常有用的特性。这个操作符可以帮助处理参数不定长的情况。

下面是一个带剩余参数的函数的示例。

function sumOfNumbers(...numbers) {
  return numbers.reduce((total, value) => total + value);
}

console.log(sumOfNumbers(1, 2, 3, 4, 5)); // Output: 15

在上面的代码中，我们定义了一个函数sumOfNumbers，它接受任何数量的参数。我们使用剩余参数（...numbers）来帮助处理这个不定长的参数列表。

可选链操作符

JavaScript中的一个常见问题是检查undefined或null对象属性，这很容易导致TypeError错误。为了解决这个问题，ECMAScript 2019引入了可选链操作符。

下面是一个可选链操作符的示例。

const data = { name: 'John', age: 25 };

console.log(data.address?.city); // Output: undefined

在上面的代码中，我们使用了可选链操作符（?.）来检查data对象是否包含address属性，如果没有的话返回undefined。

总结

在本篇文章中，我们学习了ECMAScript 2019中新的操作符，包括展开运算符，带剩余参数的函数和可选链操作符。这些新操作符可以帮助我们更加轻松地处理不同的任务和场景。它们可以极大地提高我们的工作效率，在日常的前端开发中应用广泛。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6484cbfa48841e98943ce8ba