更好地理解“三点”运算符。

一个简单而强大的运算符。

价差操作商

复制数组

扩展数组

字符串展开

合并对象

一个简单而强大的运算符。

纵观大多数常见的 Web 编程语言，它们都具备一些基本运算符，几乎所有开发者都知道如何使用它们。但有些运算符并不常见，并非所有语言都支持，即使支持，语法也可能不同。对于语言新手来说，如果缺乏理解不同技术概念所需的工具，阅读他人代码时可能会遇到困难。因此，在本文中，我将讨论 JavaScript 中一个被低估且颇具争议的“扩展”运算符，也就是三个点 (...) 运算符。来吧！让我们开始探索！

价差操作商

过去几年，JavaScript 的语法和功能都得到了极大的改进，新增了许多特性。扩展运算符（Spread）就是其中最实用、最简单的特性之一，尤其是在创建新对象时更新现有对象中的数据。它是一种非常强大的语法，在编程中有着广泛的应用。
目前，它的用途之多，难以一一列举。因此，让我们深入了解一下扩展运算符的一些最常见用法。

复制数组

我们举个简单的例子来理解一下。
你最喜欢的板球运动员是谁？
我的？当然是 Dhoni 和 Raina 了。
好的。我们把这些放在一个数组里。

let favourites = ["Dhoni","Raina"]
let copy = [...favourites]
console.log(copy);
// ["Dhoni","Raina" ]

换个角度来看，扩展运算符会选中目标数组中的每个元素，并将这些元素放入一个新的数组结构中，这有点像展开。现在你可能会想，如果没有扩展运算符会发生什么呢？

let favourites = ["Dhoni","Raina"]
let copy = [favourites]
console.log(copy);
//  [["Dhoni","Raina" ]]

这个不一样，因为我们得到的是一个多维数组（数组中的数组）。

扩展数组

以前面的例子为例，假设我想把一个新玩家添加到我的收藏列表中。Spread 运算符提供了一种简单有效的方法来实现这一点。

let favourites = ["Dhoni","Raina"]
console.log(...favourites,"Smith");
//  Dhoni Raina Smith

就这么简单。这里我们不会得到一个数组，因为我们这次没有像之前那样请求数组结构。这样一来，你就可以在不覆盖现有数据的情况下更新数据。

字符串展开

扩展运算符也适用于字符串扩展。一个实际例子是从字符串中提取字符。

const player = 'Sachin';

//Spread Operator extracts the characters from the String and assigns to an array
const characters = [...player];

console.log(characters); 
//Output -> Array (6) ["S", "a", "c", "h","i","n"]

合并对象

对象合并与数组合并几乎相同，区别在于一些键值对的条件。
如果键是唯一的，则键值对会被添加到新对象中。如果键相同，则值会被替换为新值。

const match1 = 
{ 
  name : "Sachin", 
  score : 56 
};


const match2 = 
{ 
    name : "Sachin", 
    score: 53,
    balls: 32 
};



const match = {...match1, ...match2};
console.log(match) ;
 // Output -> 
             {  name: "Sachin",
                score: 53,
                balls: 32
             };

本文到此结束。除了以上内容，扩展运算符还有很多其他用途。不妨尝试一下，并充分利用这门语言提供的新工具。希望您喜欢这篇文章，欢迎在下方评论区留下您的反馈。

有关扩展运算符语法的详细信息，请参阅MDN Web 文档。

下次见👋