【深入淺出ES6】解構

Eric_zhang發表於2019-03-04

【深入淺出ES6】解構

對物件與陣列的解構

意義

使用解構操作符，可以更方便的提取物件和陣列中的的單個成員元素

物件解構

  1. 帶預設值的解構
    let person = {
    name: 'Tom',
    age: '20'
}
let { name = 'Eric', age} = person
複製程式碼
  2. 賦值給本地不同的變數名
    let person = {
    name: 'Tom',
    age: '20'
}
let { name:firstName = 'Eric', age:ageOld} = person // 冒號前面的表示要檢索的物件的屬性名；冒號後面的表示要賦值的變數名
console.log(firstName) // Tom
console.log(ageOld) // 20
複製程式碼
  3. 單純的解構賦值，如果當前物件沒有該屬性，可以獲取到物件繼承的屬性
    let o = Object.create({a:'1',b:'2'}) //o繼承了{a:'1',b:'2'}物件
let {a} = o
console.log(o) //{}
console.log(a) //1
複製程式碼
  4. 解構賦值是淺拷貝，即如果一個鍵的值是複合型別的值（陣列、物件、函式）、那麼解構賦值拷貝的是這個值的引用，而不是這個值的副本
     let obj = { a: { b: 1 } };
 let { a } = obj;
 obj.a.b = 3;
 console.log(a.b) // 3
複製程式碼
物件的擴充套件運算子
  • 這是ES2018引入的規則，之前是不支援的
  • 擴充套件運算子的解構賦值也是淺拷貝
    let obj = { a: { b: 1 } };
  let { ...x } = obj;
  obj.a.b = 3;
  console.log(x.a.b) // 3
複製程式碼
  • 擴充套件運算子後面必須接一個變數，並且放到最後面
    let { x, ...{ y, z } } = o; //報語法錯誤
複製程式碼
  • 擴充套件運算子的解構賦值，不能複製繼承自原型物件的屬性
    const o = Object.create({ x: 1, y: 2 });
  o.z = 3;

  let { x, ...newObj } = o;
  let { y, z } = newObj;
  x // 1  普通的物件的解構賦值，可以獲取來自原型物件的屬性
  y // undefined  擴充套件運算子的解構賦值取不到原型物件的屬性，因此newObj = {z:3}，只有z屬性
  z // 3
複製程式碼

陣列解構

  1. 按照位置依次解構賦值,可以賦預設值
    let color = ['red','green','blue']
let [first, second='yellow'] = color
console.log(first) // red
console.log(second)// green

let [ , , third] = color
console.log(third) // blue
複製程式碼
  2. 互換變數名(無需再借助中間變數)
    let a= 1, 
    b= 2;
[a, b] = [b, a]
console.log(a,b) //2,1
複製程式碼
  3. 使用擴充套件運算子完成剩餘項賦值
    let color = ['red','green','blue']
let [first, ...restColor] = color //剩餘項必須放在最後面
console.log(first) // red
console.log(restColor)// ["green", "blue"]
複製程式碼
    常用的應用：陣列的賦值 （傳統的方法是使用 .concat()函式）
    let color = ['red','green','blue']
let [...colorArr] = color
console.log(colorArr) // ["red", "green", "blue"]    
複製程式碼

函式引數解構

function setcookie(name, value, { secure, path, domain, expires= 500 }){
    //...
}
// 但這樣寫有個問題，第三個解構的實參必須要傳一個物件，否則解構的{ secure, path, domain, expires= 500 } = undefined 會報錯
setcookie('load','123') //報錯

更完善的寫法是函式引數賦預設值
function setcookie(name, value, { secure, path, domain, expires= 500 } = {}){
    //...
}
複製程式碼

相關文章