ES6：区分解构与扩展运算符

最新推荐文章于 2023-09-07 09:23:48 发布

原创最新推荐文章于 2023-09-07 09:23:48 发布 · 456 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #ES6

学习笔记专栏收录该内容

68 篇文章

订阅专栏

本文详细介绍了JavaScript中的扩展运算符（...）和解构赋值的概念及用法。扩展运算符用于复制对象或数组，而解构赋值则用于方便地获取对象的属性值。两者结合能实现单层深拷贝，适用于灵活地按需取值。此外，还探讨了它们在数组和对象深拷贝、函数传参等方面的应用。

这两者结合可以实现单层深拷贝，导致之前混淆了，今天发现不是一回事，记录下：

总结：

…扩展运算符是自动遍历取值，可实现一层深拷贝，因为其原理就是遍历赋值

let bar = { a: 1, b: 2 };let baz = { ...bar }; // 等价let baz= { a: 1, b: 2 }

解构是取出指定元素/属性，取代 obj.name这种传统写法，多用于传参、嵌套解构赋值等

let bar = { a: 1, b: 2 };let {a,b}= bar; // a: 1, b: 2

两者结合，即自动遍历一层再解构赋值，可实现灵活的深拷贝（还是单层，只循环赋值了一次）

let bar = { a: 1, b: 2 };let {a}= {...bar}; // 右边遍历，左边按需解构赋值

扩展运算符(遍历一层深拷贝)+解构赋值(按需取值)=灵活的按需取值深拷贝；
在这里插入图片描述

扩展运算符

…

用于取出参数对象中的所有可遍历属性

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // 等价let baz= { a: 1, b: 2 };
//等价于let baz = Object.assign({}, bar);

可用于数组深拷贝：

var arr2 = arr;
var arr3 = [...arr];
console.log(arr===arr2); //true, 说明arr和arr2指向同一个数组
console.log(arr===arr3); //false, 说明arr3和arr指向不同数组

可用于对象深拷贝：

let arr = { a: 1, b: 2 }; var arr2 = arr;
var arr3 = {...arr};
console.log(arr===arr2); //true, 说明arr和arr2指向同一个数组
console.log(arr===arr3); //false, 说明arr3和arr指向不同数组

解构

** let {xx} = obj;**

解构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值

let bar = { a: 1, b: 2 };
let {a,b}= bar ; // a: 1, b: 2

可用于函数传参

var arr = {name:'zzc',age:16,sex:'man'};

function fn1({name, age, sex}) {
    console.log(name);
    console.log(age);
    console.log(sex);
}
fn1(arr);