深刻探讨JavaScript 中的对象解构

2022年05月15日 阅读数:3
这篇文章主要向大家介绍深刻探讨JavaScript 中的对象解构,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量。git

基础解构

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName, lastName } = fullName; // 解构语法
console.log(firstName); // Quintion
console.log(lastName); // Tang
复制代码

正如上面的代码片断中看到的那样,在解构语法中,分解了 firstName 对象属性并将其分配给表达式左侧定义的变量。在上述场景中,对象的属性名称应与左侧表达式中定义的变量匹配。 若是定义其余变量名称,则获取不到想要的值,如:github

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName, trueName } = fullName; // 解构语法
console.log(firstName); // Quintion
console.log(trueName); // undefined
复制代码

因为在 fullName 中没有属性 trueName ,因此它被初始化为 undefinedui

别名解构

若是须要把对象属性赋值给属性名不一致的变量名,能够以下代码来实现:url

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName: trueName, lastName } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang
复制代码

默认值解构

在上面代码中有看到,对象中不存在特定属性的解构,通常会赋值为 undefined ,若是不但愿是 undefined ,能够为其设置一个默认值,以下:spa

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang
console.log(age); // 18
复制代码

下面来看下存在 age 属性下的结果:.net

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
    age: 30,
};
const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang
console.log(age); // 30
复制代码

REST解构

若是想从一个对象中解构一个属性,剩下的属性结构为另外一个变量,以下:rest

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
    age: 30,
};
const { age, ...username } = fullName; // 解构语法
console.log(username); // { firstName: 'Quintion', lastName: 'Tang' }
console.log(age); // 30
复制代码

在上面的代码片断中,将 username 属性分配给了一个变量,并使用了 rest 运算符 (...) 将变量的其他部属性分配给了一个单独的对象。code

源码附件已经打包好上传到百度云了,你们自行下载便可~对象

连接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27

百度云连接不稳定,随时可能会失效,你们抓紧保存哈。get

若是百度云连接失效了的话,请留言告诉我,我看到后会及时更新~

开源地址

码云地址:
http://github.crmeb.net/u/defu

Github 地址:
http://github.crmeb.net/u/defu

开源不易,Star 以表尊重,感兴趣的朋友欢迎 Star,提交 PR,一块儿维护开源项目,造福更多人!