ES6:对象以及函数参数解构

2,952 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

  1. 解构:

也就是从对象或者数组中提取变量进行赋值

  1. 为什么提出:

提取数据对象需要逐个赋值,可能会为了一个小数据挖掘整个结构,ES6给数组和对象添加了解构可以方便提取数据

  1. 数组解构跳转

对象解构

不严谨但又可以通俗理解的话,可以理解成把对象比喻成高达,分解结构,从而获取机械碎片(属性)
如何获取?通过 {} 获取

let obj = {
    name: 'jojo',
    sex: 'man',
    height: 191
}
let { name, sex, height } = obj
console.log(name, sex, height) // jojo, man, 191

为什么,因为里面相当于是:

let obj = {
    name: 'jojo',
    sex: 'man',
    height: 191
}
let name = obj.name
let sex = obj.sex
let height = obj.height

这样无异于变繁琐了,甚至还可以这样

let obj = {
    name: 'jojo',
    sex: 'man',
    height: 191
}
let { sex } = obj
let newObj = {
    name: '龙舌兰姑娘',
    sex
}
console.log(newObj.sex) // man

有时候需要自定义key,那么也可以这样

let obj = {
    name: 'jojo',
    sex: 'man',
    height: 191
}
let { name: myName } = obj
console.log(myName) // jojo

难免会碰到嵌套结构,那么自然也考虑进去了

let obj = {
    name: 'jojo',
    sex: 'man',
    height: 191,
    child: {
        name: 'jojo_2'
    }
}
let { name: myName, child: {name: childName} } = obj // 重名会报错
console.log(myName, childName) // jojo, jojo_2

当不确定对象中是否有的时候,可以用 = 给一个默认值
对象中能找到该属性时,对象中的属性会覆盖默认值

let obj = {
    name: 'jojo',
    sex: 'man',
    height: 191
}
let { name, sex, height=200 } = obj
console.log(name, sex, height) // jojo, man, 191

对象中没这个属性时,会使用默认值

let obj = {
    name: 'jojo',
    sex: 'man'
}
let { name, sex, height=200 } = obj
console.log(name, sex, height) // jojo, man, 200

同时,除了数组、对象,函数中的传参也可以使用解构,或给默认参数
默认值被覆盖:

function fn({name, height=200} = {}){
    console.log(name, height) // jojo, 191
}
let obj = {
    name: 'jojo',
    sex: 'man',
    height: 191
}
fn(obj)

使用默认值时:

function fn({name, height=200} = {}){
    console.log(name, height) // jojo, 200
}
let obj = {
    name: 'jojo',
    sex: 'man'
}
fn(obj)