JS中三個點（...）是什麼？
我們在看js程式碼時經常會出現（...）三個點的東西，它究竟是什麼意思？又有何用處？
下面我就給大家分享一下三個點的那些事
什麼意思？
三個點（...）真名叫擴充套件運算子，是在ES6中新增加的內容，它可以在函式呼叫/陣列構造時，將陣列表示式或者string在語法層面展開；還可以在構造字面量物件時將物件表示式按照key-value的方式展開
字面量一般指[1,2,3]或者{name:'chuichui'}這種簡潔的構造方式,多層巢狀的陣列和物件三個點就無能為力了
說白了就是把衣服脫了，不管是大括號（[]）、花括號（{}），統統不在話下，全部脫掉脫掉！
|
1
2
3
4
5
6
|
// 陣列var number = [1,2,3,4,5,6]console.log(...number) //1 2 3 4 5 6//物件var man = {name:'chuichui',height:176}console.log({...man}) / {name:'chuichui',height:176} |
有什麼用？
它的用處很廣泛，我們隨處都可以看到，下面是幾個常見的例子
複製用它
|
1
2
3
4
5
6
7
8
|
//陣列的複製var arr1 = ['hello']var arr2 =[...arr1]arr2 // ['hello']//物件的複製var obj1 = {name:'chuichui'}var obj2 ={...arr}ob12 // {name:'chuichui'} |
合併用它
|
1
2
3
4
5
6
7
8
9
10
|
//陣列的合併var arr1 = ['hello']var arr2 =['chuichui']var mergeArr = [...arr1,...arr2]mergeArr // ['hello','chuichui']// 物件分合並var obj1 = {name:'chuichui'}var obj2 = {height:176}var mergeObj = {...obj1,...obj2}mergeObj // {name: "chuichui", height: 176} |
字元轉陣列用它
|
1
2
|
var arr1 = [...'hello']arr1 // ["h", "e", "l", "l", "o"] |
函式傳參用它
可以和正常的函式相結合，靈活使用
|
1
2
3
|
function f(v,w,x,y,z){ }var args = [2,3]f(1,...args,4,...[5]) |
當我們想把陣列中的元素迭代為函式引數時，用它！
|
1
2
3
4
5
6
|
function f(x,y,z){}var args = [1,2,3]f(...args) // 以前的方法f.apply(null,args); |