美文网首页
ES6-解构赋值(数组和对象)

ES6-解构赋值(数组和对象)

作者: jingzizi | 来源:发表于2016-09-19 17:37 被阅读0次

解构赋值,也称“模式匹配”,即赋值的左右两边模式相同,则等号右边的值赋给左边的变量。

解构赋值 适用 let var const声明变量/常量;

在解构赋值前,声明多个变量:

var a=1;

var b=2;

var c=3;

解构赋值:var [a,b,c] = [1,2,3];

解构赋值不成功:

var [a] = [];    //a undefined

解构赋值不完全成功:

var [a,b] = [1] ;  //a=1;b undefined;

数组的解构赋值:严格按照顺序;

嵌套的数组解构赋值

var [a,[b],c] = [1,[2],3];  // a=1;b=2;c=3;

不完全解构的嵌套数组赋值

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

let [a,[b,c],d] = [1,[2],3] ; // a=1;b=2;c undefined;d=3;

解构赋值报错:若等号右侧的值不是数组形式,则赋值报错:

var [a] = 1; //报错

var [b] = null; //报错

var [c] = undefined; //报错

var [d] = false; //报错

var [e]  = {}; //报错

解构赋值默认值:

默认值仅在等号右侧的值严格等于undefined时,默认值才生效:

var [a=1,b=2] = [];  //a=1;b=2;

var [a=1] = [null] ; // a=1;  null !==undefined

var [a=1] = [undefined] ;  // a=1;

默认值可以是表达式:表达式是惰性求值,仅在用到的时候才求值;

function fn(){alert(1)};

var [a=fn()] = []; // fn会执行;

var [b=fn()] = [1] ; //fn不会执行; b=1;

默认值也可引用解构赋值的其他变量,前提是该变量已经声明:

var [a=1,b=a] = []; //a=1;b=1;

var [a=b,b=1] = []; //报错 referenceError;

对象的解构赋值:找同名属性,顺序不重要:

var {b,a} = {a:1,b:2}; //  a=1;b=2;

赋值的变量名与属性名不一致

var {color: pink,b} = {color:'#ccc',b:3};  //pink='#ccc'; b=3;

对象的解构赋值,找同名的属性,找到后将值赋给变量。(实际赋值的是后者)。

var {abc:car,bcd:color} = {abc:'丰田',bcd:'green'};  //car = '丰田' ;color='green'; 其中abc和bcd都是模式,不是变量。

var obj={a:1,b:2,c:3};    var {a,b,c}=obj;  //a=1;b=2;c=3;

var obj={a:1,b:2,c:3} ;   var {a:first,b:second,c:third}=obj;  //first=1;second=2;third=3;  a undefined,b undefined ,c undefined; a,b,c都是模式不是实际的变量;

解构失败的值是undefined;

对象的解构赋值中,变量的声明和赋值是一体的,对于let和const来说,仅能声明一次,若重复声明则报错。

let a;let {a} = {a:1}; // 报错,重复声明变量。

解决:let a;  (let {a} = {a:1}) // a=1; javascript会将两次声明区分成两个代码块,不会报错。(容易乱,还是少用)

解构赋值的默认值:(解构赋值生效的条件是属性值严格等于undefined)

var {a:b=1} = {};  //b=1;

var {a:b=2} = {a:null}; //b=null ,null !==undefined

相关文章

  • 解构赋值

    解构赋值 解构赋值可分为数组解构赋值和对象解构赋值,数组解构赋值要求右侧必须可迭代(具有Iterator 接口),...

  • ECMAScript6 -- 解构赋值

    解构赋值 数组的解构赋值 对象的解构赋值 特殊: 数组的解构赋值 如果右边不是数组,默认转换为类数组 对象的解构赋...

  • 解构赋值

    数组解构赋值 等号右边为数组或具备Iterator接口 对象解构赋值 字符串解构赋值 数值和布尔值解构赋值 函数参...

  • ES6常用新特性3--解构赋值

    对象的解构赋值 数组的解构赋值

  • ES6解构赋值、交换两个变量的值、设置函数默认值、模板字符串、箭

    1,解构赋值 解构赋值主要包括数组的解构赋值、对象的解构赋值、字符串的解构赋值、函数参数的解构赋值。 (1)数组的...

  • 解构赋值,设置函数默认值,箭头函数

    1,解构赋值 解构赋值主要包括数组的解构赋值、对象的解构赋值、字符串的解构赋值、函数参数的解构赋值。 (1)数组的...

  • es6-解构赋值

    什么是解构赋值 左右一一对应进行赋值。 解构赋值的分类 数组解构赋值,左右都是数组 对象解构赋值,左右都是对象 字...

  • ES6学习笔记(二)解构赋值

    1、数组的解构赋值 解构:从数组和对象中提取值,对变量进行赋值解构赋值的规则:只要等号右边的值不是对象或数组,就先...

  • 3.解构赋值

    解构的分类 对象解构 数组解构 混合解构 解构参数 对象解构 解构赋值 嵌套对象解构 数组解构 数组解构 选择性的...

  • ECMAScript6偷懒版

    let const 变量的解构赋值 解构:按照一定模式,从数组和对象中提取值,对变量进行赋值。 数组 对象 数组和...

网友评论

      本文标题:ES6-解构赋值(数组和对象)

      本文链接:https://www.haomeiwen.com/subject/gysnettx.html