Es6扩展运算符--三点运算符(...)--展开语法(Spread syntax)

0.看文档呀

关于拓展运算符更详细的解释见 》 MDN展开语法

关于剩余参数更详细的解释见 》MDN剩余参数

关于解构赋值更详细的解释见 》MDN解构赋值

直接看上面的文档更好

1.前言

最近学习vue源码的时候，看到编译类的时候一些函数用到了三点运算符，这里总结一下用法，记录一下

value = expr.replace(/\{\{(.+?)\}\}/g, (...args) => {
				return this.getVal(args[1], vm);
			});
[...childNodes].forEach((child) => {
    if (this.isElementNode(child)) {
        //是元素节点
        //编译元素节点
        this.compileElement(child);
    } else {
        //文本节点
        //编译文本节点
        this.compileText(child);
    }
    //递归调用处理所有元素节点
    if (child.childNodes && child.childNodes.length) {
        this.compile(child);
    }
});

2.三点运算符

三点运算符为对象的扩展运算符，用于取出参数对象中的所有可遍历属性，拷贝到 当前的对象之中,拓展运算符拷贝的是对象中的基本数据类型，并不是对原有对象的引用，因此修改当前对象中的值不会影响原有对象中的值

任何 Iterator 接口的对象（参阅 Iterator 一章），都可以用扩展运算符转为真正的数组。

let foo = {a:1,b:2}
let bar = {...foo} //{a:1,b:2}

不用es6语法等价于

let foo = {a:1,b:2}
let bar = Object.assign({},foo)//{a:1,b:2}

Object.assign 方法用于对象的合并，将源对象中所有可枚举的属性复制到目标对象

该方法接受两个参数--目标对象和源对象，源对象会对目标对象中的同名属性进行覆盖

同样，拓展运算符也可以运用在对数组的操作中

let foo = [1,2,3]
let bar = [...foo] //[1,2,3]

将nodelist转换成数组

function node2array(nodeList){
	return [...nodeList]
}

将arguments对象转换成数组,为了在arguments对象上使用Array方法，它必须首先被转换为一个真正的数组。

function args2array(args){
	return [...args]
}

开头提到的[...childeNodes]就是将nodeList转换成array之后再进行遍历的

3.剩余参数

（...args）为剩余参数用法

剩余参数语法允许我们将一个不定量的参数表示为一个数组

value = expr.replace(/\{\{(.+?)\}\}/g, (...args) => {
				return this.getVal(args[1], vm);
			});

这里（...args）将所有的传入参数转换成数组并赋值给args

同样剩余参数也可以用于解构赋值

value = expr.replace(/\{\{(.+?)\}\}/g, (...[a,b,c,d]) => {
				return this.getVal(b, vm);
			});

这里将传入的参数按照顺序分别赋值给a,b,c,d

解构赋值结合剩余参数

let a,b,rest;
[a,b,...rest] = [1,2,3,4,5,6];
console.log(rest);
//[3,4,5,6]