Spreadsegmentfault
以前的rest
只是应用于数组中,ES9
给Object
也新增了rest
和spread
方法。数组
巧了,这两个方法的符号都是 —— ...
(俗称三个点)学习
展开操做符spa
将两个对象合并到一块儿rest
const input = { a: 1, b: 2 } const output = { c: 3 }
能够使用...的方式code
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()
也能够合并元素,可是它有一些缺陷,若是不太清楚的能够看 ES6(六)—— Objectblog
使用spread
会将重复元素替换且由于是合并,因此不会丢失元素,推荐使用rem
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 }
剩余操做符,这个能够将对象的剩余元素和成一个新的对象,原理和spread
正好相反。get
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}