作者：ChrisBongers译者：前端小智来源：ishadeed点赞再看，微信搜索【大千世界】，B站关注【前端小智】这个没有大厂背景，而是有着积极心态的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...Copyinganarray我们可以使用展开运算符来复制一个数组，但是需要注意的是这是一个浅拷贝。constarr1=[1,2,3];constarr2=[...arr1];console.log(arr2);//[1,2,3]所以我们可以复制一个基本数组，注意它不适用于多级数组或带日期或函数的数组。合并数组假设我们有两个数组要合并为一个。之前我们可以使用concat方法，但现在我们可以使用扩展运算符：constarr1=[1,2,3];constarr2=[4,5,6];constarr3=[...arr1,...arr2];console.log(arr3);//[1,2,3,4,5,6]我们也可以使用不同的排列来指示哪个应该先出现。constarr3=[...arr2,...arr1];console.log(arr3);[4,5,6,1,2,3];另外，展开运算符也适用于多个数组的组合：constoutput=[...arr1,...arr2,...arr3,...arr4];向数组添加元素letarr1=['this','is','an'];arr1=[...arr1,'array'];console.log(arr1);//['this','is','an','array']给对象添加属性假设你有一个用户对象，但是它是缺少年龄属性。constuser={firstname:'Chris',lastname:'Bongers'};要向该用户对象添加年龄，我们可以再次使用传播运算符。constoutput={...用户，年龄：31}；使用Math()函数假设我们有一个数字数组，我们想要获取这些数字的最大值、最小值或总和。constarr1=[1,-1,0,5,3];要获得最小值，我们可以使用扩展运算符和Math.min方法。constarr1=[1,-1,0,5,3];constmin=Math.min(...arr1);console.log(min);//-1同样，要获得最大值，你可以这样做：constarr1=[1,-1,0,5,3];constmax=Math.max(...arr1);console.log(max);//5如你所见，最大值为5，如果我们去掉5，它会返回3。你可能会想，如果我们不使用展开运算符会怎样？constarr1=[1,-1,0,5,3];constmax=Math.max(arr1);控制台日志（最大）；//NaN这将返回NaN，因为JavaScript不知道数组的最大值是什么。剩余参数假设我们有一个接受三个参数的函数。constmyFunc(x1,x2,x3)=>{console.log(x1);控制台日志（x2）；控制台日志（x3）；我们可以这样调用这个函数：myFunc(1,2,3);但是如果我们传递一个数组会发生什么。constarr1=[1,2,3];我们可以使用扩展运算符将这个数组扩展到我们的函数中。myFunc(...arr1);//1//2//3在这里，我们将数组拆分为三个单独的参数，然后将它们传递给函数。constmyFunc=(x1,x2,x3)=>{console.log(x1);控制台日志（x2）；控制台日志（x3）；}；constarr1=[1,2,3];myFunc(...arr1);//1//2//3将无限参数传递给函数假设我们有一个接受无限数量参数的函数，如下所示：constmyFunc=(...args)=>{console.log(args);};如果我们现在使用多个参数调用此函数，我们将看到以下内容：myFunc(1,'a',newDate());Return:[1,'a',Date{__proto__:Date{}}]然后我们可以动态循环参数。将nodeList转换为数组假设我们使用展开运算符获取页面上的所有div：constel=[...document.querySelectorAll('div')];控制台日志（EL）；//(3)[div,div,div]在这里我们可以看到我们从dom中得到了3个div。现在，我们可以轻松地遍历元素，因为它们是数组。constel=[...document.querySelectorAll('div')];el.forEach(item=>{console.log(item);});//
////解构对象假设我们有一个对象user:constuser={firstname:'Chris',lastname:'Bongers',age:31};现在，我们可以使用展开运算符将其分解为单个变量。const{firstname,...rest}=user;console.log(firstname);console.log(rest);//'Chris'//{lastname:'Bongers',age:31}在这里，我们解构用户对象，并将firstname解构为firstname变量，将对象的其余部分解构为rest变量。扩展字符串扩展运算符的最后一个用例是将字符串分解为单个单词。假设我们有以下字符串：conststr='Hello';然后，如果我们对这个字符串使用扩展运算符，我们将得到一个字母数组。conststr='Hello';constarr=[...str];console.log(arr);//['H','e','l','l','o']~好了，我是小智，我去洗碗了，下次见！代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://dev.to/dailydevtips1/...每周更新交流文章。可以微信搜索【每日一动天下】第一时间阅读，回复【福利】还有很多前端视频等着你。本文在GitHub上https://github.com/qq449245884/xiaozhi已收录，欢迎Star。