扩展语句

扩展语法允许在需要多个参数(用于函数调用)或多个元素(用于数组文本)或多个变量(用于结构分配)的位置扩展表达式。

语法

用于函数调用:

myFunction(...interableObj);

用于数组字面量:

[...iterableObj, 4, 5, 6]
范例
更好的 apply 方法

在需要使用数组作为函数的参数的情况下,通常使用 Function.prototype.apply 方法:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

如果使用了ES6的展开运算符,你可以这么写:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

还可以同时展开多个数组:

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

更强大的数组字面量
例子:如果已经有一个数组,此时还需要再新建一个数组,要求新数组包含已有数组的数组项的话,就要用到push,splice,concat等数组方法。有了扩展运算符会然代码更简洁:

var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]

和函数调用一样,数组字面量中也可以使用 ... 多次

更好的 push 方法

例子:再ES5中,我们通常使用push方法将一个数组添加到另一个数组的末尾:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将arr2中的所有元素添加到arr1中
Array.prototype.push.apply(arr1, arr2);

在ES6中,使用扩展运算符:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
仅可遍历对象可用
var obj = {"key1":"value1"};
function myFunction(x) {
    console.log(x); // undefined
}
myFunction(...obj);
var args = [...obj];
console.log(args, args.length) //[] 0
将类数组对象转换成数组

扩展运算符可以将一个类数组对象中索引范围在[0, length) 之间的所有属性的值添加到一个数组中,这样就可以得到一个真正的数组:

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,760评论 0 4
  • importUIKit classViewController:UITabBarController{ enumD...
    明哥_Young阅读 4,265评论 1 10
  • 前言 把《C++ Primer》[https://book.douban.com/subject/25708312...
    尤汐Yogy阅读 9,750评论 1 51
  • 最近被水痘折磨得够呛,总结了一些知识和经验。 1. 水痘是由病毒引起的,一般通过呼吸道传染,然后进入血液,潜伏期最...
    hapjs阅读 725评论 0 0
  • 分享: 这张卡代表你的()情绪,感觉一下,你和它之间的距离,位置是怎样? Ta现在的状态是怎样? ta有什么话想对...
    yoyo_tt67阅读 353评论 4 0

友情链接更多精彩内容