7.ES6 变量的解构赋值 (Destructuring)

最新推荐文章于 2021-07-07 09:16:33 发布
最新推荐文章于 2021-07-07 09:16:33 发布
阅读量198 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36685875/article/details/78575975
版权

-------------------------------------数组的解构赋值-------------------------------------------

解构：

     ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring).

不完全解构：

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

指定默认值：

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

let和const命令：

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

注：只要是可遍历的结构或数组都可以被解构。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组解构</title>
    <script src="traceur.js"></script>
    <script src="bootstrap.js"></script>
    <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);  // 1
        console.log(b);   // 2
        console.log(c);   //3
    </script>
</head>
<body>
    
</body>
</html>


---------------------------------------------对应位置---------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对应位置</title>
    <script src="traceur.js"></script>
    <script src="bootstrap.js"></script>
    <script type="text/traceur">
        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]


    </script>
</head>
<body>
    
</body>
</html>


--------------------------------------------------------数组解构不成功-------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组解构不成功</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
       var [temp]=[];
       console.log(temp);  //undefined
       
       var [first,second]=[100];
       console.log(first);  //100
       console.log(second);  //undefined

       //解构不成功的默认值都是undefined
    </script>
</head>
<body>
    
</body>
</html>


------------------------------------------------不完全解构--------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不完全解构</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <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
       console.log(c);  //4
    </script>
</head>
<body>
    
</body>
</html>


----------------------------------------------------指定默认值------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指定默认值</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <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>
</head>
<body>
    
</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非遍历解构----报错</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
      var [temp]=1;             // 1[Symbol.iterator] is not a function
      
      var [temp]=false;             // false[Symbol.iterator] is not a function
      var [temp]=NaN;               //NaN[Symbol.iterator] is not a function
      var [temp]=undefined;       // Cannot read property 'Symbol(Symbol.iterator)' of undefined
      var [temp]=null;         //Cannot read property 'Symbol(Symbol.iterator)' of null

      //以上的都会报错的
    </script>
</head>
<body>
    
</body>
</html>


