解构赋值：轻松提取数组与对象数据的高效方式

各位看官，咱们今天聊聊一个在编程世界里能让你瞬间变高效的小技巧——解构赋值。别害怕，这名字听着挺唬人，其实简单得很，就像从一堆糖果罐子里，挑出你最爱的那几种口味，不用挨个打开，直接抄起勺子，精准命中！

想象一下，你面前摆着一盘精致的水果拼盘，里面有草莓、香蕉、苹果、葡萄…… 如果你想把每种水果都拿出来，传统的做法可能要这样：

const 水果拼盘 = ["草莓", "香蕉", "苹果", "葡萄"];

const 水果1 = 水果拼盘[0]; // 草莓
const 水果2 = 水果拼盘[1]; // 香蕉
const 水果3 = 水果拼盘[2]; // 苹果
const 水果4 = 水果拼盘[3]; // 葡萄

console.log(水果1, 水果2, 水果3, 水果4); // 草莓 香蕉 苹果 葡萄

嗯，没毛病，但总觉得有点笨重，是不是像极了你吭哧吭哧搬砖的样子？尤其是当水果种类多起来的时候，这代码简直让人崩溃。

现在，解构赋值闪亮登场！只需要一行代码，就能搞定：

const 水果拼盘 = ["草莓", "香蕉", "苹果", "葡萄"];

const [草莓, 香蕉, 苹果, 葡萄] = 水果拼盘;

console.log(草莓, 香蕉, 苹果, 葡萄); // 草莓 香蕉 苹果 葡萄

是不是感觉眼前一亮？就像变魔术一样，直接把水果的名字从数组里“解构”出来了，优雅，实在是太优雅了！

解构数组：按位置精准打击

解构数组的精髓在于“按位置对应”。就像排队领奖，第一个位置的人领第一个奖，第二个位置的人领第二个奖，以此类推。

const 英雄联盟战队 = ["RNG", "EDG", "FPX", "TES"];

const [冠军, 亚军, 季军, 第四名] = 英雄联盟战队;

console.log(冠军, 亚军, 季军, 第四名); // RNG EDG FPX TES

在这个例子中， "RNG" 对应数组的第一个位置，所以被赋值给了 冠军， "EDG" 对应第二个位置，所以被赋值给了 亚军，以此类推。

如果我只想取前几个，后面的不要了呢？ 没问题！

const 英雄联盟战队 = ["RNG", "EDG", "FPX", "TES"];

const [冠军, 亚军] = 英雄联盟战队;

console.log(冠军, 亚军); // RNG EDG

只需要写你想提取的变量名即可，后面的自动忽略。就像你只想吃水果拼盘里的草莓和香蕉，其他的留给别人就好啦！

如果我想跳过某个位置呢？ 也很简单！

const 英雄联盟战队 = ["RNG", "EDG", "FPX", "TES"];

const [冠军, , 季军] = 英雄联盟战队; // 跳过亚军

console.log(冠军, 季军); // RNG FPX

用逗号, 占位，表示跳过该位置。就像你突然不想吃香蕉了，直接跳过，吃苹果！

如果我想把剩下的所有水果都打包带走呢？ 这就要用到rest参数了（也叫剩余参数）。

const 英雄联盟战队 = ["RNG", "EDG", "FPX", "TES", "WBG"];

const [冠军, 亚军, ...其他战队] = 英雄联盟战队;

console.log(冠军, 亚军, 其他战队); // RNG EDG ["FPX", "TES", "WBG"]

...其他战队 就像一个神奇的垃圾袋，把除了冠军和亚军之外的所有战队都装进了一个新的数组 其他战队 里。以后再也不用担心剩下的东西没地方放啦！

解构对象：按属性名精准查找

解构对象就更厉害了，它不需要按位置，只需要按属性名来查找。就像你想要从一个装满各种书籍的书架上，找到一本叫做《JavaScript高级程序设计》的书，你不需要从第一本开始翻，只需要直接找到书名对应的位置就行了。

const 个人信息 = {
  姓名: "张三",
  年龄: 30,
  职业: "程序员",
  爱好: " coding, reading, gaming"
};

const { 姓名, 年龄, 职业, 爱好 } = 个人信息;

console.log(姓名, 年龄, 职业, 爱好); // 张三 30 程序员 coding, reading, gaming

这里，{ 姓名, 年龄, 职业, 爱好 } 就像一个搜索器，它会去 个人信息 对象里查找对应的属性名，并把值赋给对应的变量。

