1. 首页
  2. IT资讯

使用扩展运算符,让你的代码更加简单优雅

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Ffdd908b1291c4e61b503b73acb774153″ img_width=”786″ img_height=”424″ alt=”使用扩展运算符,让你的代码更加简单优雅” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E扩展运算符是什么u003Cu002Fh1u003Eu003Cpu003E它是ES6中引入的一个运算符“…”,它可以把一个数组分割成一列由逗号组成的参数序列,可以被广泛地用于函数调用,数组复制,合并等情形,下面就来看看使用扩展运算符有哪些更优雅的写法吧:u003Cu002Fpu003Eu003Ch1u003E更优雅的push操作u003Cu002Fh1u003Eu003Cpreu003Elet a=[1,2,3];u003Cbru003Elet b=[4];u003Cbru003Eu002Fu002F旧写法u003Cbru003Efor(let i=0;i<a.length;i++){u003Cbru003E b.push(a[i])u003Cbru003E}u003Cbru003Econsole.log(b); u002Fu002F [4,1,2,3]u003Cbru003Eb=[4];u003Cbru003Eu002Fu002F 使用扩展运算符u003Cbru003Eb.push(…a);u003Cbru003Econsole.log(b); u002Fu002F [4,1,2,3]u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003E更加方便的数组拷贝u003Cu002Fh1u003Eu003Cpreu003Elet a=[1,2,3];u003Cbru003Elet b=[];u003Cbru003Eu002Fu002F旧写法u003Cbru003Efor(let i=0;i<a.length;i++){u003Cbru003E b[i]=a[i];u003Cbru003E}u003Cbru003Econsole.log(b); u002Fu002F [1,2,3]u003Cbru003Eu002Fu002F 使用扩展运算符u003Cbru003Eb=[…a];u003Cbru003Econsole.log(b); u002Fu002F[1,2,3]u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003E更方便的数组合并u003Cu002Fh1u003Eu003Cpreu003Elet array1 = [10,20];u003Cbru003Elet array2 = [50,60];u003Cbru003Elet newarray = [25];u003Cbru003Eu002Fu002F旧写法u003Cbru003Enewarray = newarray.concat(array1).concat(array2); u002Fu002F[ 25, 10, 20, 50, 60 ]u003Cbru003Econsole.log(newarray);u003Cbru003Eu002Fu002F使用扩展运算符u003Cbru003Enewarray = [20,…array1,…array2]; u002Fu002F[ 25, 10, 20, 50, 60 ]u003Cbru003Econsole.log(newarray);u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003E代替字符串分割 splitu003Cu002Fh1u003Eu003Cpreu003Elet str = “盆盆儿WEB前端”;u003Cbru003Eu002Fu002F 使用 splitu003Cbru003Elet sp = str.split(”);u003Cbru003Econsole.log(sp);u002Fu002F[ ‘盆’, ‘盆’, ‘儿’, ‘W’, ‘E’, ‘B’, ‘前’, ‘端’ ]u003Cbru003Eu002Fu002F 使用扩展运算符u003Cbru003Esp = […str];u003Cbru003Econsole.log(sp);u002Fu002F[ ‘盆’, ‘盆’, ‘儿’, ‘W’, ‘E’, ‘B’, ‘前’, ‘端’ ]u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003E实现了 Iterator 接口的对象转为数组u003Cu002Fh1u003Eu003Cpreu003Elet nodes = document.querySelectorAll(‘div’); u003Cbru003Elet array = […nodes]; u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003E可变参数函数的调用u003Cu002Fh1u003Eu003Cpreu003Eu002Fu002F ES5 的写法 u003Cbru003Efunction f(x, y, z) {u003Cbru003Eu002Fu002F … u003Cbru003E}u003Cbru003Evar args = [0, 1, 2];u003Cbru003Ef.apply(null, args);u003Cbru003Eu002Fu002F ES6 的写法 u003Cbru003Efunction f(x, y, z) {u003Cbru003Eu002Fu002F … u003Cbru003E}u003Cbru003Evar args = [0, 1, 2];u003Cbru003Ef(…args);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E这里就不再继续列举了,还有其他的,欢迎大家在评论区列出来。u003Cu002Fpu003Eu003Cpu003EPS:如果这篇文章让你学到了一点知识,欢迎点赞并关注我哦,每天一点技术干货,让我陪你在大牛的路上越走越远!!!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:使用扩展运算符,让你的代码更加简单优雅

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11226.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code