es6的变量解构赋值

一、解构过程

解构是指在es6的规则中,允许从数组或变量中提取变量并对其进行赋值的操作,若在解构不成功时,会给变量赋值为undefined。而且解构赋值有个规则就是,只要解构等号的右边值不是对象或数组,就先将其转为对象。但是undefined和null不能转为对象,所以对它们进行解构赋值,都会报错。

1.数组

    最简单的就是 let [a,b,c] = [1,2,3];其中a,b,c的值分别是1,2,3,有个需要注意的地方,在数组中,元素的排列是有序的,所以解构也是有顺序的,不可更改位置

2.对象

    let {a,b} = {a:'first',b:'second'} 此时,a ,b的值分别为first 和 second ;若let {a} = {f:"aaa",b:"bbb"};此时a的值将解构不成功,且被赋值为undefined。注意:在对象的解构当中,对象的属性没有次序,变量必须与对象的属性同名,才能取到正确的值。

3.字符串解构

     const [a,b,c,d,e] = 'hello!'; 解构后的对应的值分别为'h','e','l','l','o';有个特殊的地方就是,类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值,如let {length:len} = 'hello';输出的len就是字符串的长度。

4.数值和布尔值

    由于解构赋值的规则,只能对可以转化为对象的变量操作,故这种情况会报错:

    let {prop:x} = undefined; // TypeError

    let {prop:y} = null; // TypeError

5.函数参数

function fun({x=0,y=0}={}){

    return[x,y];

}

move({x:3,y:8}); // [3, 8]

move({x:3}); // [3, 0]

move({}); // [0, 0]

move(); // [0, 0]

[1,undefined,3].map((x='yes')=>x);输出结果[ 1, 'yes', 3 ],undefined就会触发函数参数的默认值


二、解构目的

1.交换变量

    通过解构赋值操作,可以实现不用任何中间变量的两个变量值交换,[a,b] = [b,a];

2.实现函数返回多个值

    在以前的函数中,返回值只有一个,要么是一个对象,要么是一个数组或一个元素,现在我们利用解构赋值可以这样实现函数的多个返回值

    let [a,b,c] = function(){ return [1,2,3] },

3.使函数的参数一一对应起来

4.提取后台传过来的json数据

    利用解构赋值,通过对象的有序排列和键值,可实现数据的一一对应

    let json={

        id:42,

        status:"OK",

        data:[867,5309]

    };

let  {id,status,data:number} = jsonData;

此时id,status,number的输出结果分别为 42, "OK", [867, 5309],实现了数据的一一对应

5.可指定函数参数的默认值

   以前我们在函数中传一个参数foo,若此时没有传参,就要加一个默认值,需要这样操作: var foo = config.foo || 'default foo';即foo的默认值为'default foo',现在可以这样:

    let fun = function (foo = 'default foo'){//more deals}



总结:今天重温了下变量的解构赋值,简单记录,避免遗忘。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 ...
    卞卞村长L阅读 924评论 0 0
  • 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring...
    嘉奇呦_nice阅读 792评论 0 2
  • 1.数组的结构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对现量进行复制,这被称为结构(Des...
    luck黑仔的前端之旅阅读 309评论 0 1
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,221评论 0 13
  • 微信已经成为了人们不可替代的社交工具了,与之相应的微商也成为了大家司空见惯的一个行业了。刚入行微商的朋友,总觉得不...
    飞渡传媒飞哥阅读 231评论 0 1