深入探讨 JavaScript 中的对象解构

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

基础解构

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

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

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

由于在 fullName 中没有属性 trueName ，所以它被初始化为 undefined。

别名解构
如果需要把对象属性赋值给属性名不一致的变量名，可以如下代码来实现：

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

默认值解构
在上面代码中有看到，对象中不存在特定属性的解构，一般会赋值为 undefined ，如果不希望是 undefined ，可以为其设置一个默认值，如下：

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 属性下的结果：

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 解构
如果想从一个对象中解构一个属性，剩下的属性结构为另一个变量，如下：

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 运算符 (…) 将变量的其余部属性分配给了一个单独的对象。

源码附件已经打包好上传到百度云了，大家自行下载即可～

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

百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～

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

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

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

深入探讨 JavaScript 中的对象解构

猜你喜欢