首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ES6:如何从嵌套的JS对象/对象数组中获取值,而不使用Switch-case语句

ES6提供了一种更简洁的方式来从嵌套的JS对象/对象数组中获取值,即使用解构赋值和可选的链式操作符。

  1. 解构赋值: 解构赋值是一种从数组或对象中提取值并赋给变量的方法。在嵌套的JS对象/对象数组中获取值时,可以使用解构赋值来简化操作。
代码语言:txt
复制
const obj = {
  foo: {
    bar: {
      baz: 'value'
    }
  }
};

const { foo: { bar: { baz } } } = obj;
console.log(baz); // 输出: value
  1. 可选链式操作符: 可选链式操作符(?.)是ES11(也称为ES2020)中引入的新特性,用于简化访问可能不存在的嵌套属性或方法的操作。它可以避免在访问嵌套属性或方法时遇到的"TypeError: Cannot read property 'xxx' of undefined"错误。
代码语言:txt
复制
const obj = {
  foo: {
    bar: {
      baz: 'value'
    }
  }
};

const value = obj?.foo?.bar?.baz;
console.log(value); // 输出: value

综合使用解构赋值和可选链式操作符,可以在ES6中从嵌套的JS对象/对象数组中获取值。

对于ES6的相关内容,可以参考以下链接:

腾讯云相关产品中,与云计算和前端开发相关的推荐产品有:

  • 云函数(Cloud Function):基于事件和触发器,实现云端运行特定的代码逻辑,可用于构建服务器端逻辑。了解更多请访问:云函数产品页
  • 云开发(Tencent CloudBase):提供一站式后端云服务,包括云数据库、云存储等功能,为前端开发者提供便捷的后端能力支持。了解更多请访问:云开发产品页
  • Serverless Framework:一个开源的前端应用框架,可快速搭建云上应用。了解更多请访问:Serverless Framework

