首页
学习
活动
专区
工具
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...数组 开发中用的最多的是一维数组,当然特殊岗位除外(比如:算法工程师)。重点掌握对数组的动态赋值、根据索引取值以及遍历等操作。

37110

【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.2K20

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

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

    92210

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

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

    77850

    一文快速上手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) 要批量导入前面导出的

    2K10

    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以前是这样的。

    68620

    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标签指定具体跳出那层循环,示例如下

    50410

    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

    ECMAScript 6 笔记(一)

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

    1K30

    ES6——解构赋值(Destructuring)

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

    86940

    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 解构赋值 解构赋值指的是,按照一定模式从数组、对象中提取值...数组元素是按照顺序排列的,变量取值由元素次序决定,而对象的属性的值则是取决于属性名称。因此对象的解构赋值是先找到同名的属性,再给对应的变量赋值,赋值给变量而非属性名。

    54030

    前端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

    ECMAScript 6之变量的解构赋值

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

    3.3K70

    前端无法让我冷静

    对象来请求数据的 fetch window的一个方法 主要特点是 1、第一个参数是URL 2、第二个参数可选参数 可以控制不同的init对象 3、使用了js 中的promise对象 data-xxx 属性的作用是什么...,prototype是什么,什么时候用 prototype对象是实现面向对象的一个重要机制 在JavaScript中没有类的概念,都是函数 1.原型和原型链是JS实现继承的一种模型。...)、pop()、unshift()、shift() 不同的是 push()、pop() 是从数组的尾部进行增减,unshift()、shift() 是从数组的头部进行增减。...Vue中如何监控某个属性值的变化?...Array 2 个不包含任何值的数据类型: null undefined ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

    2.5K40
    领券