JS （...）扩展运算符的用途

经常在数组中看到扩展运算符(…) eg :[…prev,cur] 此种情况 故查询了他人博客

2.1 复制数组或对象内部数据

//复制数组的内部数据
var arr1 = ['hello']
var arr2 =[...arr1]
arr2 // ['hello']
//复制对象的成员数据
var obj1 = {name:'Tom'}
var obj2 ={...arr}
ob12 //  {name:'Tom'}
 
//----------------
// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

2.2 合并数组或对象

//合并数组
var arr1 = ['hello']
var arr2 =['John']
var mergeArr = [...arr1,...arr2]
mergeArr  // ['hello','John']
 
// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
 
// 合并对象
var obj1 = {name:'John'}
var obj2 = {height:168}
var mergeObj = {...obj1,...obj2}
mergeObj // {name: "John", height: 168}

2.3 字符串转字符数组

var arr1 = [...'hello world']
arr1 // ["h", "e", "l", "l", "o", " ", "w" ,"o" "r", "l", "d"]

2.4 传递函数参数

function f(v,w,x,y,z){ }
var args = [2,3]
f(1,...args,4,...[5])
 
 
//当我们想把数组中的元素迭代为函数参数时，用它！
 
// ES5 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
 
// ES6 的写法，直接用 ... 脱壳为参数序列
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f(...args); //相当于 f(0, 1, 2)

注意事项：

  如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

const [...butLast, last] = [1, 2, 3, 4, 5];//  报错
 
const [first, ...middle, last] = [1, 2, 3, 4, 5];//  报错
 
const [first, middle, ...last] = [1, 2, 3, 4, 5]; //正确