[JavaScript]解构赋值详解，前端开发实战讲解

嵌套数组解构

像对象一样，数组也可以进行嵌套解构

示例：

const color = [‘#FF00FF’, [255, 0, 255], ‘rgb(255, 0, 255)’];

// Use nested destructuring to assign red, green and blue

// 使用嵌套解构赋值 red, green, blue

const [hex, [red, green, blue]] = color;

console.log(hex, red, green, blue); // #FF00FF 255 0 255

字符串解构

在数组解构中，解构的目标若为可遍历对象，皆可进行解构赋值，可遍历对象即实现Iterator接口的数据

let [a, b, c, d, e] = ‘hello’;

/*

a = ‘h’

b = ‘e’

c = ‘l’

d = ‘l’

e = ‘o’

*/

对象解构

---

基础对象解构

let x = { y: 22, z: true };

let { y, z } = x; // let {y:y,z:z} = x;的简写

console.log(y); // 22

console.log(z); // true

赋值给新变量名

当使用对象解构时可以改变变量的名称

let o = { p: 22, q: true };

let { p: foo, q: bar } = o;

console.log(foo); // 22

console.log(bar); // true

如上代码var {p: foo} = o 获取对象 o 的属性名 p，然后赋值给一个名称为 foo 的变量

解构默认值

如果解构取出的对象值是undefined，我们可以设置默认值

let { a = 10, b = 5 } = { a: 3 };

console.log(a); // 3

console.log(b); // 5

赋值给新对象名的同时提供默认值

前面提到过我们赋值给新的对象名，这里我们可以给这个新的对象名提供一个默认值，如果没有解构它，就会自动使用默认值

let { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); // 3

console.log(bb); // 5

同时使用数组和对象解构

在结构中数组和对象可以一起使用

const props = [

{ id: 1, name: ‘Fizz’ },

{ id: 2, name: ‘Buzz’ },

{ id: 3, name: ‘FizzBuzz’ },

];

const [, , { name }] = props;

console.log(name); // “FizzBuzz”

不完全解构

let obj = {p: [{y: ‘world’}] };

let {p: [{ y }, x ] } = obj;//不解构x

// x = undefined

// y = ‘world’

赋值剩余值给一个对象

let {a, b, …rest} = {a: 10, b: 20, c: 30, d: 40};

// a = 10

// b = 20

// rest = {c: 30, d: 40}

嵌套对象解构（可忽略解构）

let obj = {p: [‘hello’, {y: ‘world’}] };

let {p: [x, { y }] } = obj;

// x = ‘hello’

// y = ‘world’

let obj = {p: [‘hello’, {y: ‘world’}] };

let {p: [x, { }] } = obj;//忽略y

// x = ‘hello’

注意事项

---

小心使用已声明变量进行解构

错误示范：

let x;

{x} = {x: 1};

JavaScript引擎会将{x}理解为一个代码块，从而产生语法错误，我们要避免将大括号写在行首，避免JavaScript将其解释为代码块

正确写法：

let x;

({x} = {x: 1});

正确写法将整个解构赋值语句放在一个圆括号里，就可以正确执行了

函数参数的解构赋值

函数的参数也可以使用解构赋值

function add([x, y]) {

return x + y;

}

add([1, 2]);

上面代码中，函数add的参数表面上是一个数组，但在传参的时候，数组参数就被解构为变量x和y了，对于函数内部来说，就和直接传入x和y是一样的

解构的用途

---

解构赋值的用法很多

交换变量的值

let x = 1;

let y = 2;

[x, y] = [y, x];

上面的代码交换x和y的值，这样的写法不仅简洁而且易读，语义清晰

从函数返回多个值

函数只能返回一个值，如果要返回多个值，我们只能将这些值放置数组或对象里返回，当我们有了解构赋值后，从对象或数组里取出这些值犹如探囊取物

// 返回一个数组

function example() {

return [1, 2, 3];

}

let [a, b, c] = example();

// 返回一个对象

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

低效又漫长，而且极易碰到天花板技术停滞不前！**
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-ZAeoPxjP-1710899687671)]
[外链图片转存中…(img-wKrjK8Zn-1710899687672)]
[外链图片转存中…(img-9R3IQtSO-1710899687673)]
[外链图片转存中…(img-9rhRI3Gb-1710899687673)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-joT2Hocr-1710899687674)]