美文网首页
ES6学习笔记(三):变量的解构赋值

ES6学习笔记(三):变量的解构赋值

作者: 大青呐 | 来源:发表于2017-06-23 11:55 被阅读0次

ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量,并且让我们的程序结构更清晰。
<b>数组的解构赋值</b>
以前我们为变量赋值,只能直接指定值。比如以下的代码:

let a=1;
let b=2;
let c=3;

现在我们可以用数组解构的方式来进行赋值。

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

上面的代码,是安装位置的对象关系对应变量赋值。注意在赋值的时候,等号左边和右边的形式要统一,不统一解构将失败。

let [a,b,[c,d,e],f] = [0,1,[2,3,4],5];

如果等号两边形式不一样,很可能获得Undefined或者直接报错。
解构赋值是允许使用默认值的。

let [ t =true] = [ ];
console.log(t); //true
let [ a,b,c=" zqq"] = ['i','am' ];
console.log(a+b+c); // i am zqq

另外需注意,undefined相当于什么都没有,null相当于有值,但值为null。
<b>对象的解构赋值</b>
解构不仅可以用于数组还可以用于对象。

let {cat,dog} = {cat:'Mike','dog':'John'};
console.log(cat+dog);  //MikeJohn

<b>注意:</b>对象的解构与数组有一个重要的不同,数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
另外,如果在解构之前就定义了变量,这时候你再解构会出现问题,编译会出错。

let cat;
{cat} = {cat : 'Mike'};
console.log(cat);

要解决报错,使程序正常,只要在解构的语句外包加一个圆括号就可以了。

let cat;
({cat} = {cat : 'Mike'});
console.log(cat);

<b>字符串解构</b>
字符串解构相当于字符串被转换成了一个类似数组的对象。

const [a,b,c,d] = "Mike";
console.log(a);  //M
console.log(b);  //i
console.log(c);  //k
console.log(d);  //e

相关文章

  • ES6笔记(解构赋值)

    ES6笔记(解构赋值) 解构赋值 变量的解构: 解构赋值允许指定默认值。 解构赋值必须保证赋值方 被赋值方类型一...

  • 解构赋值

    解构赋值:ES6 中新增了变量赋值的方式,从数组和对象中提取值,对变量进行赋值。 单独赋值给变量,解构赋值。 解构...

  • ES6

    ES6: ES6 新语法 1.变量 解构赋值 (解构赋值对应的python里的序列解包) 解构赋值方式一: 解构赋...

  • 『ES6脚丫系列』变量的解构赋值

    『ES6脚丫系列』变量的解构赋值 第一章:变量的解构赋值的概念 【01】Q:什么是变量的解构赋值?有哪些方式? 吃...

  • ES6知识点复习(二)

    变量的解构赋值 解构赋值允许指定默认值,es6内部使用严格相等运算符 === 默认值可以引用解构赋值的其他变量,但...

  • es6中的解构赋值

    es6中的对象解构赋值 对象的解构赋值,新变量名字要和对象中的变量名一致 数组中的解构赋值,数组是依次赋值的 字符...

  • ES6入门笔记

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

  • 变量的解构赋值

    es6-2 (变量的解构赋值) 本文以及之后的文章都是参考阮一峰ES6入门,记录下作为笔记。 数组的解构赋值对象的...

  • ES6学习笔记——解构赋值

    变量的结构赋值 数组的解构赋值 ES6允许从数组中提取值,按照对应的位置,对变量赋值。 如果解构不成功,变量的值就...

  • 杂货小铺之ES6+ 🍳 解构赋值

    解构赋值 ? 在 ES6 中新增了变量赋值的方式:解构赋值。允许按照一定模式,从数组和对象中提取值,对变量进行赋值...

网友评论

      本文标题:ES6学习笔记(三):变量的解构赋值

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