当前位置: 首页 > 网络应用技术

JavaScript解构5个常见场景和实例

时间:2023-03-06 20:18:47 网络应用技术

  解构分配语法是JavaScript表达式。通过解构分配,属性/值可以从对象/数组中取出并分配给其他变量。该语法是eCmascript 6规范,它引入了一种新的语法,可以轻松从数组和对象中获取值。

  让我们看一下如何在JavaScript中解构对象,这可以从该产品对象的简单示例开始。

  这样,您可以通过以下方式访问相应的属性:

  解码可以使代码更加清晰和简洁。如果您需要解构更复杂的对象?这是对象中的对象。

  现在假设您需要从产品列表数据中获取产品之一的属性,如下所示:

  在这里,产品列表嵌套了几层,需要访问产品的信息,这可以尽可能地解构级别以获取产品对象的属性。

  以上代码仅用于显示其用法。不建议在项目开发中的阵列中获取对象信息。

  通常,数据列表不一定需要是一个数组。从采集效率的角度来看,地图对象的访问高于数组效率。您可以将上述数据更改为映射对象,如下:

  在JavaScript中,数据可以是变量和方法,因此解构分配也适用于函数参数的定义,如下:

  当使用诸如React或Vue之类的框架时,有许多地方可以解构和分配值,例如引入方法等。

  如果要创建与属性名称不同的变量,则可以使用对象解构的别名函数。

  要访问的属性的名称是变量名称。特定用法如下:

  您可以使用动态名称提取变量属性(在运行时已知属性名称):

  表达式应计算为属性名称(通常是字符串),标识符应指示解构后创建的变量名称。用法如下:

  在上面的代码中,可以遵循更新值的值。

  将其余的语法添加到解构中,其余属性收集了未通过解构模式拾取的剩余附件键。

  解构后,变量标识符包含属性值。变量是具有其他属性的普通对象。

  对于阵列,您可以获得REST的静止实现的第一个值:

  如前所述,您可以在解构数组时分配无声识别:

  这样,它可以确保如果未定义,则存在默认值。

  脱粘是一个非常实用的功能,已添加到ES6版本的JavaScript。通过解构,您可以快速,方便地从对象和数组中提取属性或数据以分离变量。它适用于嵌套对象,可以分配给数字数组。