ES6——Day2（数组的解构赋值）

冷不防 2022-09-28 01:21 137阅读 0赞

1、Destructuring

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这称为“解构”。

2、不完全解构

等号左边的模式，只匹配一部分的等号右边的数组。

3、指定默认值

注意：ES6内部使用严格相等运算符（===）判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

4、let和const命令

只要某种数据结构具有lterator接口，都可以采用数组形式的结构赋值。

（1）数组解构

<script type="text/traceur">
    //ES5
    //var a =1;
    //var b=2;
    //var c=3;
    
    //ES6
    var [a,b,c] = [1,2,3];
    
    console.log(a);
    console.log(b);
    console.log(c);
    </script>

结果：1

2

3

（2）对应位置

let [foo,[[bar],base]] = [1,[[2],3]];
    console.log(foo);    //1;
    console.log(bar);    //2
    console.log(base);  //3
    
    let[, , third] = ["first",'second","third"];
    console.log(third);  //third
    
    let[one, ,three] = ["One","Two","Three"];
    console.log(one);     //One
    console.log(three);   //Three
    
    let [head,...tail] = [0,1,2,3,4,5,6,7,8,9];
    console.log(head);     //0
    console.log(tail);     //[1,2,3,4,5,6,7,8,9]

`（3）不完全解构`

<script type="text/traceur">
    let [x,y] = [1,2,3];
    console.log(x);    //1
    console.log(y);    //2
    
    let [a,[b],c] = [1,[2,3],4]; 
    console.log(a);   //1
    console.log(b);   //2/[2,3]
    console.log(c);   //4
    </script>

（4）指定默认值

<script type="text/traceur">
    var [temp = "string"] = [];
    console.log(temp);     //string
    
    var [temp = "string"] = ["tempString"];
    console.log(temp);     //tempString
    
    var [x="aaa",y] = ["bbb"];
    console.log(x);      //bbb
    console.log(y);     //undefined
    
    var [m,n="aaa"] = ["bbb"];
    console.log(m);    //bbb
    console.log(n);     //aaa
    
    var [p,q="aaa"] = ["bbb",undefined];
    console.log(p);     //bbb
    console.log(q);     //aaa
    </script>

解析：从上述案例可以看出，若只赋值了一个，即会覆盖之前的值；若之前未定义，则会显示“undefined”；若之前变量有值，强行赋值了undefined，则并不会产生什么影响。

（5）非遍历结构——报错

<script type="text/traceur">
    var [temp1] = 1;   //1 is not a function at eval
    var [temp2] =false;  //false is not a function at eval
    var [temp3] =NaN;
    var [temp4] = undefined;  //Cannot read
    var [temp5] =null;
    </script>

（6）let和const命令——Iterator接口

<script type="text/traceur">
    let [a,b,c] = new Set(["a","b","c"]);
    console.log(a);  //a
    console.log(b);  //b
    console.log(c);  //c
    //由于它是可遍历的，所以会显示出来；
    
    function* fibs(){    //指针类型
    let a=0;
    let b=1;
    while(true){
    yield a;
    [a,b] = [b,a+b];
    }
    };
    var [first,second,third,fourth,fifth,sixth] = fibs();
    console.log(sixth);   //5  
    </script>

解析：在上述代码中，函数fibs()可对指针进行索引，对于下标的值，所对应的即为数组形式下的解构赋值，实现数组赋值解构化。

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6——Day3（解构赋值的用途）

（1）交换变量的值案例1-1：ES5 <script type="text/traceur"> //ES5 console.log("ES5:"); var a

太过爱你忘了你带给我的痛/ 2022年09月28日 11:45/ 0 赞/ 124 阅读

相关 ES6——Day3（字符串的解构赋值+函数参数解构赋值）

1、字符串也可以进行解构赋值形成一个类似于“数组”的对象。案例1-1：简单的字符串（类似于“数组”） <script type="text/traceur">

旧城等待，/ 2022年09月28日 11:44/ 0 赞/ 171 阅读

相关 ES6——Day3（对象的解构赋值）

解构不仅可以用于数组，也可以用于对象。对象解构赋值与数组解构赋值有什么异同呢？（1）对象的属性没有次序，变量必须与属性同名，才能渠道正确的值；（2）指定默认值时，对象默

布满荆棘的人生/ 2022年09月28日 05:53/ 0 赞/ 209 阅读

相关 ES6——Day2（数组的解构赋值）

1、Destructuring ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这称为“解构”。 2、不完全解构等号左边的模式，只匹配一部分的等

冷不防/ 2022年09月28日 01:21/ 0 赞/ 138 阅读

相关 ES6～解构赋值

解构赋值：定义： ES6按照统一模式，从数组和对象中提取值，对变量进行赋值，这样被称为解构．注意： \\1.\\node.js目前還不支持解构赋值，所以

刺骨的言语ヽ痛彻心扉/ 2022年06月05日 01:53/ 0 赞/ 318 阅读

相关 ES6解构赋值

原文转自[https://www.cnblogs.com/xiaohuochai/p/7243166.html][https_www.cnblogs.com_xiaohuoch

﹏ヽ暗。殇╰゛Y/ 2022年05月11日 16:24/ 0 赞/ 332 阅读

相关 ES6——数组的解构赋值

> 一、基本用法解构：ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，称之为解构以前，为变量赋值只能直接指定值 let a = 1;

淩亂°似流年/ 2022年03月20日 14:40/ 0 赞/ 187 阅读

相关 es6 解构赋值

ES6解构赋值传统的变量赋值：变量的解构赋值：数组的解构赋值: 对象的解构赋值:\`(和数组解构赋值类似)\`

短命女/ 2022年02月05日 11:13/ 0 赞/ 394 阅读

相关 ES6——解构赋值

原文链接：[小邵教你玩转ES6][ES6] 解构赋值解构赋值主要分为对象的解构和数组的解构，在没有解构赋值的时候，我们赋值是这样的 let arr = [0

迷南。/ 2021年11月04日 21:46/ 0 赞/ 508 阅读

相关 ES6解构赋值

ES6解构赋值一、什么是解构赋值二、语法 1.数组解构 2.对象解构三、注意点一、什么是解构赋值允许从数组中

客官°小女子只卖身不卖艺/ 2021年09月07日 06:10/ 0 赞/ 471 阅读