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学习版图