ES6方向:关于ES6的解构赋值

1、关于解构的理解

  ES6允许通过某种模式,从数组和对象中提取数据给变量进行赋值,这就被称为解构

  // 如果想赋值多个变量
  1. ES5的模式(进行多次声明变量进行赋值)
    var a = 1;
    var b = 2;
    var c = 3;

  2. ES5的模式(一次生命多次赋值)
    var a = 1, b = 2, c = 3;

  3. ES6语法模式( 将1,2,3分别赋给a,b,c )
    let [a,b,c] = [1,2,3];

这就是解构,将数据赋值到想要的结构中去,实质上是一种模式对应机制,右边的数据会赋给左边对应的变量中去。

注意:左右两边的结构格式必须要保持一致

  let  [a,b,c] = [1,[2,3],[4,5,6]];
  //此时a=1,b是数组[2,3],c是数组[4,5,6]

  let [a,[b,c]] = [1,[2,3]];
  //此时a=1,b=2,c=3

  let [ , , c] = [1,2,3];
  //此时c=3

  let  [a, , c] = [1,2 ,3];
  //此时a=1,c=3
1.1 解构失败的情况
  let  [a,b,c] = [1,2];
  //此时c为undefined
1.2 解构不完全的情况
  let  [a,b] = [1,2,3,4];
  //此时a=1,b=2,但是右边的数据还多出了两个
1.3 解构赋值报错的情况
// 报错
  let [foo] = 1;
  let [foo] = false;
  let [foo] = NaN;
  let [foo] = undefined;
  let [foo] = null;
  let [foo] = {};
1.4 使用解构默认值的情况
  let [a,b,c="默认值"] = [1,2];
  //此时c=“默认值”

   let [a,b,c="默认值"] = [1,2,3];
  //此时c=3
  
  let [a,b,c="默认值"] = [1,2,undefined];
  //此时c依旧=“默认值”

  let  [a,b,c="默认值"] = [1,2,null];
  //null表示一个空对象,此时c为null
  
  ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,如果一个数组成员不严格等于undefined,默认值是不会生效的。

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

1.5 默认值为表达式
    如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值
    function  f() {
      console.log('aaa');
    }
    let  [ x = f() ] = [1];
    //等价于
    let x;
    if([1][0] == undefined){
      x=f();
    }else{
      x = [1][0];
    }
1.6 默认值可以引用解构赋值的其他变量

前提是该变量必须是已经声明的

let [x=1,y=x] = []  
//此时 x=1默认值传进去,然后x的值再赋给y,因此y=1
let [x=1,y=x] = [2]
//此时x=1,但右边2会再次赋给x,x=2,然后x的值再赋给y,此时y=2
let [x=1,y=x] = [1,2]
//此时x=1,右边数据也为1,x的值再赋给y,但是右边数据y=2,所以最后x=1,y=2
let [x=y,y=1] = []
//报错y赋给x的时候,y还并未声明
1.7 利用解构赋值交换两个值
let a=1;
let b=2;
[a,b] = [b,a];
console.log(a,b); //a=2,b=1

2. 对象的解构赋值

2.1 对象解构赋值

对象解构的内部机制,是先找到同名的属性,然后再赋给对应的位置,真正被赋值的是后者,而不是前者。

解构不仅可以用于数组,还可以用于对象
let  json = {
  name:'小陈',
  age:22,
  sex:'男'
}
let {name,age,sex} = json;//解构对象
2.2 对象解构赋值属性名一定要相同
对象的解构与数组有一个重要的不同,数组的元素是按次序排序的,变量的取值由他的位置决定,而对象的属性没有次序,变量名必须与属性同名
// 这里解构的属性名必须和对象的属性名相同,否则解不出来全是undefined
let  json = {
  name:'小陈',
  age:22,
  sex:'男'
}
let  {a,b,c} = json;//全为undefined
2.3 自定义变量名与属性名不同
//如果想自己定义更改属性名可以如下操作
let  json = {
  name:'小陈',
  age:22,
  sex:'男'
}
let { name:a,age:b,sex:c } = json; //这样依然可以改属性名,并打印解构出来的值
console.log(a,b,c)
2.4 解构可以用于嵌套结构
let obj = {
  p:[
      'objx',
      { y:'objy' }
  ]
};
let { p: [ x,{ y } ]} = obj; //x为objx,y为objy
2.5 对象的解构赋值也可以指定默认值
var {x=3} = {};  //x:3
var {x,y=5} = {x:1}; //x:1  y:5
var {x:y=3} = {};  //y:3
var {x:y=3} = {x:5} //y:5
var {message:msg='something'} = {}  //msg:'something'
//默认值生效的条件是 ,对象的属性值严格等于undefined
var {x=3} = {x:null}  //x:null
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,504评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,434评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,089评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,378评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,472评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,506评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,519评论 3 413
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,292评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,738评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,022评论 2 329
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,194评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,873评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,536评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,162评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,413评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,075评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,080评论 2 352

推荐阅读更多精彩内容