js 三个点（...），扩展运算符说明

在开发nodejs应用时，发现一些代码中符号前面有三个点（...），这个是什么意思了。原来三个点（...）真名叫扩展运算符，是在ES6中新增加的内容，它可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造字面量对象时将对象表达式按照key-value的方式展开。说白了就是把外层包裹去除，不管是大括号（[]）、花括号（{}），统统不在话下。

字面量一般指 [1,2,3,4,5] 或者 {name:'Tom',age:19} 这种简洁的构造方式，多层嵌套的数组和对象三个点就无能为力了

 一、脱壳示例

// 数组变量
var number = [1,2,3,4,5,6]
console.log(...number) //1 2 3 4 5 6
//对象变量
var someone = {name:'Tom',age:19,sex:'male'}
console.log({...someone}) // {name:'Tom',age:19,sex:'male'}
//直接去除数组
console.log(...[1, 2, 3]) // 1 2 3
console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5

[...document.querySelectorAll('div')] // [
, 
, 
]

二、（...）扩展运算符的用途

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]; //正确