十个关于JavaScript Spread Syntax (...)的强大用途

,扩展语法—Spread Syntax(…) 是 ES6 中引入的一个新特性，它允许我们从可迭代对象中快速提取元素。使用这种语法，我们可以避免使用大量复杂的 API，编写更简洁的代码。看完这篇文章，相信你会喜欢这个功能的。,复制数组的传统方法是使用数组的切片方法。,但是， slice 方法最初是为了捕获数组的片段，而不是复制它们。这个 API 很容易忘记，但是使用扩展语法非常简单明了：,要复制对象，您可以使用 Object.assign() ：,输出：,使用扩展语法,输出：,使用扩展语法，您可以提取对象的所有可枚举属性并将它们添加到新对象中。,在数组的开头和结尾添加元素是一项频繁的任务，数组提供了 push 和 unshift 方法：,输出：,如果我们使用扩展语法，代码会更加简洁易懂：,输出：,注意：arr.push 和 arr.unshift 修改当前数组，而扩展语法创建一个新数组。你应该根据自己的需求选择合适的方法。,传统方式：,使用扩展语法：,输出,传统方式：,输出,使用扩展语法：,输出,传统方式：,‍输出,使用扩展语法：,输出,JavaScript 中的一些数据结构看起来像数组但不是数组，例如 NodeList、函数的参数对象等。,与数组一样，它们是顺序结构，其中的元素可以通过索引访问。但是它们没有普通数组的一些属性和方法。,,输出,为了使用这些类似数组的对象，我们有时需要将它们转换为数组。,传统方式：,输出：,使用扩展语法：,在 JavaScript 中，Rest Syntax 和 Spread Syntax 的表示法是相同的，都是用三个点（…）表示。但它们也有一些微妙的区别：,这里还有几个同样使用Spread Syntax （…）的例子，理论上应该属于 Rest Syntax。虽然Spread语法和Rest语法相似，但我认为没有必要关心这些概念上的细微差别。所以我也会在这里放几个 Rest Syntax 用法的例子。,假设有一个对象：,我们想拿到这个对象的method和url，把其他字段放在一起，怎么办呢？,使用扩展语法，我们可以这样写：,,提取这个对象的属性只需要一行代码，几乎找不到更简洁的写法。,假设我们需要编写一个求和函数，它可以接受任意数量的参数并将它们相加。我们如何编写这样的函数？,新手程序员可能想知道一个函数如何可以接受无限数量的参数。他可能会使用一个数组作为参数并编写如下内容：,不过这种写法需要我们把参数组合成一个数组来传递，不是很优雅。一个更好的想法是使用函数的参数对象来动态读取参数。,如果我们使用扩展语法，我们可以直接将所有参数组合在一起：,这样，无论我们传递多少个参数，它们都会被放在 arr 中。这显然比第一个更优雅，也比第二个更方便。,Math.max,许多 JavaScript 内置函数都使用这种技术，例如 Math.max。,,如您所见，Math.max 可以接受任意数量的参数。,如果我们想获得数组中的最大或最小数字，我们可以这样写：,输出,除了上面的用法，我们还可以使用rest参数。假设我们有一个函数，它的前两个参数是固定的，其余参数是不确定的，所以我们可以这样写：,输出,我们终于学会了它，在 JavaScript 中使用扩展语法的 10 种方法。我希望你发现它对你很有用。如果是这样，请务必在评论中告诉我。