ES6传播赋值嵌套对象

在ES6中，引入了传播（Spread）和解构（Destructuring）操作符，使嵌套对象的传播赋值更加简洁和易读。

传播操作符

传播操作符是一个三个点（...），可以将一个数组或者一个对象扩展到另一个数组或者另一个对象。

数组传播

在数组传播中，取出一个数组中的元素，插入到另一个数组中。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];

console.log(arr2); // [1, 2, 3, 4, 5, 6]

对象传播

在对象传播中，取出一个对象中的键值对，插入到另一个对象中。

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, d: 4 };

console.log(obj2); // {a: 1, b: 2, c: 3, d: 4}

嵌套对象传播

在嵌套对象中，可以让传播操作符嵌套使用，将多层嵌套的对象扁平化。

const obj1 = { a: 1, b: 2, c: { d: 3, e: 4 } };
const obj2 = { ...obj1, c: { ...obj1.c, f: 5 } };

console.log(obj2); // {a: 1, b: 2, c: { d: 3, e: 4, f: 5 }}

解构操作符

解构操作符是一个花括号（{}），可以将一个对象中的值取出来赋值给一个变量。

解构赋值

在解构中，将一个对象的键值对取出来，赋值给对应的变量。

const obj1 = { a: 1, b: 2 };
const { a, b } = obj1;

console.log(a, b); // 1, 2

嵌套解构

在嵌套对象中，可以用嵌套的解构操作符将多层嵌套的键值对取出来赋值给变量。

const obj1 = { a: 1, b: 2, c: { d: 3, e: 4 } };
const { a, b, c: { d, e } } = obj1;

console.log(a, b, d, e); // 1, 2, 3, 4

解构赋值和传播操作符一起使用

在嵌套对象中，解构赋值和传播操作符一起使用，可以将多个嵌套对象合并成一个新的对象。

const obj1 = { a: 1, b: 2, c: { d: 3, e: 4 } };
const obj2 = { f: 5, g: 6 };
const obj3 = { ...obj1, ...obj2, c: { ...obj1.c, f: 5 } };
const { c: { f }, ...rest } = obj3;

console.log(f, rest); // 5, { a: 1, b: 2, c: { d: 3, e: 4, f: 5 }, f: 5, g: 6 }

总结

ES6中，传播操作符和解构操作符的引入，大大简化了嵌套对象的传播赋值操作。可以减少代码的冗余，增加代码的可读性。