码迷,mamicode.com
首页 > 其他好文 > 详细

ES6新特性:解构赋值(上)

时间:2017-08-03 01:07:41      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:des   结果   声明   理解   定义   接下来   block   元素   内容   

1:什么是解构赋值

 

    按照一贯的套路,接下来的内容是解释:什么是解构赋值?

 

        来看看官方的解释:

 

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

 

        这句话也不难理解,但是前端君怎么会这么敷衍了事,随便贴一段官方的文字解释就算呢。

 

        来,我们来上一段代码进一步解释一下什么叫解构赋值。

 

关于给变量赋值,传统的变量赋值是这样的:

  var arr = [1,2,3];//把数组的值分别赋给下面的变量;
    var a = arr[0];
    var b = arr[1];
    var c = arr[2];

    console.log(a);//a的值为1
    console.log(b);//b的值为2
    console.log(c);//c的值为3

  

        将数组的元素值1,2,3分别赋值给变量a,b,c,结果也是如我们所愿,赋值成功,这是一种传统的赋值方式。

 

        我们今天要介绍解构赋值会是怎样的?一起往下看。 

 

变量的解构赋值:

   var [a,b,c] = [1,2,3]; //把数组的值分别赋给下面的变量;
    console.log(a);//a的值为1
    console.log(b);//b的值为2
    console.log(c);//c的值为3

  

    注意到了吗?赋值的代码大大减少了,不需要分别把变量a,b,c分别声明定义和赋值,只需要将变量a,b,c作为一个数组的元素,然后将数组[1,2,3]赋值给数组[a,b,c]即可,变量a,b,c即可分别得到对应的值。

 

        看吧,代码是不是简短了很多,可读性也很强,这种叫做数组的解构赋值。

ES6新特性:解构赋值(上)

标签:des   结果   声明   理解   定义   接下来   block   元素   内容   

原文地址:http://www.cnblogs.com/queenw/p/7277333.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!