SpreadSyntax—SpreadSyntax(...)是ES6中引入的一项新功能，可以让我们快速从可迭代对象中提取元素。使用这种语法，我们可以避免使用大量复杂的API，编写更简洁的代码。看完这篇文章，相信你会喜欢这个功能的。1.复制数组复制数组的传统方法是使用数组的切片方法。让arr=[1,2,3,[4,5]];letcopy=arr.slice()console.log(copy)//[1,2,3,[4,5]];但是，slice方法最初是为了捕获数组的切片，而不是复制它们。这个API很容易忘记，但是使用扩展语法非常简单明了：2.复制一个对象要复制一个对象，可以使用Object.assign():letuser={name:'bytefish',url:'https://bytefish.medium.com'}letcopy=Object.assign({},user)console.log(copy);输出：对象{name:"bytefish",url:"https://bytefish.medium.com"}使用扩展语法letuser={name:'bytefish',url:'https://bytefish.medium.com'}letcopy={...user}console.log(copy);output:Object{name:"bytefish",url:"https://bytefish.medium.com"}使用传播语法，您可以提取对象的所有可枚举属性并将它们添加到新对象中。3、在数组首尾添加元素在数组首尾添加元素是一个经常做的工作，数组提供了push和unshift方法：letarr=[3]arr.unshift(1,2)到。推(4,5)console.log(arr);输出：[1,2,3,4,5]如果我们使用扩展语法，代码会更简洁易懂：letarr=[3]letcopy=[1,2,...arr,4,5]console.log(复制);输出：[1,2,3,4,5]注意：arr.push和arr.unshift修改当前数组，而展开语法创建一个新数组。您应该根据需要选择合适的方法。4.合并数组的传统方式：letarr1=[1,2,3]letarr2=[4,5,6]letarr3=arr1.concat(arr2)console.log(arr3);使用扩展语法：letarr1=[1,2,3]letarr2=[4,5,6]letarr3=[...arr1,...arr2]console.log(arr3);输出[1,2,3,4,5,6]5。合并对象的传统方式：letp1={name:'bytefish'}letp2={tag:'JavaScript'}letp3=Object.assign({},p1,p2)console.log(p3);使用扩展语法输出对象{name:"bytefish",tag:"JavaScript"}:letp1={name:'bytefish'}letp2={tag:'JavaScript'}letp3={...p1,...p2}console.log(p3);OutputObject{name:"bytefish",tag:"JavaScript"}6.字符串转数组传统方式：letstr='bytefish'letarr=str.split('')console.log(arr);?Output["b","y","t","e","f","i","s","h"]使用扩展语法：letstr='bytefish'让arr=[...str]console.log(arr);输出[“b”、“y”、“t”、“e”、“f”、“i”、“s”、“h”]7。将类数组对象转换为数组JavaScript中的一些数据结构看起来像数组但不是数组，例如NodeList、函数参数对象等。它们和数组一样是顺序结构，其元素可以通过索引访问。但是它们没有普通数组的一些属性和方法。functionsum(){console.log(arguments)console.log(argumentsinstanceofArray)}sum(1,2,3);outputsArguments{0:1,1:2,2:3}false为了使用这些像数组对象，我们有时需要将它们转换成数组。传统方式：functionfoo(){letargArray=Array.from(arguments)console.log(argArrayinstanceofArray)}foo();输出：true使用扩展语法：functionsum(){console.log(arguments)letargArray=[...arguments]console.log(argArrayinstanceofArray)}sum(1,2,3);Arguments{0:1,1:2,2:3}true在JavaScript中，RestSyntax和SpreadSyntax的表示法是一样的，都是三个点（…）。但它们也有一些细微的差别：Rest语法将所有剩余的元素收集到一个数组或对象中。展开语法将元素集合（例如数组）解压缩为单个元素。这里再举几个同样使用SpreadSyntax(...)的例子，理论上应该属于RestSyntax。尽管Spread语法类似于Rest语法，但我认为没有必要关心这些概念上的细微差别。所以我也会在这里放几个RestSyntax用法的例子。8、提取对象假设有一个对象：lethttpOptions={method:'POST',url:'https://api.github.com',returnType:'json',timeout:2000,data:{name:'bytefish'}}我们想获取这个对象的method和url，把其他字段放在一起，怎么办？使用扩展语法，我们可以这样写：提取这个对象的属性只需要一行代码，几乎没有比它更简洁的写法了。9.无限参数函数假设我们需要编写一个求和函数，它可以接受任意数量的参数并将它们相加。我们怎么写这样的函数呢？新手程序员可能想知道函数如何接受无限数量的参数。他可能会使用数组作为参数并编写如下内容：functionsum(arr){returnarr.reduce((acc,cur)=>acc+cur)}console.log(sum([1,2,3,4]));但是这种写法需要我们把参数组合成一个数组来传递，不是很优雅。更好的想法是使用函数的参数对象来动态读取参数。functionsum(){letargsArray=Array.from(arguments)returnargsArray.reduce((acc,cur)=>acc+cur)}console.log(sum(1,2,3,4))//10console。log(sum(1,3,5,7))//16;如果我们使用扩展语法，我们可以直接将所有参数组合在一起：functionsum(...arr){returnarr.reduce((acc,cur)=>acc+cur)}console.log(sum(1,2,3,4))//10console.log(sum(1,3,5,7))//16;这样一来，无论我们传递多少参数，它们都会被放到arr中。这显然比第一种优雅，比第二种更方便。Math.max许多JavaScript内置函数都使用了这种技术，例如Math.max。如您所见，Math.max可以接受任意数量的参数。如果我们想得到数组中最大或最小的数，我们可以这样写：letarr=[23,34,53,3]console.log(Math.max(...arr))console.log(Math.分钟(...arr));Output53310,RestParameters除了上面的用法，我们还可以使用rest参数。假设我们有一个函数，前两个参数固定，其余参数不确定，那么我们可以这样写：functionteam(leader,viceLeader,...members){console.log('leader:'+leader).log('副组长：'+viceLeader)members.forEach(member=>console.log('member:'+member))}team('Jon','Jack','Bob','Alice');输出函数team(leader,viceLeader,...members){console.log('leader:'+leader)console.log('副组长：'+viceLeader)members.forEach(member=>console.log('member:'+member))}team('Jon','Jack','Bob','Alice');结论我们终于学会了，在JavaScript中使用扩展语法的10种方法。我希望你觉得它对你有用。如果是这样，请务必在评论中让我知道。
