[JavaScript]解构赋值详解

console.log(rest);

// expected output: [30, 40, 50]

数组解构

---

数组解构是非常简单简洁的，在赋值表达式的左侧使用数组字面量，数组字面量中的每个变量名称映射为解构数组的相同索引项

这是什么意思呢，就是如下面这个示例一样，左边数组中的项分别得到了右侧解构数组相应索引的值

let [a, b, c] = [1, 2, 3];

// a = 1

// b = 2

// c = 3

声明分别赋值

你可以通过变量声明分别解构赋值

示例：声明变量，分别赋值

// 声明变量

let a, b;

// 然后分别赋值

[a, b] = [1, 2];

console.log(a); // 1

console.log(b); // 2

解构默认值

如果解构取出的值是undefined，可以设置默认值：

let a, b;

// 设置默认值

[a = 5, b = 7] = [1];

console.log(a); // 1

console.log(b); // 7

在上面的例子中，我们给a和b均设置了默认值

这种情况下，如果a或b的值是undefined，它将把设置的默认值赋给相应变量（5赋给a，7赋给b）

交换变量值

以往我们进行两个变量的交换，都是使用

//交换ab

c = a;

a = b;

b = c;

或者异或的方法

然而在解构赋值中，我们可以在一个解构表达式中交换两个变量值

let a = 1;

let b = 3;

//交换a和b的值

[a, b] = [b, a];

console.log(a); // 3

console.log(b); // 1

解构函数返回的数组

我们可以直接解构一个返回值为数组的函数

function c() {

return [10, 20];

}

let a, b;

[a, b] = c();

console.log(a); // 10

console.log(b); // 20

在上面的例子中，**c()**的返回值[10，20]可以在单独的同一行代码中使用解构

忽略返回值（或跳过某一项）

你可以有选择性的跳过一些不想得到的返回值

function c() {

return [1, 2, 3];

}

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

console.log(a); // 1

console.log(b); // 3

赋值数组剩余值给一个变量

当你使用数组解构时，你可以把赋值数组剩余的部分全部赋给一个变量

let [a, …b] = [1, 2, 3];

console.log(a); // 1

console.log(b); // [2, 3]

这样的话b也会变成一个数组了，数组中的项是剩余的所有项

注意：

这里要小心结尾是不能再写逗号的，如果多了一个逗号将会报错

let [a, …b,] = [1, 2, 3];

// SyntaxError: rest element may not have a trailing comma

嵌套数组解构

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

示例：

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’

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-WZBFL0Nj-1715718682896)]

[外链图片转存中…(img-VO3iFCm3-1715718682896)]

[外链图片转存中…(img-XmDP0dxa-1715718682897)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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