数组解构

Posted fengrenfan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了数组解构相关的知识,希望对你有一定的参考价值。

1,其实在ES6出现了之后,更新的很多,这些都是要去理解和学习的。

2,最近对于数组解构这个东西做了一个学习,觉得对于数据解构的有比较大的用处,所以po出来。

3,解构的分类有很多种类型:数组的解构赋值,对象的解构赋值,字符串的解构赋值,布尔值的解构赋值,函数参数的解构赋值,数值的解构赋值。

现在先来了解一下数组的解构赋值:

  

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8  
15         <script>
16             //数组结构
17             {
18                 let a,b;
19                 [a,b] = [1,2];
20                 console.log(a,b);  // 1  2
21             }
22             {
23                 let a,b;
24                 [a,...b] = [1,2,3,4,5.5,6]; //a取第一个值,剩余的都赋给b
25                 console.log(a,b); //1 [2, 3, 4, 5.5, 6]
26             }
27             {
28                 let [a,b,...c] =[‘a‘];
29                 console.log(a,b,c);  //a undefined []
30             }
31             {
32                 let a = 11;
33                 let b = 22;
34                 /*let temp = 0;
35                 temp = a;
36                 a = b;
37                 b = temp;
38                 console.log(a,b); //22 11*/
39                 [a,b] = [b,a];
40                 console.log(a,b);  //22 11
41             }
42             {
43                 function f(){
44                     return [22,55];
45                 }
46                 let a ,b ;
47                 [a,b] = f();
48                 console.log(a,b);  //22 55
49             }
50             {
51                 //默认值赋值,当我们没有第二个参数时候,参数如果有默认值就取默认值的内容,没有则undefined
52                 let a,b;
53                 [a,b=20] =[40];
54                 console.log(a,b);  //40 20
55             }
56             {
57                 //缺省的适配模式的数组结构
58                 function ff(){
59                     return [22,33,44,66,9,‘test‘,‘cc‘,5];
60                           //a ,  ,  ,   ,b
61                  }
62                 let a ,b;
63                 [a,,,,b]= ff();
64                 console.log(a,b);//22 9
65                 [a,,,...b]=ff();
66                 console.log(a,b);//22 [66, 9, "test", "cc", 5]
67             }
68         </script>
69     </body>
70 </html>

 

以上是关于数组解构的主要内容,如果未能解决你的问题,请参考以下文章

有没有办法使用相同的布局动态创建片段并向它们显示数据?

数组的解构赋值

ES6数组的解构赋值( 下)

如何同时解构和复制数组?

浅谈解构(js)

浅谈解构(js)