JavaScript 解构怎么用

JavaScript解构怎么用

平时写代码的时候，你是不是经常遇到要从数组或对象里拿单个数据的情况？比如从一串数字里取第一个数，或者从一个用户信息里拿名字和手机号。如果按老办法写，可能要多写好几行代码，看着乱糟糟的。这时候JavaScript里的“解构”就派上用场了——它就像给你准备了一把小剪刀，能精准剪下你需要的内容，省力气又清晰。

数组解构：给数据“分家”

数组是用中括号包起来的一串数据，比如[3, 5, 7]，要是想拿里面的数，以前你得写const a = arr[0]、const b = arr[1]，现在用解构，一行就能搞定。

比如你整理了一周的早餐计划，是个数组['豆浆', '油条', '包子', '粥']，想把前两种早餐单独存起来，不用按索引挨个取，直接写const [breakfast1, breakfast2] = 早餐计划数组，这样breakfast1就自动是“豆浆”，breakfast2是“油条”。

要是数组里有些内容你暂时不用，还能跳过它们。比如早餐计划里不想提包子，就写const [first, second, , fourth] = ['豆浆', '油条', '包子', '粥']，第三个位置留空，最后fourth就是“粥”，刚好跳过了包子。

还有个很实用的小功能——默认值。比如你的外卖单是[12, 20]，分别是主食价格和配送费，要是有的订单没写配送费，就想给配送费设个默认的3元，用解构就可以写const [price, delivery = 3] = [12]，这时候delivery就会自动是3，不会出现“undefined”的错误提示。

对象解构：按名字“拎东西”

对象是用大括号包起来的键值对，比如用户信息{name: '小明', age: 25, phone: '138xxxx1234'}，以前要拿名字得写const name = user.name，拿手机号得const phone = user.phone，解构就不一样了，它是按键的名字来取，不用管顺序。

比如你拿到了外卖订单的对象{orderId: '20240520001', food: '宫保鸡丁', address: 'XX小区3栋201'}，想把订单号和地址单独存起来，直接写const {orderId, address} = 订单对象，这两个变量就自动拿到了对应的值，比挨个点属性方便多了。

如果担心变量名冲突，比如你已经有一个orderId的变量了，想给对象里的订单号换个名字，解构也能改。比如写const {orderId: myOrderId} = 订单对象，那新变量就是myOrderId，存的就是订单号，不会和之前的变量重名。

和数组一样，对象解构也能设默认值。比如订单对象里没写备注，你想给备注设个默认的“无特殊要求”，就写const {remark = '无特殊要求'} = 订单对象，就算对象里没有remark这个键，remark变量也会有值，不会报错。

解构的常用小场景

除了单独拿数据，解构还有不少好用的地方。比如函数传参的时候，如果参数是对象，用解构能直接拿到里面的内容，不用在函数里再写params.name。比如你写一个发送短信的函数，参数是对象{phone, content}，调用的时候直接传sendSms({phone: '138xxxx1234', content: '取件码1234'})，函数里就能直接用phone和content，不用再从参数对象里拆。

还有交换两个变量的值，以前得用中间变量，比如let a = 1, b = 2; let temp = a; a = b; b = temp，用解构的话，一行就搞定[a, b] = [b, a]，直接把两个变量的值交换，不用中间变量，写起来超简洁。

其实解构就是让你不用再重复写“对象名.属性”或者“数组[索引]”，把需要的内容直接“拎”出来，代码看着更清爽，也不容易写错。平时写代码的时候多试试，慢慢就能熟练用起来啦。