带你探索 JavaScript 解构赋值

本文将带领大家学习如何利用解构赋值提高代码可读性和维护性，通过实例讲解对象和数组的解构赋值，以及默认值和别名的使用方法

数组解构赋值

首先我们需要了解一下为什么需要学习解构赋值

接下来我给大家对比一下传统写法与解构赋值写法定义多个变量的方式

传统写法：

let x = 10, y = 20, z = 30;
//或者`
`let` x = `10`
`let` y = `20`
`let` z = `30`
`

结构赋值的写法：

let [x, y, z] = [10, 20, 30];
console.log(x) //10
console.log(y) //20
console.log(z) //30

由此可见解构赋值的写法更加简单方便一些。左边是变量，右边是值。只需要把右边的值填充赋值给左边就可以了。

当然解构赋值还可以这么玩，它支持任何数据类型

let [x ,y, z] = [1, [2,3,4,5], {a:1, b:2, c:3}];
console.log(x); //1
console.log(y[1]); //3
console.log(z.b); //2

解构赋值还有一个很常用的机巧：交换两个变量的值

let [x, y] = [10, 20];
[y, x] = [x, y];
console.log(x, y); //20 10

在扩展一个小技巧，正常情况下 return 只能返回一个值，我们可以利用解构赋值实现 return 多个值

function show() {
    return ["结果1", "结果2", "结果3"];
}
let` [a, b, c] = `show`();
`console`.`log`(a, b, c) `//结果1 结果2 结果3`
`

需要注意的是数组解构赋值 顺序必须保持一致

对象解构赋值

解构赋值不仅仅针对数值，对象也是可以的

let { uname, sex, age } = { sex: '男', uname: '刘宇阳', age: 19 };
console.log(uname, sex, age); //刘宇阳 男 19

function show({ uname, age, sex }) {
    console.log("我叫" + uname + "，今年" + age + ",是一个" + sex + "孩");
}
show({
    age: 19,
    uname: "刘宇阳",
    sex: "男"
})

大家有没有发现对象解构与数组解构方式是不一样的，对象解构它的顺序是乱的，但一样可以解构出正确的值，那是因为对象是以键值对形式自动匹配并赋值的。而数组是通过顺序赋值的，这一点一定要注意

对象取别名

有些情况下对象的健可能会与当前作用域的变量名冲突，那么我们可以给对象定义一个别名

let { uname:a, sex:sex, age:age } = { sex: '男', uname: '刘宇阳', age: 19 };
console.log(a, sex, age); // 刘宇阳 男 19

如果键值是一样的，比如 uname:uname，那么可以简写为 uname，它们的作用是等价的

let { uname, sex, age:age } = { sex: '男', uname: '刘宇阳', age: 19 };
console.log(uname, sex, age); // 刘宇阳 男 19

默认值

最后在扩展一个小技巧，解构默认值

数组默认值

//右边有值则赋值
let [a, b, c] = [10, 20, 30];
console.log(a, b, c); //10 20 30
//没有值则以默认值
let [aa = 1, bb = 1, cc = 1] = [];
console.log(aa, bb, cc); //1 1 1

对象默认值

//右边有值就赋值
let { a = 1, b = 2, c = 3 } = { a: 100, b: 200, c: 300 };
console.log(a, b, c); // 100 200 300
//右边没有值就以默认值为准
let { aa = 1, bb = 2, cc = 3 } = {};
console.log(aa, bb, cc); // 1 2 3