1. 首页
  2. IT资讯

「ES6基础」展开语法(Spread syntax)

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F0c3da6c3548349dd988dc121d43e7e04″ img_width=”900″ img_height=”383″ alt=”「ES6基础」展开语法(Spread syntax)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E展开语法用”…”进行表示,展开语法将可迭代的对象拆分成独立的值(语法层面展开)。扩展语法通常用于将可迭代的对象的值传递到函数的参数中。今天小编将从以下方面进行介绍:u003Cu002Fpu003Eu003Culu003Eu003Cliu003E函数传参中的应用u003Cu002Fliu003Eu003Cliu003E数组的相关应用u003Cu002Fliu003Eu003Cliu003E剩余参数的应用u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Eu003Cstrongu003E本篇文章阅读时间预计6分钟u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E函数传参中的应用u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003EES6之前,如果我们希望将数组作为参数分别传递给函数中的参数,我们可以使用Function的apply()方法。如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Efunction myFunction(a, b) {u003Cbru003E return a + b;u003Cbru003E}u003Cbru003Evar data = [1, 4];u003Cbru003Evar result = myFunction.apply(null, data);u003Cbru003Econsole.log(result); u002Fu002FOutput “5”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E从上述代码,apply方法接受一个数组,将它们分拆成单独参数传递函数进行调用。u003Cu002Fpu003Eu003Cpu003EES6的展开语法能让我们以更简洁的方式进行调用,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Efunction myFunction(a, b) {u003Cbru003E return a + b; u003Cbru003E}u003Cbru003Elet data = [1, 4];u003Cbru003Elet result = myFunction(…data);u003Cbru003Econsole.log(result); u002Fu002FOutput “5”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E代码运行期间,JavaScript解释器调用myFunction之前,将会用1,4表达式替换…运算符:u003Cu002Fpu003Eu003Cpreu003Elet result = myFunction(…data);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码将会进行如下转换:u003Cu002Fpu003Eu003Cpreu003Elet result = myFunction(1,4);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E替换后,函数中的代码将会继续执行。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E数组的相关应用u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Eu003Cstrongu003E数组的合并u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E展开语法可将数组添加到另外一个数组中,成为其中的一部分。u003Cu002Fpu003Eu003Cpreu003Elet array1 = [2,3,4];u003Cbru003Elet array2 = [1, …array1, 5, 6, 7];u003Cbru003Econsole.log(array2); u002Fu002FOutput “1, 2, 3, 4, 5, 6, 7”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E代码运行期间,如下代码:u003Cu002Fpu003Eu003Cpreu003Elet array2 = [1, …array1, 5, 6, 7];u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码将会替换成如下代码:u003Cu002Fpu003Eu003Cpreu003Elet array2 = [1, 2, 3, 4, 5, 6, 7];u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E在push方法中的运用u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E有时候,我们需要将一个数组的内容追加到另一个数组中,ES6之前我们可以这么做,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Evar array1 = [2,3,4];u003Cbru003Evar array2 = [1];u003Cbru003EArray.prototype.push.apply(array2, array1);u003Cbru003Econsole.log(array2); u002Fu002FOutput “1, 2, 3, 4”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003EES6的展开语法能以更简洁的形式实现,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet array1 = [2,3,4];u003Cbru003Elet array2=[1];u003Cbru003Earray2.push(…array1);u003Cbru003Econsole.log(array2); u002Fu002FOutput “1, 2, 3, 4”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E代码运行期间,如下代码:u003Cu002Fpu003Eu003Cpreu003Earray2.push(…array1);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码将会替换成如下代码:u003Cu002Fpu003Eu003Cpreu003Earray2.push(2, 3, 4);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E传递多个数组参数u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E我们可以使用展开语法传递多个数组进行参数传递,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet array1 = [1];u003Cbru003Elet array2 = [2];u003Cbru003Elet array3 = […array1, …array2, …[3, 4]];u002Fu002Fmulti arrayspreadu003Cbru003Elet array4 = [5];u003Cbru003Efunction myFunction(a, b, c, d, e) {u003Cbru003E return a+b+c+d+e;u003Cbru003E}u003Cbru003Elet result = myFunction(…array3, …array4); u002Fu002Fmulti array spreadu003Cbru003Econsole.log(result); u002Fu002FOutput “15”u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003Eu003Cstrongu003E剩余参数的应用u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E我们知道JS函数内部有个arguments对象,可以拿到全部实参。现在ES6给我们带来了一个新的对象,可以拿到除开始参数外的参数,即剩余参数,我们可以使用展开语法…进行获取。u003Cu002Fpu003Eu003Cpu003EES6之前,我们可以这样获取剩余参数,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Efunction myFunction(a, b) {u003Cbru003E const args = Array.prototype.slice.call(arguments, myFunction.length);u003Cbru003E console.log(args);u003Cbru003E}u003Cbru003EmyFunction(1, 2, 3, 4, 5); u002Fu002FOutput “3, 4, 5”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003EES6中,上述代码我们可以这样改下,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Efunction myFunction(a, b, …args) {u003Cbru003E console.log(args); u002Fu002FOutput “3, 4, 5″u003Cbru003E}u003Cbru003EmyFunction(1, 2, 3, 4, 5);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E是不是很简单,有个我们需要注意的事,一旦函数中的参数第一个参数使用剩余参数,就不能声明第二个非剩余参数,否则将会抛出错误。例如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Efunction fn(…rest,foo) {} u003Cbru003Eu002Fu002FOutput “SyntaxError: Rest parameter must be last formal parameter”u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003Eu003Cstrongu003E小节u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E今天的内容就到这里,展开语法是不是特别的酷啊,在日后的开发中,我们尽量使用新的语法糖替代旧的写法。让我们代码看起来更加干净、整洁、易懂。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003EE6相关文章u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6713733594054918663u002F?group_id=6713733594054918663″ target=”_blank”u003E「ES6基础」let和作用域u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714091462650233352u002F?group_id=6714091462650233352″ target=”_blank”u003E「ES6基础」const简介u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714508610916844035u002F?group_id=6714508610916844035″ target=”_blank”u003E「ES6基础」默认参数值u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714847432842150414u002F?group_id=6714847432842150414″ target=”_blank”u003E「ES6基础」模板字符串(Template String)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712258013375234568u002F?group_id=6712258013375234568″ target=”_blank”u003E「ES6基础」箭头函数(Arrow functions)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712646837519532551u002F?group_id=6712646837519532551″ target=”_blank”u003E「ES6基础」迭代器(iterator)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712984431553937934u002F?group_id=6712984431553937934″ target=”_blank”u003E「ES6基础」生成器(Generator)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003E更多精彩内容,请微信关注u003Cstrongu003E“前端达人”公众号u003Cu002Fstrongu003E!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「ES6基础」展开语法(Spread syntax)

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10750.html

联系我们

13687733322

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

邮件:1877088071@qq.com

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

QR code