JS(解构) 之数组和对象中提取数据总结 |
您所在的位置：网站首页 › 数组嵌套对象取值方法 › JS(解构) 之数组和对象中提取数据总结 |
JS(解构) 之数组和对象中提取数据总结
|
解构含义
解构功能含义:从复杂数据类型中(数组或对象)中提取数据的过程。 JS(解构) 之数组 从数组中提取首个元素方式一：基于数组下标提取元素 const names = ['zzg', 'zcx', 'zcy'] const it = names[0] console.log(it)方式二：基于ES6 新语法(const) 提起数组元素 const names = ['zzg', 'zcx', 'zcy'] const[one] = names console.log(one) 从数组中提取连续多个元素 const names = ['zzg', 'zcx', 'zcy'] const[one, two] = names console.log(one) console.log(two) 数组元素缺失时填充默认值示例：以names 数组为基础，我们尝试获取数组的第四个元素，然而数组总共只有三个元素，会出现什么样的结果? const names = ['zzg', 'zcx', 'zcy'] const[one, two, three, four] = names console.log(one) console.log(two) console.log(three) console.log(four)效果截图:
解决办法:提前给变量赋上默认值 const names = ['zzg', 'zcx', 'zcy'] const[one, two, three, four='wz'] = names console.log(one) console.log(two) console.log(three) console.log(four)效果截图:
实际场景:在实际开发过程中，想要跳过数组中的某个元素取值，这样就可以避免取到不想取的值。 ES6提供解决方案：使用逗号运算符进行分隔，用于避免分配相应的数组元素，直接跳到下一个元素。如果想要跳过多个元素，多加几个逗号就可以了。 const names = ['zzg', 'zcx', 'zcy'] const[one, two, three, four='wz'] = names const[first, , third] = names console.log(first) console.log(third)效果截图:
实际场景:如果从数组中提取单个元素，那么对于想要取数组中的后面连续部分的元素怎么处理？ ES6提供解决方案：通过在最后一个变量前加 ... 标记，作用：分配数组中剩下的所有元素给 rest 变量。 const names = ['zzg', 'zcx', 'zcy'] const[one, two, three, four='wz'] = names const[first, ...rest] = names console.log(first) console.log(rest)效果截图：
描述一个人的对象： const person = { 'name': '周志刚', 'age': 30, 'facts':{ 'hobby': '读书、厨艺', 'worker': 'java Developer' } } 从对象中提取数据实战：从person 对象中提取name 和age 属性值 const person = { 'name': '周志刚', 'age': 30, 'facts':{ 'hobby': '读书、厨艺', 'worker': 'java Developer' } } const{name, age} = person console.log(name) console.log(age)效果截图:
实际场景:在实际开发过程中，对象数据值存在嵌套现象，对于提取对象结构中深层次的值该怎么处理？ ES6提供解决方案：通过冒号可以描述对象中的路径，这样就可以取到对象中深层的嵌套值 const person = { 'name': '周志刚', 'age': 30, 'facts':{ 'hobby': '读书、厨艺', 'worker': 'java Developer' } } const{facts:{worker}} = person console.log(worker)效果截图:
实际场景:在解构对象时，当想要抽取的值不存在时，可以给对象里的值赋默认值。 实例：获取person 对象中不存在的属性值address. const person = { 'name': '周志刚', 'age': 30, 'facts':{ 'hobby': '读书、厨艺', 'worker': 'java Developer' } } const{facts:{address}} = person console.log(address)效果截图:
上述的结果,address= underfined 是不愿意看到的。 针对上述问题的解决办法:为address 属性值填充默认值。 const person = { 'name': '周志刚', 'age': 30, 'facts':{ 'hobby': '读书、厨艺', 'worker': 'java Developer' } } const{facts:{address='广东.深圳'}} = person console.log(address)效果截图:
业务需求：编写一个函数，接受一个对象作为参数。直接在参数列表中对对象进行解构。 实例：定义一个toString 函数，接收person 对象作为参数，输出person 对象的name,age 和不存在的address 属性值（facts嵌套属性） const person = { 'name': '周志刚', 'age': 30, 'facts':{ 'hobby': '读书、厨艺', 'worker': 'java Developer' } } const toString = ({name, age, facts:{address='广东.深圳'}})=>{ return `My name is ${name}, age is ${age}, come from ${address}` } // toString 函数被调用 console.log(toString(person))效果截图:
|
针对上述场景，four=underfinder 是不愿看到的。
【本文地址】
今日新闻 |
推荐新闻 |