当前位置: 首页 > Web前端 > HTML5

JavaScript中三点...的用法

时间:2023-04-05 14:32:50 HTML5

JavaScript中的三点(...)休息参数使用休息参数,我们可以将任意数量的参数收集到一个数组中,然后使用它们来做我们想做的事情。引入其余参数以减少由参数引起的样板代码。函数myFunc(a,b,...args){console.log(a);//22控制台日志(b);//98控制台日志(参数);//[43,3,26]};myFunc(22,98,43,3,26);在myFunc的最后一个参数中以...为前缀,这将导致所有剩余参数都放在javascript数组中。rest参数收集所有剩余的参数,因此在最后一个参数之前添加rest参数没有意义。剩下的参数必须是最后一个形参。其余参数可以解构(仅限数组),这意味着它们的数据可以解压缩到不同的变量中。functionmyFunc(...[x,y,z]){returnx*y*z;}myFunc(1)//NaNmyFunc(1,2,3)//6myFunc(1,2,3,4)//6(第四个参数未解构)展开运算符展开运算符用于将可迭代对象(如数组)的元素展开到一个可以容纳多个元素的位置。functionmyFunc(x,y,...params){//这里使用了rest运算符console.log(x);控制台日志(y);console.log(params);}varinputs=["a","b","c","d","e","f"];myFunc(...输入);//这里使用展开运算符//"a"//"b"//["c","d","e","f"]组合数组的方式一直有多种,但展开运算符提供组合数组的新方法:constfeatured=['DeepDish','Pepperoni','Hawaiian'];constspecialty=['Meatzza','SpicyMama','Margherita'];constpizzas=[...featured,'vegpizza',...specialty];控制台日志(披萨);//'DeepDish','Pepperoni','Hawaiian','vegpizza','Meatzza','SpicyMama','Margherita'使用展开运算符,现在比Object.assign()浅层语法更短克隆(不包括原型)或合并对象。varobj1={foo:'bar',x:42};varobj2={foo:'baz',y:13};varclonedObj={...obj1};//对象{foo:"bar",x:42}varmergedObj={...obj1,...obj2};//Object{foo:"baz",x:42,y:13}总结当我们在代码中看到三个点时(...)它要么是一个剩余参数,要么是一个扩展运算符。有一种简单的方法可以区分它们:当三个点(...)位于函数参数的末尾时,它是一个“剩余参数”,并将参数列表的其余部分收集到一个数组中。当三个点(...)出现在函数调用或类似的地方时,它被称为“扩展运算符”并将数组扩展为列表。