用一个例子解释 ES6 中的扩展运算符

在本文中，我们将尝试了解与扩展运算符相关的基本细节，包括扩展运算符符的语法及其用法，并借助 ES6 中的某些示例。

让我们首先了解Spread Operator到底是什么以及它的语法是什么，然后我们将进一步看到一些与其声明相关的示例。

传播运算符：

• 扩展运算符最终采用任何可迭代对象，例如数组或任何其他可迭代对象，并单独扩展该可迭代对象的值。
• 此扩展运算符主要用于其中包含超过 1 个值的数组。
• 也就是说，它基本上将数组的所有元素展开，并且在展开数组元素之后，我们可以对这些元素执行任何操作，例如连接、将数组的元素复制到另一个数组中，等等。
• 扩展运算符还可以与对象一起用于多个操作，例如连接或将一个对象的值复制到另一个对象等。

语法：按照语法，我们可以使用任何可迭代对象（如数组）来实现扩展运算符。

let variable = [...values]; 

基本上，这种语法的作用是从数组中获取值，从而将其存储在一个变量中，该变量因此充当数组本身。

现在我们已经了解了 Spread运算符的基础知识，包括它的语法，是时候看看几个基于 Spread运算符符用法的示例了。

示例 1：在此示例中，我们将尝试先使用 concat() 方法，然后使用更简单的方法，即使用扩展运算符来执行连接。

Javascript

    let array1 = [5, 6, 7];
    let array2 = [8, 9, 10];
  
    // Using concat() method.....
    let concatenatedArray = array1.concat(array2);
    console.log(concatenatedArray);
  
    // Using spread (...) operator......
    let newArray = [...array1, ...array2];
    console.log(newArray);

输出：正如您在上面的代码片段中看到的那样，通过使用扩展运算符语法而不是使用预定义的方法 concat() 来执行连接变得非常简单。

[ 5, 6, 7, 8, 9, 10 ]
[ 5, 6, 7, 8, 9, 10 ]

示例 2：在此示例中，我们将尝试将一个数组的值复制到另一个数组中，然后我们将尝试将更多值添加到新数组中，然后我们将看到更改对前一个数组和新数组的影响元素。

Javascript

    let arr = ["Apple", "Mango", "Banana"];
    let newArr = [...arr];
  
    console.log(newArr);  // [ 'Apple', 'Mango', 'Banana' ]
    newArr.push("Grapes");
  
    console.log(newArr);  // [ 'Apple', 'Mango', 'Banana', 'Grapes' ]
    console.log(arr);  // [ 'Apple', 'Mango', 'Banana' ]

输出：正如您在上面的示例中看到的，当我们通常在新数组中输入新值时，它不会影响旧数组，如果我们尝试使用常规方法执行此操作，我们可能会得到与旧数组相同的新数组元素数组元素。

[ 'Apple', 'Mango', 'Banana' ]
[ 'Apple', 'Mango', 'Banana', 'Grapes' ]
[ 'Apple', 'Mango', 'Banana' ]

示例 3：在此示例中，我们将尝试使用扩展运算符找到元素数组中的最小元素。

Javascript

    let Array = [5, 6, 8, 1, 0, -8, 10];
  
    console.log(Math.min(...Array));

输出：如果我们尝试使用一些更简单的方法找到最小元素，那么我们可能会遇到一条错误消息，上面写着 NaN（不是数字），但是使用扩展运算符，我们将不会收到任何这样的错误消息。

-8