JavaScript 解构赋值怎么用

你平时写代码的时候，是不是经常会遇到需要从数组或者对象里拿单个数据的情况？比如要把奶茶店点单列表里的“珍珠”“椰果”单独存成变量，或者把用户信息里的“名字”“手机号”快速拆出来？以前你可能会写好几行代码，现在有个简单的方法——JavaScript的解构赋值，就能帮你省好多事。

先看数组怎么拆：像拆快递一样取元素

数组是按顺序存数据的，比如你点的奶茶配料数组是["珍珠", "椰果", "布丁"]，要拿第一个和第三个配料，以前的写法是：

`javascript

const toppings = ["珍珠", "椰果", "布丁"];

const topping1 = toppings[0];

const topping3 = toppings[2];

`

现在用解构赋值，直接一行搞定：

`javascript

const [topping1, , topping3] = toppings;

`

注意中间的逗号——因为第二个元素“椰果”你不需要，就空着位置。最后topping1就是“珍珠”，topping3是“布丁”，是不是比挨个取方便多了？

要是想给不想取的元素留个默认值也简单，比如万一配料数组是空的，你想让topping1默认是“原味”，就这么写：

`javascript

const [topping1 = "原味", , topping3 = "红豆"] = [];

`

这样即使数组没内容，变量也不会变成undefined，就像你提前给外卖备注“没配料就加原味”，不会空着手回来。

再看对象怎么拆：像查字典一样找键值

对象是靠“键”存数据的，比如用户信息对象是{name: "小明", phone: "138xxxx1234", age: 25}，以前要拿名字和手机号，得写：

`javascript

const user = {name: "小明", phone: "138xxxx1234", age: 25};

const name = user.name;

const phone = user.phone;

`

用解构赋值的话，直接按键名找，还能改变量名：

`javascript

const {name: username, phone, age = 18} = user;

`

这里name: username是把键name的值存到新变量username里，避免和别的地方的name重名；age = 18是默认值，万一age没写，变量就是18，就像用户没填年龄就默认18岁，不会出现“年龄未知”的情况。

嵌套解构：拆“套娃”数据更省心

要是遇到嵌套的对象或数组，比如你从后台拿了个订单，里面包含用户信息和配料：const order = {user: {name: "小红"}, toppings: ["珍珠", "椰果"]}，以前要拿用户名字和第二个配料，得一层层取：

`javascript

const userName = order.user.name;

const secondTopping = order.toppings[1];

`

用嵌套解构，直接拆：

`javascript

const {user: {name: userName}, toppings: [, secondTopping]} = order;

`

就像拆套娃，外层拆完拆内层，一下就能拿到需要的数据，不用反复找下标或键名。

日常用的小技巧：函数传参也能拆

你可能不知道，函数的参数也能用解构。比如写个做奶茶的函数，参数是配料数组，以前得先判断有没有数组，再取元素：

`javascript

function makeMilkTea(toppings) {

const first = toppings[0] || "原味";

return 加${first}的奶茶;

}

`

现在直接在参数里解构：

`javascript

function makeMilkTea([first = "原味"]) {

return 加${first}的奶茶;

}

`

要是参数是对象，比如订单对象，也能直接拆键名：

`javascript

function showOrder({name, phone}) {

return 订单联系人：${name}，手机号：${phone};

}

`

调用的时候直接传对象就行，不用在函数里再取属性，代码干净多了。

总结一下，解构赋值就是把“手动拆数据”的活儿交给代码，数组按位置取、对象按键名取，嵌套的能一层层拆，函数参数里用还能省代码。平时写业务逻辑的时候多试试，慢慢就能体会到它比挨个取数据省了多少重复的代码。