解构含义

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

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)

效果截图:

 针对上述场景，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)

 效果截图:

跳过数组中的元素 

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

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)

效果截图：

  

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)

效果截图:

提取嵌套值 

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

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

效果截图: