2024年阿里大神最佳总结：如何在JavaScript中使用对象解构(1)，学习前端开发的步骤

2401_84620303

已于 2024-05-07 21:05:49 修改

阅读量929

点赞数 7

分类专栏：程序员文章标签： javascript 学习面试

于 2024-05-07 21:05:48 首次发布

本文链接：https://blog.csdn.net/2401_84620303/article/details/138545721

版权

程序员专栏收录该内容

95 篇文章 0 订阅

订阅专栏

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

realName: ‘Bruce Wayne’

};

var name = hero.name;var realName = hero.realName;

name; // => ‘Batman’,

realName; // => ‘Bruce Wayne’

属性hero.name值已分配给变量name。将相同的hero.realName值分配给realName。

这种访问属性并将其分配给变量的方法需要样板代码。通过编写var name = hero.name，您必须提及name两次绑定，对于相同realName。

这就是对象解构语法有用的地方：您可以读取属性并将其值分配给变量，而无需重复属性名称。不仅如此，您还可以在一个语句中读取同一对象的多个属性！

让我们重构上面的脚本，并应用对象分解来访问属性name和realName：

const hero = {

realName: ‘Bruce Wayne’

};

const { name, realName } = hero;

name; // => ‘Batman’,

realName; // => ‘Bruce Wayne’

const { name, realName } = hero是对象销毁分配。这个语句定义变量name和realName，然后分配给他们的属性值hero.name和hero.realNamecorrespondigly。

比较两种访问对象属性的方法：

const name = hero.name;

const realName = hero.realName;

// is equivalent to:

const { name, realName } = hero;

可以看到，由于属性名称和对象变量都没有重复，因此对象的分解更加方便。

2.提取属性

对象解构的基本语法非常简单：

const { identifier } = expression;

哪里identifier是要访问的属性名称，expression应评估为一个对象。销毁后，变量identifier包含属性值。

这是使用属性访问器的等效代码：

const identifier = expression.identifier;

让我们在实践中尝试对象分解：

const hero = {

realName: ‘Bruce Wayne’

};

const { name } = hero;

name; // => ‘Batman’

该语句const { name } = hero定义变量name，并使用hero.nameproperty的值对其进行初始化。

3.提取多个属性

要将对象分解为多个属性，请枚举任意数量的属性，并,在之间添加逗号：

const { identifier1, identifier2, …, identifierN } = expression;

其中identifier1，…identifierN是要访问的属性的名称，expression应评估为对象。销毁后，变量identifier1…identifierN包含相应的属性值。

这是等效的代码：

const identifier1 = expression.identifier1;

const identifier2 = expression.identifier2;

// …

const identifierN = expression.identifierN;

让我们再次看一下第一部分中的示例，其中提取了2个属性：

const hero = {

realName: ‘Bruce Wayne’

};

const { name, realName } = hero;

name; // => ‘Batman’,

realName; // => ‘Bruce Wayne’

const { name, realName } = hero创建2个变量name并realName分配相应属性hero.name和的值hero.realName。

4.默认值

如果已解构的对象不具有在解构分配中指定的属性，则将变量分配给undefined。让我们看看它是如何发生的：

const hero = {

realName: ‘Bruce Wayne’

};

const { enemies } = hero;

enemies; // => undefined

解构后的变量enemies是undefined因为该属性enemies在对象中不存在hero。

幸运的是，如果该属性在解构对象中不存在，则可以设置默认值。基本语法如下：

const { identifier = defaultValue } = expression;

哪里identifier是要访问的属性名称，expression应评估为一个对象。销毁后，变量identifier包含属性值，或者defaultValue如果identifier属性不存在则分配给变量。

这是等效的代码：

const identifier = expression.identifier === undefined ?

defaultValue : expression.identifier;

让我们更改先前的代码示例，并使用默认值功能：

const hero = {

realName: ‘Bruce Wayne’

};

const { enemies = [‘Joker’] } = hero;

enemies; // => [‘Joker’]

现在，undefined该变量enemies默认为，而不是['Joker']。

5.别名

如果要创建名称与属性不同的变量，则可以使用对象分解的别名功能。

const { identifier: aliasIdentifier } = expression;

identifier是要访问的属性的名称，aliasIdentifier是变量的名称，expression应评估为对象。销毁后，变量aliasIdentifier包含属性值。

等效代码：

const aliasIdentifier = expression.identifier;

这是一个对象分解别名功能的示例：

const hero = {

realName: ‘Bruce Wayne’

};

const { realName: secretName } = hero;

secretName; // => ‘Bruce Wayne’

看一下const { realName: secretName } = hero，解构定义了一个新变量secretName（别名变量），并为其分配了值hero.realName。

6.从嵌套对象中提取属性

在前面的示例中，对象很简单：属性具有原始数据类型（例如字符串）。

通常，对象可以嵌套在其他对象中。换句话说，某些属性可以包含对象。

在这种情况下，您仍然可以从深处使用对象分解和访问属性。基本语法如下：

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp是保存嵌套对象的属性的名称。identifier是要从嵌套对象访问的属性名称。expression应该评估变形后的对象。

销毁后，变量identifier包含嵌套对象的属性值。

上面的语法等效于：

const identifier = expression.nestedObjectProp.identifier;

您可以从中提取属性的嵌套级别不受限制。如果要从深处提取属性，只需添加更多嵌套的花括号：

const { propA: { propB: { propC: { … } } } } = object;

例如，对象hero包含一个嵌套对象{ city: 'Gotham'}。

const hero = {

realName: ‘Bruce Wayne’,

address: {

city: ‘Gotham’

}

};

// Object destructuring:

const { address: { city } } = hero;

city; // => ‘Gotham’

通过对象解构，const { address: { city } } = hero您可以city从嵌套对象访问属性。

7.提取动态名称属性

您可以将具有动态名称的属性提取到变量中（属性名称在运行时是已知的）：

const { [propName]: identifier } = expression;

propNameexpression应该计算为属性名称（通常是字符串），并且identifier应该指示在解构之后创建的变量名称。第二个expression应该评估要分解的对象。

没有对象分解的等效代码：

const identifier = expression[propName];

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。