ES6 展开运算符(...)

参考文章链接

语法

1 . 函数传参

myFunction(...iterableObj);

2 . 数组
[...iterableObj,4,5,6]

函数传参

使用Function.prototype.apply方法来将一个数组展开成函数的多个参数

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

使用ES6的展开运算符可以这么写：

function myFunction(x,y,...z){//第一个参数进x，第二个进y,剩余的进c(x,y是命名参数，...z是剩余参数<只能放在最后>)
	console.log(x,y,z);//0 1 [2, 3, 4, 5]
}
var args = [0,1,2,3,4,5];
myFunction(...args);//展开数组  

• 选择性传参

  function filter(type,...items){
  	return items.filter(item => typeof item === type);
  }
  filter('boolean',true,0,false);// =>[true,false]
  filter('number',false,4,'welcome',7);// =>[4,7]
  

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

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

解构赋值

let cold = ['autumn','winter'];
let warm = ['spring','summer'];
//析构数组
let otherSeasons,autumn;
[autumn,...otherSeasons] = cold;
console.log(otherSeasons);

注意：

解构赋值中展开运算符只能用在最后

var a = [1,2,3,4];
var b,c,d;
[b,...c,d] = a;
console.log(c);

连续解构赋值

如果不希望取出来的变量用原本的变量名 可以这么写来重命名

数据构造

1. 两个对象连接返回新的对象

let a = {aa:'aa'};
let b = {bb:'bb'};
let c = {...a,...b};
console.log(c);

2. 两个数组连接返回新的数组

 let d = ["dd"];
 let e = ["ee"];
 let f = [...d, ...e];
 console.log(f);

• 在中间插入数组

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

• 在尾部插入数组（push函数）

  //ES5
  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);// 在数组arr1后面添加arr2里的元素
  arr1.unshift(...arr2) //在数组arr1前面添加arr2里的元素
  

3. 拷贝数组，过去我们使用Array.prototype.slice来实现数组的拷贝，但现在我们可以通过展开运算符得到数组的副本

var arr = [1,2,3];
var arr2 = [...arr]; // 等同于 arr.slice()
arr2.push(4)

这里要注意，数组里的对象仍然是引用类型的，因此实际上并不是所有内容都被“拷贝”了。

4. 数组+对象返回新的数组

let g =[{gg:'gg'}];
let h = {hh:'hh'};
let i =[...g,h];
console.log(i);//[{gg:'gg'},{hh:'hh'}]

5. 数组+字符串返回新的数组

let j = ['jj'];
let k = ['kk'];
let l = [...j,k];
console.log(l);//['jj','kk']

6. 带有数组和对象的结合

let state = {
	resultList:[],
	currentPage:0,
	totalRows:{}
}
let data = {
	resultList:[{new:'new'}],
	currentPage:2,
	totalRows:{row:'row'}
}
let combile = {
	...state,
	resultList:[
		...state.resultList,
		...data.resultList
	],
	currentPage:data.currentPage,
	totalRows:data.totalRows
}
console.log(combile);

7. 使用 Math对象里的相关函数，在参数个数不确定的函数里使用展开运算符

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1