JavaScript 扩展 (…) 运算符的 7 个技巧

介绍

JavaScript ES6 引入了新的扩展运算符 ( ...) 以使代码更简单、更美观。Mozilla将扩展运算符描述为：

扩展语法 允许在预期零个或多个参数（对于函数调用）或元素（对于数组字面量）的地方扩展诸如数组表达式或字符串之类的可迭代对象，或者在零个或多个参数的地方扩展对象表达式键值对（用于对象文字）是预期的。

描述比用途复杂，相信我。该运算符将改变您的编码方式。因此，事不宜迟，让我们从使用扩展运算符的基础开始。

基本

关键字...。因此，它扩展了对象或数组的元素。下面是一个更容易理解的例子：

const arr = ['a','b','c'];
console.log(arr); // ["a", "b", "c"]
console.log(...arr); // "a", "b", "c"
console.log("a","b","c"); // "a", "b", "c"

如您所见， 的结果console.log(...arr);与 相同console.log("a","b","c");。操作员分别获取所有单独的元素。

现在您知道它的作用，让我们转到第一个技巧。

正确复制数组/对象

当我们想到复制一个对象或数组时，我们会这样做：

const arr = [1,2,3,4,5];
const arrCopy = arr;
console.log(arr); // [1,2,3,4,5]
console.log(arrCopy); // [1,2,3,4,5]

//------------------------------------------

const obj = { a:'A', b:'B', c:'C' };
const objCopy = obj;
console.log(obj); // { a:'A', b:'B', c:'C' }
console.log(objCopy); // { a:'A', b:'B', c:'C' }

它是否复制数组或对象？嗯，有点。只要数据不变。当您从复制的数组或对象中更改数据时，原始数据也会更改。请参见下面的示例：

const arr = [1,2,3,4,5];
const arrCopy = arr;
console.log(arr); // [1,2,3,4,5]
console.log(arrCopy); // [1,2,3,4,5]

arrCopy.push(6);
console.log(arr); // [1,2,3,4,5,6]
console.log(arrCopy); // [1,2,3,4,5,6]

// ----------------------

const obj = { a:'A', b:'B', c:'C' };
const objCopy = obj;
console.log(obj); // { a:'A', b:'B', c:'C' }
console.log(objCopy); // { a:'A', b:'B', c:'C' }

objCopy.c = 'X';
console.log(obj); // { a:'A', b:'B', c:'X' }
console.log(objCopy); // { a:'A', b:'B', c:'X' }

为什么会这样？因为 JavaScript 分配副本来引用原始文件。它们都指向同一个内存：arrwitharrCopy和objwith objCopy。

那么，我们如何从原始创建副本，但是当我们更改副本的值时，原始不会改变？

我们要做的是通过改变初始化：
const arrCopy = arr;to const arrCopy = [ …arr ];
const objCopy = obj;toconst objCopy = { …obj };

请参阅下面的示例：

const arr = [1,2,3,4,5];
const arrCopy = [ ...arr ];
console.log(arr); // [1,2,3,4,5]
console.log(arrCopy); // [1,2,3,4,5]

arrCopy.push(6);
console.log(arr); // [1,2,3,4,5]
console.log(arrCopy); // [1,2,3,4,5,6]

// ----------------------

const obj = { a:'A', b:'B', c:'C' };
const objCopy = { ...obj };
console.log(obj); // { a:'A', b:'B', c:'C' }
console.log(objCopy); // { a:'A', b:'B', c:'C' }

objCopy.c = 'X';
console.log(obj); // { a:'A', b:'B', c:'C' }
console.log(objCopy); // { a:'A', b:'B', c:'X' }

合并数组/对象

使用扩展运算符合并数组或对象非常简单。您只需要创建一个空数组或对象，并使用扩展运算符扩展变量。这是一个例子：

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9];
const mergedArr = [...arr1, ...arr2, ...arr3];
console.log(mergedArr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

const objA = { a:'A', b:'B' };
const objB = { c:'C', d:'D' };
const mergedObj = { ...objA, ...objB };
console.log(mergedObj);
// { a: "A", b: 'B', c: "C", d: "D" }

因此，无需将元素一一展开并将它们放入新的合并数组或对象中。很酷吧？

Math.min 和 Math.max

在 JavaScript 中，要从每个参数中获取最小数量，请使用Math.min(). 要获得最大数量，请使用Math.max(). 看下面的例子：

const min = Math.min(1,0,4,2,-1,-3);
console.log(min); // -3

const max = Math.max(1,0,4,2,-1,-3);
console.log(max); // 4

问题是，两者Math.min()都Math.max()不能接受 Array 参数。两个函数都会返回NaN。因此，我们使用扩展运算符来解决问题，如下例所示：

const list = [1,0,4,2,-1,-3];

console.log(Math.min(list)); // NaN
console.log(Math.max(list)); // NaN
console.log(Math.min(...list)); // -3
console.log(Math.max(...list)); // 4

传递参数

您只需阅读与扩展运算符一起使用的Math.min()and函数。Math.max()您是否想知道如何创建一个可以接受多个参数的函数？

这很简单：在声明函数时将展开运算符放在用作参数的变量前面。然后，您可以在调用该函数时添加任意数量的参数（但请确保您已经处理过它）。请参阅下面的此代码段作为示例：

const dynamicFunc = (arg1, ...args) => {
   console.log("arg1: " + arg1); 
   console.log("args: " + args);
};

dynamicFunc(1,2,3,4,5); 
// arg1: 1 
// args: [2,3,4,5]

args将被解析为参数数组。它可以支持很多。

将字符串转换为字符列表

您可以使用展开运算符非常轻松地将字符串转换为字符列表。可以这样做是因为字符串也是可迭代的。请参见下面的示例：

const word = "Coding";
const arrOfChar = [...word];
console.log(arrOfChar); // ["C", "o", "d", "i", "n", "g"]

删除重复项

结合本Set机对象，扩展运算符可用于删除数组中存在的任何重复项。只需创建一个新数组，其中包含一个新数组的扩展运算符，Set该数组具有重复项。或者，请参阅下面的示例以获得更清晰的信息：

const arr = [1,2,3,3,5,8,8,true,true,"books","books","books",null,2];

const unique = [...new Set(arr)];

console.log(unique);
// [1, 2, 3, 5, 8, true, "books", null]

初始化一个新数组，该新数组将...new Set(arr)具有唯一值。

rest运算符

运算符的最后一个技巧...是使用 rest 运算符。正如其名称所预期的那样，它使您能够将解构数组中的剩余（其余）值作为较小的数组。请参见下面的示例：

const [ first, ...rest ] = ['a','b','c'];
console.log(first, rest);
// 'a' [ 'b', 'c' ]

因此，在定义first为 be之后，前面'a'的运算符的存在确保了其余的值将属于一个数组。应该没有运算符，它将作为一个值。...restrest...'b'

结论

扩展运算符是一个非常有用的功能，主要用于数组和对象。因为，这个操作符让一些合并等情况变得非常简单。最后，我们只需使用扩展运算符就可以节省编写合并函数的时间。