请注意,以上仅是腾讯云相关产品的推荐,并不代表其他云计算品牌商的产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一文回顾 Java 入门知识(

首先是最最基础 Java 编码写法规则和结构,比如导图里:运算符、流程控制语句、循环、数组和方法这些内容;而后面的面向对象、以及面向对象三大特点:封装、继承和多态则是偏向思维层面的内容,这就不单要求你掌握...这里最需要注意细节: 自加(++)和自减(--)写在变量前后,其自身运算时机不同 Java赋值操作符是:= 不是== 逻辑运算符实际开发应用场景特别多,要熟练掌握 流程控制语句 简言之,程序执行过程...执行说明与应用场景: if条件:单 if 语句或多个单 if 语句连续判断 这种情况都有,程序在处理某个条件是否满足一个或多个条件 if-else:单独使用或复杂条件嵌套使用场景,处理某种业务多重判断某个具体条件是否满足...switch-case程序执行结构上来看和多个单 if 特别像,单switch-case判断条件类型要比if语句多,if条件接收是逻辑真假,switch-case还可将基本数据类型和String...数组 开发中用最多是一维数组,当然特殊岗位除外(比如:算法工程师)。重点掌握对数组动态赋值、根据索引取值以及遍历等操作。

36510

ES6基础】解构赋值(destructuring assignment)

今天文章笔者将从以下方面进行介绍: 使用数组表达式解构赋值 常规用法 忽略数组某些值 使用展开语法 默认参数值 嵌套数组解构 作为函数参数 使用对象表达式解构赋值 常规用法 默认参数值 嵌套对象...忽略数组某些值 如果只有两个变量,我们数组内容有三项,我们想跳过数组第二项,我们如何使用数组解构赋值呢?...默认参数值 笔者在《【ES6基础】默认参数值》这篇给大家介绍了如何使用默认参数值,在解构赋值,我们如何设置变量默认值呢,如下段代码所示: let [a, b, c = 3] = [1, 2]; console.log...(c); //Output "3” 嵌套数组 我们还可以多维数组中提取值并分配给变量,如下段代码所示: let [a, b, [c, d]] = [1, 2, [3, 4]]; 作为函数参数 我们还可以使用数组解构表达式作为函数参数来提取可迭代对象值..."Eden” 嵌套对象 我们还可以嵌套对象中提取属性值,即对象对象

1.7K80
  • ES6常用新特性学习3-解构赋值

    简介 ES6 允许按照一定模式,数组对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。...它提供了一种更加方便数据访问方法,对于代码简化有很大作用,也是使用非常频繁新特性。 2. 数组解构赋值 2.1 基本用法 以前,想要提取数组值赋值给相应变量,需要每一次进行单独赋值。...2.2 嵌套解构 上面说过,本质上,这种写法属于“模式匹配”,只要等号两边模式相同,左边变量就会被赋予对应值。所以可以使用嵌套数组进行解构。...对象解构赋值 3.1 基本用法 对象解构与数组有一个重要不同。数组元素是按次序排列,变量取值由它位置决定;而对象属性没有次序,变量必须与属性同名,才能取到正确值。...={属性名:值,...} 3.2 嵌套解构 与数组一样,解构也可以用于嵌套结构对象

    1.1K20

    【愚公系列】2023年03月 其他-Web前端基础面试题(JS_33道)

    1、让外部访问函数内部变量成为可能 2、局部变量会常驻在内存 3、可以避免使用全局变量,防止全局变量污染 4、会造成内存泄漏(有一块内存空间被长期占用,不被释放) 15、JS 基本数据类型...数组浅拷贝: 如果是数组,我们可以利用数组一些方法,比如 slice,concat 方法返回一个新数组特性来实现拷贝,但假如数组嵌套对象或者数组的话,使用 concat 方法克隆并不完整,...,即使嵌套对象,两者也互相分离,修改一个对象属性,不会影响另一个如何深拷贝一个数组1、这里介绍一个技巧,不仅适用于数组还适用于对象!...浅拷贝实现: 以上三个方法 concat,slice ,JSON.stringify 都是技巧类,根据实际项目情况选择使用,我们可以思考下如何实现一个对象数组浅拷贝,遍历对象,然后把属性和属性值都放在一个新对象里即可...仅检查值相等,=是一个更严格等式判定,如果两个变量值或类型不同,则返回false。 33、break和continue语句作用? Break语句当前循环中退出。

    91210

    JS 语法糖 0 ——解构

    JS 获取对象属性和访问数组内容是都是很常用操作, ECMAScript 6 开始,允许按照一定模式数组对象中提取值对变量进行赋值,这被称为解构(Destructuring)。...在这篇文章,你将会看到 JS 解构常见用法和技巧。 1.数组解构 1.1 简介 以前访问数组元素使用下标。...1.2 完全解构 如果左边模式变量能将右边数组元素全部解构出来,那么是完全解构。下面是一些使用嵌套数组进行完全解构例子。...真正被赋值是变量 baz,不是模式 foo。 与数组一样,解构也可以用于嵌套结构对象。...第一行语句中,模式是取数组第一个成员,跟圆括号无关;第二行语句中,模式是 p,不是 d;第三行语句与第一行语句性质一致。 7.用途 变量解构赋值用途很多。

    6.9K30

    JavaScript快速入门

    JS可以是一系列不同类型对象 var arr = [1,2,3,'hello',null,true] 长度 arr.length 假如给arr.length赋值,数组大小就会发生变化~ 通过下标来取值赋值...3.slice()截取Array一部分,返回一个新数组 也是[) 包头包尾 push,pop push,尾部压入 pop,尾部弹出 unshift(),shift...,使用特定字符串连接 多维数组 arr = [[1,2],[3,4],[5,6]]; arr[1][1]; 4 对象 对象是大括号,数组括号 var person = { name...易干人阅读和编写,同时也易干机器解析和生成,并有效地提升网络传输效率, 在JS中一切代码皆为对象,然后js支持类型都可以用JSON来表示 格式: 对象都用{} 数组都用【】 所有的键值对都用key:value...JS: 不是一种真正面向对象编程(OOP)语言,因为它语法没有class(类)—–es6以前是这样

    67920

    ECMAScript 6笔记(let,const 和 变量解构赋值)

    数组元素是按次序排列,变量取值由它位置决定;而对象属性没有次序,变量必须与属性同名,才能取到正确值。...(3)赋值语句中,不能将整个模式,或嵌套模式一层,放在圆括号之中。 可以使用圆括号情况 可以使用圆括号情况只有一种:赋值语句非模式部分,可以使用圆括号。...,不是声明语句;其次它们圆括号都不属于模式一部分。...第一行语句中,模式是取数组第一个成员,跟圆括号无关;第二行语句中,模式是p,不是d;第三行语句与第一行语句性质一致。...用途 交换变量值 [x, y] = [y, x]; 函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组对象里返回。有了解构赋值,取出这些值就非常方便。

    76250

    一文快速上手ES6

    所以,ECMAScript 是浏览器脚本语言规范,各种我们熟知 js 语言,如 JavaScript 则是 规范具体实现 3、ES6 新特性  1、let 声明变量 // var 声明变量往往会越域...ES6 可以这样: const [x,y,z] = arr;// x,y,z 将与 arr 每个位置对应来取值 // 然后打印 console.log(x,y,z);  2)、对象解构 const...1)、map map():接收一个函数,将原数组所有元素用这个函数处理后放入新数组返回。...类似 java 导包:要使用一个包,必须先 导包。 JS 没有包概念,换来是 模块。 模块功能主要由两个命令构成:`export`和`import`。...例如我要使用上面导出 util: // 导入 util import util from 'hello.js' // 调用 util 属性 util.sum(1,2) 要批量导入前面导出

    1.9K10

    ECMAScript 6 笔记(一)

    5. global对象 二、 变量解构赋值    ES6允许按照一定模式,数组对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。   1....数组元素是按次序排列,变量取值由它位置决定;   而对象属性没有次序,变量必须与属性同名,才能取到正确值。 对象解构赋值内部机制,是先找到同名属性,然后再赋给对应变量。...不能使用圆括号情况   (1)变量声明语句中,不能带有圆括号   (2)函数参数,模式不能带有圆括号。   (3)赋值语句中,不能将整个模式,或嵌套模式一层,放在圆括号之中。...第一行语句中,模式是取数组第一个成员,跟圆括号无关;第二行语句中,模式是p,不是d;第三行语句与第一行语句性质一致。   6....在ES6,有三类数据结构原生具备Iterator接口: 数组、某些类似数组对象、Set和Map结构 ,对象(Object)之所以没有默认部署Iterator接口,是因为对象哪个属性先遍历,哪个属性后遍历是不确定

    1K30

    JavaScript基础之四——选择与循环结构

    JavaScript基础之四——选择与循环结构     选择结构与循环结构是编程处理逻辑核心结构,JavaScript中支持if-else和switch-case选择结构,支持for,for-in...并且可以使用break与continue语句进行循环跳出,简单条件选择if语句示例如下: //if条件语句 if (true) { console.log("条件语句"); }; if (false...,其遍历出来数组下标,并不是其中值,这和C/OC,Swift等语言有所差异,也证明了数组在JavaScript其实就是一种特殊对象。    ...,break语句用于中断switch-case匹配或者跳出最近循环,跳出循环意思是指执行到break后,无论后面循环次数还有多少次,直接跳出,执行循环结构之后代码。...continue语句作用则是跳出最近本次循环,接着进行循环条件判断,如果满足会继续进行循环,并且如果有多层循环嵌套,break和continue也可以通过label标签指定具体跳出那层循环,示例如下

    49610

    前端vue面试题2021_vue框架面试题

    在堆空间中创建一个对象 this指向这个对象 执行构造函数语句 返回这个对象 6.请以自己理解讲解js堆和栈,以及深拷贝怎么解决?...(重点) 堆是用来存放引用数据类型,例如对象,数组,函数 栈是用来存放基本数据类型,变量和引用数据类型地址值 ; 体积小,数据经常变化 深拷贝解决方案 : 使用lodash 插件 使用递归解决深拷贝...(重点) 1 父子通信 在嵌套组件,父组件[子组件标签] 绑定自定义属性; 在子组件 props: { 子组件标签自定义属性名: { type: , default} } 2 子父通信 在嵌套组件...(重要) 小到代码:html结构/css样式/js处理数据时候es6新特性/生命周期销毁优化 大到项目结构:模块改造/组件抽取 vue本身:v-if和v-for使用/build打包时/sprite....promise如何使用 有什么作用(必背) promise是es6新增一个构造函数,是为了解决异步操作数据调用嵌套(回调地狱)问题。

    1.9K40

    ES6特性总结

    所以,ECMAScript是浏览器脚本语言规范,各种我们熟知js语言,如JavaScript则是规范具体实现。...ES6可以这样: const [x, y, z] = arr; //x,y,z将与arr每个位置对应来取值//然后打印 console.log(x, y, z); 对象结构 const person...对象优化 新增API ES6给Object拓展了许多新方法,如: keys(obj):获取对象所有key形成数组 values(obj):获取对象所有value形成数组 entries(obj...我们项目中会使用到这种异步处理方式; 9. 模块化 模块化就是把代码进行拆分,方便重复利用。类似java导包:要使用一个包,必须先导包。JS没有包概念,换来是模块。...比如我有一个文件:user.js: 省略名称 上面的导出代码,都明确指定了导出变量名,这样其它人在导入使用时就必须准确写出变量名,否则就会出错。

    2.1K10

    ES6——解构赋值(Destructuring)

    数组解构赋值 ES6 允许按照一定模式,数组对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。在ES6 之前为变量赋值,只能直接指定值。...let a = 1; let b = 2; let c = 3; ES6 可以将上面赋值表达式改写如下格式,数组中提取值,按照对应位置,对变量赋值。...对象解构赋值 对象解构与数组不同之处是。数组元素是按顺序排列,变量取值由它位置决定;而对象变量必须与属性同名,才能取到正确值。...真正被赋值是变量baz,不是模式foo。 与数组一样,解构也可以用于嵌套结构对象。...第一行语句中,模式是取数组第一个成员,跟圆括号无关;第二行语句中,模式是p,不是d;第三行语句与第一行语句性质一致。 解构用途 1.

    86040

    JavaScript第十二弹——ES6(上)

    1)保证了外部作用域无法读取内部作用域变量 2)保证了全局作用域不被污染,因此不再需要立即执行函数表达式使用 3)也防止了变量重复声明 3 箭头函数 箭头函数也是ES6非常重要一个变化点。...first+' '+last; PS注意 1)函数体内this对象就是定义时所在对象不是使用时所在对象 2)不可以当作构造函数,不可以new哦 3)没有argument对象,但是有rest...参数作为代替 4)不可以使用yield,因此箭头函数不能用作generator 不同于argument rest参数只包括那些没有给出名称参数,arguments包含所有参数 arguments 对象不是真正数组...,rest 参数是数组实例,可以直接应用sort, map, forEach, pop等方法 arguments 对象拥有一些自己额外功能 4 解构赋值 解构赋值指的是,按照一定模式数组对象中提取值...数组元素是按照顺序排列,变量取值由元素次序决定,而对象属性值则是取决于属性名称。因此对象解构赋值是先找到同名属性,再给对应变量赋值,赋值给变量而非属性名。

    53230

    ECMAScript 6之变量解构赋值

    1,数组解构赋值 基本用法 ES6允许按照一定模式,数组对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 以前,为变量赋值,只能直接指定值。...var [a, b, c] = [1, 2, 3]; 上面代码表示,可以数组中提取值,按照对应位置,对变量赋值。...本质上,这种写法属于“模式匹配”,只要等号两边模式相同,左边变量就会被赋予对应值。下面是一些使用嵌套数组进行解构例子。...因为解析器会将起首大括号,理解成一个代码块,不是赋值语句。 和数组一样,解构也可以用于嵌套结构对象。...第一行语句中,模式是取数组第一个成员,跟圆括号无关;第二行语句中,模式是p,不是d;第三行语句与第一行语句性质一致。 用途 变量解构赋值用途很多。

    3.3K70
    领券