Javascript初學筆記21 陣列、物件操作-擴展運算子 (Spread Operator)

在ES6新增了擴展運算子的新功能，用途是將陣列或物件做扁平化，我參考了這篇文章以及這篇文章後覺得實在非常實用，在此做個紀錄!

擴展運算子基本語法如下，順便帶上幾個例子

...要套用的物件或陣列
let arr = [1,2,3,4]
let text = 'hello'
let obj = [
            [{name:'Danny',id:9831032},
             {name:'John',id:9831031}]
              ]
console.log(...arr) //1 2 3 4 
console.log(...text) //hello
console.log(...obj) // [ {省略內容},{省略內容} ]

由上方的基本範例可知道可以輕易的扁平化陣列，那實際上會有那些運用呢?

複製陣列或物件

let y = [7,9]
let z = [...y]
z.push(4)
console.log(z) //[7,9,4]
console.log(y) //[7,9] 原陣列不受影響
let obj = {name:'Danny',id:9831032}
let newobj = {...obj}
newobj.gender = 'male'
console.log(newobj) // { name: 'Danny', id: 9831032, gender: 'male' }
console.log(obj)    // { name: 'Danny', id: 9831032 } 原物件不受影響

合併陣列(取代concat)

let y = [7,9]
let z = [...y]
let w = [...y,...z]
let v = [7,...y,9] 
console.log(w) //[ 7, 9, 7, 9, 4 ]
console.log(v) //[ 7, 7, 9, 9 ] 

將字串轉為陣列(取代Array.from)

 let text = 'hello' 
 console.log([...text]) // [ 'h', 'e', 'l', 'l', 'o' ]