------------------------------------------let和const命令----------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lterator接口</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
      //let和const命令
      //只要某种数据结构具有lterator接口，都可采用数组形式的解构赋值。
      
      let [a,b,c]=new Set(["a","b","c"]);
      console.log(a);  //a
      console.log(b);  //b
      console.log(c);  //c

      function* fibs(){  //指针函数具有lterator接口，可遍历
        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>
</head>
<body>
    
</body>
</html>




可爱的小雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6学习笔记（二）--------------------------------------变量的解构赋值
weixin_34357267的博客
09-06 98
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构ES6之前我们申明多个变量需要按照下面的方法： let a=1; let b=2; let c=3; let d=4; //或者 let a=1,b=2,c=3,d=4; 现在我们可以更加简便 let[a,b,c,d]=[1,2,3,4] 这种方法需要连边结构完全...
ES6--变量的解构赋值
聆听。。花开雨落的博客
02-17 163
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量，并且让我们的程序结构更清晰。也许你还是不太明白，那先来一个最简单的数组解构赋值来进行赋值。 数组的解构赋值： ** 简单的数组解构：** 以前，为变量赋值，我们只能直接指定值。比如下面的代码： let a=0; let b=1; let c=2; 而现在我们可以用数...
es6变量解构赋值
qq_36229632的博客
10-27 161
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量，并且让我们的程序结构更清晰。 数组的解构赋值： let [a,b]=['1','2']; console.log(a);//1 console.log(b);//2 //上面的代码表示，可以从数组中提取值，按照位置的对象关系对变量赋值。 //需要注意数组模式和赋值模式需要统...
ES6语法（七）解构赋值
weixin_42409913的博客
11-11 133
1.解构赋值 在ES6中新增了变量赋值的方式：解构赋值。想从数组中找出有意义的项在ES6中可以这样写： let [firstName, surname] = ['Ilya', 'Kantor'] console.log(firstName) console.log(surname) 解构赋值重点是在赋值，赋值的元素是要拷贝出来赋值给变量，赋值的元素本身不会被改变。 在解构赋值里面用的最多的就是O...
ES6 变量的解构赋值
鱼儿的博客
06-21 587
解构赋值 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。 以前，为变量赋值，只能直接指定值。 var a = 1; var b = 2; var c = 3; ES6允许写成下面这样。 var [a, b, c] = [1, 2, 3]; 上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。 本质上，这种写法属于“模式匹配”，只要等号两边...
ES6基础之解构赋值(destructuring assignment)
10-17
解构赋值是ES6引入的一种强大的语法特性，它使得从数组或对象中提取值变得更加简洁，大大简化了代码。本文将深入探讨解构赋值的各个方面，包括数组和对象的解构，以及它们在不同场景下的应用。 首先，解构赋值允许...
ES6学习之变量的解构赋值
08-31
【变量的解构赋值】是ES6引入的一种新的语法特性，它极大地简化了变量的声明和赋值，尤其在处理数组和对象时。解构赋值允许我们从数组或对象中提取值，并将这些值分配给一组变量，使得代码更简洁、易读。 **数组的...
ECMAScript6变量的解构赋值实例详解
12-03
数组的解构赋值 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring） var [a, b, c] = [1, 2, 3]; 这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被...
ES6知识点整理之对象解构赋值应用示例
12-10
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）, 在对象的解构赋值中有一些需要注意的事项 初识对象的解构 var {name} = { name:'Joh', age:10 }; console.log...
ES6-变量解构赋值
u010603896的专栏
07-18 262
什么是解构？ES6允许按照一定模式，从数组和对象中提取值，然后给变量赋值 数组解构赋值 let [a,b,c] = [1,2,3] a //1 b //2 c //3 let [a, , c] = [1,2,3] a //1 c //2 let [a, ...b] = [1,2,3,4,5,6] a //1 b //[2,3,4,5,6] let [a, [b, c]] = [1
ES6变量解构赋值
露露
10-09 144
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。 ES6对象解构,直接看代码: const tom={ name:'tom', age:20, family:{ mother:'Mary', father:'Smith', brother:'Jone' } } const {name,age}=tom； const {mother,father...
ES6中的解构赋值
越界的博客
12-22 405
解构赋值 定义 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。 解构：意思是把有结构的数据分解开成为一个一个的值 赋值：把解构之后的值保存到变量 基本用法 在ES6之前，我们给变量赋值是直接指定值。如下代码所示： var a = 1; var b = 2; var c = 3; ES6可以允许我们写成下面这样： var [a, b...
浅谈解构赋值的小技巧
weixin_43968784的博客
01-29 179
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。 不得不说，解构赋值对于前段工程师来说是一把利器，它既简洁又强大，有着极强的实用性。 在实际工作场景中，我们经常会处理一些深层嵌套的对象。 例如： ...
JS之解构（ Destructuring）
热门推荐
ABang的博客
06-16 1万+
这阵子因为要学习React Native ，而RN必备的知识就是JS，所以开始学习起来了Js，在此声明写博客就是为了更好的学习，总结一些我学习过程中知识点，有不同意见的请尽情发表！ 1 什么是解构赋值 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰。 通常来说，你很可能这样访问数组
ecma6 ajax 解析php,详解ECMAScript6变量的解构赋值
weixin_29645033的博客
03-21 80
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)，本文主要和大家分享嵌套数组的解构例子，大家一起看看吧var [a, b, c] = [1, 2, 3];这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子let [foo, [[bar], baz]] = [1, [[2], 3...
vue踩过的坑
Marshall_Ma的博客
06-03 4564
记录vue使用过程中的坑
深度解析 ES6 系列文章
09-25 2783
什么是非结构化赋值？ 非结构化赋值允许你通过使用语法规则将一个数组或对象的属性分配给变量，类似于数组或对象文本。这个语法规则非常简单，同时还表现出比传统的属性访问更清晰。 如果没有非结构化赋值，你可能运用下面的方式访问数组中的前三个项目： var first = someArray[0]; var second = someArray[1]; var third = someArray[
ES6新特性3：变量的解构赋值
孔子说
07-07 993
http://www.kongzid.com/archives/es3 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运算符的扩展，主要针对数组或对象中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
ES6 解构：从数组和对象中提取值，对变量进行赋值
weixin_41796631的博客
04-09 5831
let dad = 'biao' let mum = 'ling' let family = {dad:dad, mum:mum} console.log(family) //Object {dad:"biao", mum:"ling"} ES6 写法 let dad = 'biao' let mum = 'ling' let family = {dad, mu...
Es6中解构赋值怎么理解？
最新发布
06-07
ES6中的解构赋值是一种方便的语法，可以从数组或对象中提取数据并将其赋值给变量。它的语法使用花括号{}或方括号[]来匹配要提取的数组或对象的结构。 例如，给定一个数组，我们可以使用解构赋值将其中的元素分别...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值