41.解构赋值

目录

1  数组解构

1.1  基本用法

1.2  交换值

1.3  数组排序

1.4  多解构多余的会变为undefined

1.5  少的就按顺序来

1.6  解构其余的值

1.7  默认解构值

1.8  跳过一些值

1.9  支持多维数组

2  对象解构

2.1  基本用法

2.2  数组套对象

2.3  多级对象

2.4  数组套多级对象


1  数组解构

1.1  基本用法

这样写会将数组中的对应值,直接放到指定的变量中

41.解构赋值_第1张图片

可以使用const,let,var进行声明

41.解构赋值_第2张图片

1.2  交换值

之前我们将a,b交换值需要引入一个变量c,现在可以使用数组解构进行交换,代码中的分号是必要的

41.解构赋值_第3张图片

41.解构赋值_第4张图片

由于实质上是重新赋值,所以不可以用const进行声明

41.解构赋值_第5张图片

41.解构赋值_第6张图片

1.3  数组排序

基于上面的交换值,我们可以给都是数值的数组进行排序

外层的i轮循环,有多少个数就会有(多少个-1)轮循环,-1的原因最后一个数不用比,别的已经比完了,最后自然就是最大的

内层的j轮循环,只跟后面的比,所以-i,最后一个不用比,所以-1,如果我比后面大就往后放

41.解构赋值_第7张图片

我们用[2,3,1]这个数组说一下这个代码的逻辑

2比3小不换,2比1大换,现在的数组是 [1,3,2],由于-1了,所以不用再比自身了

3比2大换,现在的数组是[1,2,3]了,由于-1了,所以不用再比自身了

1.4  多解构多余的会变为undefined

41.解构赋值_第8张图片

1.5  少的就按顺序来

1.6  解构其余的值

即使只有一个剩余,也是以数组的形式赋值的

1.7  默认解构值

有的会覆盖掉默认值,没有的会补上

1.8  跳过一些值

1.9  支持多维数组

多维数组表现形式为 中括号套中括号

41.解构赋值_第9张图片

2  对象解构

2.1  基本用法

41.解构赋值_第10张图片

对象中的键叫什么名字,你解构出来的对象也必须叫什么名字,如果你在解构中用到对象中没有的名字就会返回undefined

41.解构赋值_第11张图片

如果想改名的话要这样改

41.解构赋值_第12张图片

2.2  数组套对象

41.解构赋值_第13张图片

2.3  多级对象

41.解构赋值_第14张图片

  • 如果想给family解构成一个对象,那么就不需要写后面的内容了

41.解构赋值_第15张图片

2.4  数组套多级对象

解构时加个中括号就行了

41.解构赋值_第16张图片

你可能感兴趣的:(JavaScript笔记,前端)