ES9(三) —— Object.rest.spread

目錄

• Spread

  • 屬於淺拷貝，可是並非引用，修改值原對象不會改變。
  • 若是有相同的元素就進行替換
  • 能夠合併多個對象
  • 解決了Object.assign()的總體替換丟失元素的缺陷
• rest
• ES6-ES10學習版圖

以前的rest只是應用於數組中，ES9給Object也新增了rest和spread方法。

巧了，這兩個方法的符號都是 —— ... （俗稱三個點）

Spread

展開操做符

淺拷貝，但並非引用，修改值原對象不會變

將兩個對象合併到一塊兒

const input = {
  a: 1,
  b: 2
}

const output = {
  c: 3
}

能夠使用...的方式

const input = {
  a: 1,
  b: 2
}

const output = {
  ...input,   // 打散到output中，淺拷貝
  c: 3
}

console.log(input, output)
// {a: 1, b: 2} {a: 1, b: 2, c: 3}
input.a = 4
console.log(input, output)
// 拷貝的形式用的，不是引用，因此原對象沒有進行改變
// {a: 4, b: 2} {a: 1, b: 2, c: 3}

若是有相同的元素就進行替換

const input = {
  a: 1,
  b: 2
}

const output = {
  ...input,
  a: 3
}

console.log(input, output)
// {a: 1, b: 2} {a: 3, b: 2}
input.a = 4
console.log(input, output)
// {a: 4, b: 2} {a: 4, b: 2}

能夠合併多個對象

再加一個對象

const input = {
  a: 1,
  b: 2
}
const test = {
  d: 5
}
// 將兩種對象都直接放到目標對象中
const output = {
  ...input,
  ...test,
  c: 3
}

console.log(input, output)
// {a: 1, b: 2} {a: 1, b: 2, d: 5, c: 3}
input.a = 4
console.log(input, output)
// {a: 4, b: 2} {a: 1, b: 2, d: 5, c: 3}

解決Object.assign()總體替換丟失元素的缺陷

以前說過Object.assign()也能夠合併元素，可是它有一些缺陷，若是不太清楚的能夠看 ES6（六）—— Object

使用spread會將重複元素替換且由於是合併，因此不會丟失元素，推薦使用

const target = {
  a: {
      b: {
          c: 2
      }
  },
  e: 5,
  f: 6,
  h: 10
}
const source = {
  ...target,
  a: {
      b: {
          c: 3
      }
  },
  e: 2,
  f: 3
}
console.log(source)
// { a: { b: { c: 3 } }, e: 2, f: 3, h: 10 }

rest

剩餘操做符，這個能夠將對象的剩餘元素和成一個新的對象，原理和spread正好相反。

const input = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5
}

const { a, b, ...rest } = input
console.log(a, b, rest)
// 1 2 {c: 3, d: 4, e: 5}

ES6-ES10學習版圖