JS(解构) 之数组和对象中提取数据总结

冷不防 2022-09-13 15:24 142阅读 0赞

# 解构含义 #

解构功能含义:从复杂数据类型中(数组或对象)中提取数据的过程。

# 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)

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16][] 针对上述场景，four=underfinder 是不愿看到的。

**解决办法**:提前给变量赋上默认值

const names = ['zzg', 'zcx', 'zcy']
    const[one, two, three, four='wz'] = names
    console.log(one)
    console.log(two)
    console.log(three)
    console.log(four)

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

## 跳过数组中的元素 ##

**实际场景**:在实际开发过程中，想要跳过数组中的某个元素取值，这样就可以避免取到不想取的值。

ES6提供解决方案：使用逗号运算符进行分隔，用于避免分配相应的数组元素，直接跳到下一个元素。如果想要跳过多个元素，多加几个逗号就可以了。

const names = ['zzg', 'zcx', 'zcy']
    const[one, two, three, four='wz'] = names
    const[first, , third] = names
    console.log(first)
    console.log(third)

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

## 分配数组中剩下的给某元素 ##

**实际场景**:如果从数组中提取单个元素，那么对于想要取数组中的后面连续部分的元素怎么处理？

ES6提供解决方案：通过在最后一个变量前加 `...` 标记，作用：分配数组中剩下的所有元素给 `rest` 变量。

const names = ['zzg', 'zcx', 'zcy']
    const[one, two, three, four='wz'] = names
    const[first, ...rest] = names
    console.log(first)
    console.log(rest)

效果截图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

# JS(解构) 之对象 #

描述一个人的对象：

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)

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

## 提取嵌套值 ##

**实际场景**:在实际开发过程中，对象数据值存在嵌套现象，对于提取对象结构中深层次的值该怎么处理？

ES6提供解决方案：通过冒号可以描述对象中的路径，这样就可以取到对象中深层的嵌套值

const person = {
        'name': '周志刚',
        'age': 30,
        'facts':{
            'hobby': '读书、厨艺',
            'worker': 'java Developer'
        }
    }
    const{facts:{worker}} = person
    console.log(worker)

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

## 数据缺失时填充默认值 ##

**实际场景**:在解构对象时，当想要抽取的值不存在时，可以给对象里的值赋默认值。

实例：获取person 对象中不存在的属性值address.

const person = {
        'name': '周志刚',
        'age': 30,
        'facts':{
            'hobby': '读书、厨艺',
            'worker': 'java Developer'
        }
    }
    const{facts:{address}} = person
    console.log(address)

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

上述的结果,address= underfined 是不愿意看到的。

针对上述问题的解决办法:为address 属性值填充默认值。

const person = {
        'name': '周志刚',
        'age': 30,
        'facts':{
            'hobby': '读书、厨艺',
            'worker': 'java Developer'
        }
    }
    const{facts:{address='广东.深圳'}} = person
    console.log(address)

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

## 解构函数参数 ##

业务需求：编写一个函数，接受一个对象作为参数。直接在参数列表中对对象进行解构。

实例：定义一个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))

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c693b7c46f3249e18afa3442ccea9018.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/3a5c23a27df34804847b9f64014485ed.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/16a0135c2fb44d62a8eb9a2752a662bc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/f069af90d9c04cef8dd21ae5472cdc6a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/ead2eaf2eb9c48fe9b33df414c417156.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/3b18754dfebb4da0aa6e8929ac2d8aae.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/8985424974594640be1dbeaa237db65b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/bfb4c0bfedb3444bb21869f5fab814f2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/29b5db50690248169ce32fa28d2c0ad8.png