JavaScript |扩展运算符-yiteyi-C++库

传播算子 允许iterable在需要0+个参数的地方展开。它主要用于预期值超过1的变量数组中。它允许我们从数组中获取参数列表。Spread运算符的语法与静止参数但它的工作原理与此完全相反。

null

语法：

var variablename1 = [...value];

在上述语法中， … 是一个扩展运算符，它将针对特定变量中的所有值。当…发生在函数调用或类似调用中时，它被称为扩展运算符。Spread操作符可以在很多情况下使用，比如我们想要的时候 用数学对象展开、复制、合并 .让我们逐一看一看：

笔记：为了运行本文中的代码，请使用浏览器提供的控制台。

Concat（）

javascript提供的concat（）方法有助于连接两个或多个字符串（String concat（）），或用于合并两个或多个数组。对于数组，此方法不会更改现有数组，而是返回一个新数组。

                       // normal array concat() method                     
                       let arr = [1,2,3];                     
                       let arr2 = [4,5];                     
                                
                       arr = arr.concat(arr2);                     
                                
                       console.log(arr);                                  // [ 1, 2, 3, 4, 5 ]                     

输出： 图片[1]-JavaScript |扩展运算符-yiteyi-C++库在spread运算符的帮助下，我们可以实现相同的输出，代码如下所示：

                       // spread operator doing the concat job                     
                       let arr = [1,2,3];                     
                       let arr2 = [4,5];                     
                                
                       arr = [...arr,...arr2];                     
                       console.log(arr);                                  // [ 1, 2, 3, 4, 5 ]                     

输出： 图片[2]-JavaScript |扩展运算符-yiteyi-C++库笔记：虽然我们可以获得相同的结果，但不建议在这种特殊情况下使用spread，因为对于大型数据集，与本机concat（）方法相比，它的工作速度较慢。

复制（如拼接方法）

为了将数组的内容复制到另一个数组，我们可以执行以下操作：

                       // copying without the spread operator                     
                       let arr = [                                  'a'                                  ,                                  'b'                                  ,                                  'c'                                  ];                     
                       let arr2 = arr;                     
                                
                       console.log(arr2);                                  // [ 'a', 'b', 'c' ]                     

输出： 图片[3]-JavaScript |扩展运算符-yiteyi-C++库

上面的代码可以很好地工作，因为我们可以将一个数组的内容复制到另一个数组，但在后台，这是非常不同的，因为当我们变异新数组时，它也会影响旧数组（我们复制的那个）。请参见下面的代码：

                       // changed the original array                     
                       let arr = [                                  'a'                                  ,                                  'b'                                  ,                                  'c'                                  ];                     
                       let arr2 = arr;                     
                                
                       arr2.push(                                  'd'                                  );                     
                                
                       console.log(arr2);                     
                       console.log(arr);                                  // even affected the original array(arr)                     

输出： 图片[4]-JavaScript |扩展运算符-yiteyi-C++库

在上面的代码中，我们可以清楚地看到，当我们试图在数组中插入一个元素时，原始数组也被修改了，这是我们不打算做的，也不推荐做的。在这种情况下，我们可以使用spread运算符，如下所示：

                       // spread operator for copying                     
                       let arr = [                                  'a'                                  ,                                  'b'                                  ,                                  'c'                                  ];                     
                       let arr2 = [...arr];                     
                                
                       console.log(arr);                                  // [ 'a', 'b', 'c' ]                     
                                
                       arr2.push(                                  'd'                                  );                                  //inserting an element at the end of arr2                     
                                
                       console.log(arr2);                                  // [ 'a', 'b', 'c', 'd' ]                     
                       console.log(arr);                                  // [ 'a', 'b', 'c' ]                     

输出： 图片[5]-JavaScript |扩展运算符-yiteyi-C++库

通过使用spread运算符，我们确保了无论何时更改新阵列，原始阵列都不会受到影响。

扩大

每当我们想将一个数组扩展到另一个数组时，我们都会这样做：

                       // normally used expand method                     
                       let arr = [                                  'a'                                  ,                                  'b'                                  ];                     
                       let arr2 = [arr,                                  'c'                                  ,                                  'd'                                  ];                     
                                
                       console.log(arr2);                                  // [ [ 'a', 'b' ], 'c', 'd' ]                     

输出： 图片[6]-JavaScript |扩展运算符-yiteyi-C++库尽管我们在另一个数组中的一个数组中获取内容，但实际上它是另一个数组中的数组，这绝对是我们不想要的。如果我们希望内容位于单个数组中，我们可以使用扩展运算符。

                       // expand using spread operator                     
                                
                       let arr = [                                  'a'                                  ,                                  'b'                                  ];                     
                       let arr2 = [...arr,                                  'c'                                  ,                                  'd'                                  ];                     
                                
                       console.log(arr2);                                  // [ 'a', 'b', 'c', 'd' ]                     

输出： 图片[7]-JavaScript |扩展运算符-yiteyi-C++库

数学

JavaScript中的数学对象具有不同的属性，我们可以利用它来做我们想做的事情，比如从一个数字列表中找出最小值，找到最大值。

console.log(Math.min(1,2,3,-1)); //-1

输出： 图片[8]-JavaScript |扩展运算符-yiteyi-C++库现在考虑我们有一个数组而不是一个列表，上面的数学对象方法不起作用，将返回Na，比如：

// min in an array using Math.min()

let arr = [1,2,3,-1];

console.log(Math.min(arr)); //NaN

输出： 图片[9]-JavaScript |扩展运算符-yiteyi-C++库什么时候 ……啊 在函数调用中使用，它将一个iterable对象arr“扩展”到参数列表中为了避免这种NaN输出，我们使用了扩展运算符，如：

// with spread

let arr = [1,2,3,-1];

console.log(Math.min(...arr)); //-1

输出： 图片[10]-JavaScript |扩展运算符-yiteyi-C++库

对象的扩展运算符示例

ES6增加了传播属性设置为javascript中的对象文本。播报员( … )with objects用于创建具有新值或更新值的现有对象的副本，或创建具有更多特性的对象的副本。让我们举一个例子，说明如何在对象上使用spread操作符，

                       const user1 = {                     
                                             name:                                  'Jen'                                  ,                     
                                             age: 22                     
                       };                     
                                
                       const clonedUser = { ...user1 };                     
                       console.log(clonedUser);                     

输出： 图片[11]-JavaScript |扩展运算符-yiteyi-C++库

我们在这里传播 用户1 对象user1对象的所有键值对都复制到clonedUser对象中。让我们来看另一个使用spread操作符合并两个对象的示例，

                       const user1 = {                     
                                             name:                                  'Jen'                                  ,                     
                                             age: 22,                     
                       };                     
                                
                       const user2 = {                     
                                             name:                                  "Andrew"                                  ,                     
                                             location:                                  "Philadelphia"                     
                       };                     
                                
                       const mergedUsers = {...user1, ...user2};                     
                       console.log(mergedUsers)                     