[JavaScript]解构赋值详解，2024年最新JavaScript的for循环与双重for循环

或者异或的方法

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

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年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

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

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

p1024c （备注前端）**
[外链图片转存中…(img-SsIBr8bW-1712783673352)]

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-wjJCbiPS-1712783673352)]