web前端Javascript基础之Javascript 中的解构赋值语法
小职 2021-04-16 来源 :前端先锋 阅读 587 评论 0

摘要:本文主要介绍了web前端Javascript基础之Javascript 中的解构赋值语法,通过具体的内容向大家展现,希望对大家前端开发框架Javascript的学习有所帮助。

本文主要介绍了web前端Javascript基础之Javascript 中的解构赋值语法,通过具体的内容向大家展现,希望对大家前端开发框架Javascript的学习有所帮助。

web前端Javascript基础之Javascript 中的解构赋值语法

首先在 ES6中引入的“解构赋值语法”允许把数组和对象中的值插入到不同的变量中。虽然看上去可能很难,但实际上很容易学习和使用。

  

数组解构

数组解构非常简单。你所要做的就是为数组中的每个值声明一个变量。你可以定义更少的变量,而不是数组中的索引(即,如果你只想解处理前几个值),请跳过某些索引或甚至使用 REST 模式将所有剩余的值放到新数组中。

 

const nums = [ 3, 6, 9, 12, 15 ];

const [

  k,              // k = 3

  l,              // l = 6

  ,               // Skip a value (12)

  ...n            // n = [12, 15]

] = nums;

对象解构

对象解构与数组解构非常相似,主要区别是可以按名称引用对象中的每个key,从而创建一个有相同名称的变量。此外还可以将键解构为新的变量名,只解构所需的 key,然后用 rest 模式将剩余的 key 解构为新对象。

 

const obj = { a: 1, b: 2, c: 3, d: 4 };

const {

  a,              // a = 1

  c: d,           // d = 3

  ...rest         // rest = { b: 2, d: 4 }

} = obj;

嵌套解构

嵌套对象和数组可以通过相同的规则来进行解构。区别在于可以将嵌套 key 或值直接解构为变量,而不必将父对象存储在变量本身中。

 

const nested = { a: { b: 1, c: 2 }, d: [1, 2]};

const {

  a: {

    b: f,         // f = 1

    ...g          // g = { c: 2 }

  },

  ...h            // h = { d: [1, 2]}

} = nested;

高级解构

由于数组的行为与对象相似,所以可以通过使用索引作为对象解构分配中的 key,用解构分配语法从数组中获取特定值。用这种方法还可以得到数组的其他属性(例如数组的 length)。最后,如果解构后的值是 undefined,则还可以为解构过程中的变量定义默认值。

 

const arr = [ 5, 'b', 4, 'd', 'e', 'f', 2 ];

const {

  6: x,           // x = 2

  0: y,           // y = 5

  2: z,           // z = 4

  length: count,  // count = 7

  name = 'array', // name = 'array' (not present in arr)

  ...restData     // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' }

} = arr; 


我是小职,记得找我

✅ 解锁高薪工作

✅ 免费获取基础课程·答疑解惑·职业测评

web前端Javascript基础之Javascript 中的解构赋值语法

本文由 @小职 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程