ES6-解構賦值，語義增強，擴充套件運算子

非梧不棲發表於2018-06-24
賦值套件

1，解構賦值

  • 解構物件和陣列的區別是，物件解構出的屬性名必須一致，而陣列的隨意。

1.1，解構物件

1.1.1，直接解構物件

允許將某個物件的欄位的作用域本地化。
也就是說，提取自己需要的欄位，併為它們建立相應的變數。並且這個變數的宣告，會受到關鍵字var或是let的影響，

function fun() {
    let person = {
      name: 'www',
      age: 100,
      sex: 'girl'
    }
    var {name, sex} = person
    console.log(name, sex)  // www girl
}
console.log(window.sex)     // undefined
複製程式碼

1.1.2，解構作為引數傳入的物件

這裡，解構了傳入的物件

let getPerson = person => {
  // let {firstname} = person
  // console.log(`${firstname} is man`)
  console.log(`${person.firstname} is man`)
}
let person = {
  firstname: 'Beckham',
  lastname: 'David'
}
getPerson(person)
複製程式碼

也可以直接在傳參時解構

let getPerson = ({firstname}) => {
    console.log(`${firstname} is man`)
}
let person = {
  firstname: 'Beckham',
  lastname: 'David'
}
getPerson(person)
複製程式碼

1.2，解構陣列

1.2.1，基礎用法

直接解構，是按陣列的順序進行的

let [first] = ['beijing', 'shanghai', 'shenzhen']
console.log(first) // beijing

let [first, second] = ['beijing', 'shanghai', 'shenzhen']
console.log(first, second)  // beijing shanghai
複製程式碼

可以使用逗號，進行列表的匹配，跳過不需要的值

let [,,thrid] = ['beijing', 'shanghai', 'shenzhen']
console.log(thrid) // shenzhen
複製程式碼

1.2.2，其他用法

  1. 利用陣列進行，變數宣告並賦值時
let arr = ["one", "two", "three"];

let [first, second, third] = arr;
console.log(first); // "one"
console.log(second); // "two"
console.log(third); // "three"
複製程式碼
  1. 變數先宣告後賦值時
let a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
複製程式碼
  1. 可以在解構賦值時，設定預設值
let a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
複製程式碼
  1. 交換變數，可以不用定義第三個變數
let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
複製程式碼

2，語義增強

與解構恰恰相反，可以從全域性作用域中獲取變數，並將其轉為一個物件。
陣列類似。

let name = 'Backham',
  age = 100,
  print = function () {
    console.log(`${this.name},${this.age} `)
  }
let person = {name, age, print}
person.print() // Backham,100
複製程式碼

3，擴充套件運算子（三點運算子）

3.1，陣列

3.1.1，可以聯合陣列與陣列，或陣列與變數的內容

let country1 = ['beijing', 'shanghai', 'shenzhen']
let country2 = ['hangzhou', 'chengdu']
let all = [...country1, ...country2]
console.log(all.join()) // beijing, shanghai, shenzhen, hangzhou, chengdu

let c = 'suzhou'
let a = [c, ...country2]
console.log(a.join()) // suzhou, hangzhou, chengdu
複製程式碼

3.1.2，可以拆解陣列

let [first, ...country] = ['beijing', 'shanghai', 'shenzhen']
console.log(country.join()) // shanghai,shenzhen
複製程式碼

3.1.3，可以進行淺克隆

tips，淺克隆：當物件或陣列的欄位值被複制時，欄位所引用物件不會被複制。

let country = ['beijing', 'shanghai', 'shenzhen', {sex: 108}]
let country1 = [...country]
let c = country
console.log(c === country) //true，c和country指向同一個引用
console.log(country1 === country) // false，country1是一個新的陣列
console.log(country[3] === country1[3]) //true
複製程式碼

用處，可以在使用一些會影響原陣列的方法時，使用它的淺克隆物件。
比如，獲取陣列的最後一個元素，而不影響原陣列（當然使用length-1更優雅，這裡只是舉一個栗子）

let [...country] = ['beijing', 'shanghai', 'shenzhen']

let [last] = country.reverse()
console.log(last) // shenzhen
複製程式碼

3.2，物件

  • 物件類似。

相關文章