展开运算符与解构赋值

• 展开运算符

用于将一个数组或对象展开成多个独立的元素或属性

 const arr = [1, 2, 3];
const newArr = [...arr, 4, 5]; // 展开后为 [1, 2, 3, 4, 5]

const obj = { a: 1, b: 2 };
const newObj = { ...obj, c: 3, d: 4 }; // 展开后为 { a: 1, b: 2, c: 3, d: 4 }

展开运算符不能用在对象当中，因为目前展开运算符只能在可遍历对象（iterables）可用。iterables的实现是依靠[Symbol.iterator]函数，而目前只有Array,Set,String内置[Symbol.iterator]方法，而Object尚未内置该方法，因此无法使用展开运算符。

（1）两个对象连接返回新的对象。

 let x = {
            name:'tom'
        };
        let y = {
            age:19
        }
        let z = {...x,...y};
        console.log(z);

（2）两个数组连接返回新的数组。在ES6的世界中，我们可以直接加一个数组直接合并到另外一个数组当中。

let x = [100,20,500]
let y = ['lili','jerry']
let z = [...x,...y]
console.log(z);

（3）数组加上对象返回新的数组

 let x = [{
            uname:'lili'
        }];
        let y = {
            age:19
        };
        let z = [...x,y];
        console.log(z);

展开运算符可以将一个类数组对象变成一个真正的数组对象。

（4）数组+字符串

 let x = ['elva','tom',100,200];
 let y = 'lili';
// 将x里面的内容，展开放置在 下面这个数组中
 let z = [...x,y];
console.log(z);

• 解构赋值

用于将一个数组或对象的元素或属性分别赋值给变量

const arr = [1, 2, 3];
const [a, b, c] = arr; // 解构后 a = 1, b = 2, c = 3

const obj = { a: 1, b: 2 };
const { a, b } = obj; // 解构后 a = 1, b = 2

数组型的解构赋值

//以前，为变量赋值，只能直接指定值
var a = 1;
var b = 2;
var c = 3;
//而 ES6 允许写成下面这样：
var [a, b, c] = [1, 2, 3]; // a = 1，b = 2，c = 3

可嵌套

let [a, [[b], c]] = [1, [[2], 3]]; // a = 1，b = 2，c = 3

可忽略

 let [x, , y] = [1, 2, 3]；// x = 1 ，y = 3

解构不仅可以用于数组，还可以用于对象。对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

通过展开运算符和解构赋值，我们可以更方便地处理数组和对象，提高代码的可读性和简洁性。