如果对象的属性名和变量名不一样怎么办？ 可以使用冒号 : 来重命名。

const 个人信息 = {
  name: "张三",
  age: 30,
  job: "程序员",
  hobby: " coding, reading, gaming"
};

const { name: 姓名, age: 年龄, job: 职业, hobby: 爱好 } = 个人信息;

console.log(姓名, 年龄, 职业, 爱好); // 张三 30 程序员 coding, reading, gaming

name: 姓名 的意思是，从 个人信息 对象里找到属性名为 name 的值，并把它赋值给变量 姓名。就像你给你的宠物取了一个昵称，但它还是原来的那只宠物。

如果对象里没有某个属性，但你又想用它怎么办？ 可以设置默认值。

const 个人信息 = {
  姓名: "张三",
  年龄: 30,
  职业: "程序员",
};

const { 姓名, 年龄, 职业, 爱好 = "睡觉" } = 个人信息;

console.log(姓名, 年龄, 职业, 爱好); // 张三 30 程序员 睡觉

这里，爱好 = "睡觉" 的意思是，如果 个人信息 对象里没有 爱好 属性，那么 爱好 变量的默认值就是 "睡觉"。这样就不会出现 undefined 的情况了，是不是很贴心？

对象解构也能用 rest 参数吗？ 当然可以！

const 个人信息 = {
  姓名: "张三",
  年龄: 30,
  职业: "程序员",
  爱好: " coding, reading, gaming",
  地址: "北京市"
};

const { 姓名, 年龄, ...其他信息 } = 个人信息;

console.log(姓名, 年龄, 其他信息); // 张三 30 {职业: "程序员", 爱好: " coding, reading, gaming", 地址: "北京市"}

...其他信息 会把除了 姓名 和 年龄 之外的所有属性都装进一个新的对象 其他信息 里。

解构赋值的妙用：函数参数的福音

解构赋值在函数参数里也能大显身手。想象一下，你要写一个函数，用来显示用户的个人信息：

function 显示个人信息(user) {
  console.log("姓名:", user.姓名);
  console.log("年龄:", user.年龄);
  console.log("职业:", user.职业);
}

const user = {
  姓名: "张三",
  年龄: 30,
  职业: "程序员"
};

显示个人信息(user);

每次都要用 user.属性名 来访问属性，是不是有点麻烦？用解构赋值可以简化代码：

function 显示个人信息({ 姓名, 年龄, 职业 }) {
  console.log("姓名:", 姓名);
  console.log("年龄:", 年龄);
  console.log("职业:", 职业);
}

const user = {
  姓名: "张三",
  年龄: 30,
  职业: "程序员"
};

显示个人信息(user);

直接在函数参数里解构对象，就可以直接使用属性名作为变量名了，代码瞬间清爽了不少！就像你直接把水果拼盘里的水果拿出来，放在手边，想吃哪个就吃哪个，方便快捷！

更厉害的是，你还可以给参数设置默认值：

function 显示个人信息({ 姓名 = "匿名", 年龄 = 0, 职业 = "无业游民" }) {
  console.log("姓名:", 姓名);
  console.log("年龄:", 年龄);
  console.log("职业:", 职业);
}

显示个人信息({}); // 姓名: 匿名 年龄: 0 职业: 无业游民

如果调用函数时没有传递任何参数，或者传递的参数对象里缺少某些属性，那么就会使用默认值。这样可以避免出现 undefined 的情况，让你的代码更加健壮。

解构赋值的注意事项

左右两边要对应: 解构赋值的左边是要声明的变量，右边是要解构的数组或对象。左右两边要对应起来，才能正确地提取数据。
变量名要合法: 解构赋值的变量名要符合 JavaScript 的命名规范，不能使用关键字或保留字。
注意解构的层级: 如果数组或对象是嵌套的，那么解构赋值也要对应到相应的层级。

总结

解构赋值是一个非常实用的 JavaScript 技巧，它可以让你更方便、更高效地提取数组和对象中的数据。掌握了解构赋值，你的代码会变得更加简洁、易读、易维护。就像你学会了一个新的魔法，可以轻松地从复杂的数据结构中提取出你想要的信息。

所以，还在等什么？赶紧用起来吧！让解构赋值成为你编程工具箱里的一把利器，助你披荆斩棘，一路高歌猛进！相信我，一旦你用习惯了，就会爱上它的！就像爱上了一个好用的工具，你会忍不住想用它来解决所有的问题。祝你编程愉快！

解构赋值：轻松提取数组与对象数据的高效方式

发表回复 取消回复

发表回复取消回复