【JS】JS之解构赋值

解构赋值

传统写法

const data = [100, 200]
let a = data[0]
let b = data[1]
console.log(a, b)
console.log('--------------------')

解构语法

// * 模板 = 集合（数组，对象）
// ! 数组
let [uname, email] = ['老马', 'nx99@qq.com']
console.log(uname, email);
// 更新数据
// 在 [],{},() 之前的分号; 不能省
;[uname, email] = ['老王', 'nx88@qq.com']
console.log(uname, email)
console.log('--------------------');
// 1.参数少于值数量， 多出的参数给默认值
;[uname, email, gender = '女'] = ['老李', 'nx66@qq.com']
console.log(uname, email, gender);
// 2. 参数少于值数量，...rest
;[uname, ...arr] = ['老刘', 'nx55@qq.com', '女']
console.log(uname, arr) //多余的数压缩到了arr数组中
console.log(uname, ...arr) //展开arr数组
console.log('--------------------');

应用场景1：交换二个数

let x = 10
let y = 20
console.log(`x = ${x}, y = ${y}`);
;[x, y] = [y, x]
console.log(`x = ${x}, y = ${y}`)
console.log('--------------------');

应用场景2：对象解构

// ? 变量名 === 属性名
let { num, price } = { num: 2, price: 5000 }
console.log(num, price)
    // []{}()之前分号不能省略
    //{}不能出现在等号左边（左值），所以要加上括号（）转成表达式
    ; ({ num, price } = { num: 5, price: 6000 })
console.log(num, price)
// 命名冲突，别名
let { pname, price: uniPrice } = { pname: '手机', price: 8000 }
console.log(pname, uniPrice)
console.log('--------------------');

应用场景3：克隆对象

let lesson = { name: 'ES6', scroe: 80 }
console.log(lesson)
//如果想创建二个不相关的对象，值又一样，只能克隆
let { ...obj } = lesson
console.log(obj)
console.log(obj === lesson)
console.log('--------------------');

应用场景4:解构传参

let show = function (user) {
    //user是一个对象
    return `${user.uname}: (${user.email})`
}
let user = { uname: '老马', email: 'nx99@qq.com' }
console.log(show(user))
// 简化，使用对象解构方法传参
show = function ({uname,email}) {
    //user是一个对象
    return `${uname}: (${email})`
}
user = { uname: '老李', email: 'nx88@qq.com' }
console.log(show(user))