ECMAScript6--解构

 更新时间:2017年03月30日 08:59:35   作者:老板丶鱼丸粗面  
解构就是将声明的一组变量和与相同结构的数组或者对象的元素数值一一对应,并将变量相对应元素进行赋值。本文将详细介绍ECMAScript6--解构的相关知识。下面跟着小编一起来看下吧

大致介绍

解构:就是将声明的一组变量和与相同结构的数组或者对象的元素数值一一对应,并将变量相对应元素进行赋值

数组解构

例子:

 let [a,b,c] = [1,2,3];
 console.log(a); //1
 console.log([a,b,c]); //[1, 2, 3]

可以看到,数组中的a,b,c分别对应1,2,3

嵌套的数组也可以进行解构

let [a,[b,[c]]] = [1,[2,[3]]];
 console.log(c); //3

 let [d,,e] = [1,2,3];
 console.log(e); //3

 let [f,...tail] = [1,2,3];
 console.log(tail); //[2, 3]

在解构不成功时,变量的值就是undefined

 let [a,b] = [1];
 console.log(b); //undefined

不完全解构也是可以的

 let [a,b,c] = [1,2,3,4];
 console.log(c); //3

也可以设置默认值

let [a = 1] = [];
 console.log(a); //1

 let [b = 1] = [2];
 console.log(b); //2

 let [c = 1] = [undefined];
 console.log(c); //1

 let [d = 1] = [null];
 console.log(d); //null

注意:在ES6中使用严格相等运算符(===)。所以如果默认值不严格相等undefined,默认值就不会生效。例如null

默认值也可以是表达式,但是要注意只有默认值在使用时才会触发函数(惰性求值)

function f(){
  alert(1);
 }
 let [a = f()] = [3]; //f()不会执行
 let [b = f()] = [undefined]; //会执行

对象解构

例子:

 let {foo,bar} = {foo:1,bar:2};
 console.log(foo); //1

注意:与数组不同,对象解构时不是根据位置对变量赋值的,而是通过变量名进行赋值,即变量名和属性名必须相等才可以进行赋值,位置不重要

 let {bar,foo} = {foo:1,bar:2};
 console.log(foo);//1

如果变量名和属性名不相同,则要采取下面的方法

 let {first: f,last: l} = {first:1,last:3};
 console.log(l); //3

意思就是先在对象中查找first属性,如果有就赋值给f,其中first是匹配的模式,而f才是真正的变量

所以对象解构的完整形式是:

let {first: first,last: last} = {first:1,last:3}; 

对象解构也可以进行嵌套

let obj = {
  a:1,
  b:[
   'hello',
   {c:'world'}
  ]
 }
 let {a: a,b: [h,{c:w}]} = obj;
 console.log(a); //1
 console.log(h); //hello
 console.log(w); //world

对象解构也可以设置默认值,并且如果解构失败,变量会赋值undefined

 let {x: x = 1,y: y=2,z: z=3,w: w} = {x:3,y:null,z:undefined};
 console.log(x) //3
 console.log(y) //null
 console.log(z) //3
 console.log(w) //undefined 

字符串解构

字符串之所以能够解构是因为此时字符串转换成了一个数组

 let [a,b,c] = 'hello';
 console.log(a); //h
 console.log(b); //e
 console.log(c); //l

数值和布尔值解构

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: a} = true;
a === Boolean.prototype.toString // true

上面代码中,数值和布尔值的包装对象都有tostring属性,因此变量s都能取到值。

解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于null和undefined无法转为对象,所以对它们进行解构赋值,都会报错。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • 解决 window.onload 被覆盖的问题方法

    解决 window.onload 被覆盖的问题方法

    这篇文章主要介绍了解决 window.onload 被覆盖的问题方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • JavaScript求解最长回文子串的方法分享

    JavaScript求解最长回文子串的方法分享

    这篇文章主要为大家介绍了JavaScript求解最长回文子串的几种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2022-08-08
  • setTimeout()递归调用不加引号出错的解决方法

    setTimeout()递归调用不加引号出错的解决方法

    用了setTimeout()想实现递归调用,如果第一个参数不加引号的话,就会出错,下面与大家分享下该如何解决
    2014-09-09
  • JS实现CheckBox复选框全选、不选或全不选功能

    JS实现CheckBox复选框全选、不选或全不选功能

    CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭,如一次性处理多个产品,或对文章的删除、产品的下架等处理,一条一条的点显然有一些麻烦,如果能每一行放一个checkbox,然后统一处理就好办的多了,需要的朋友可以参考下
    2016-02-02
  • Bootstrap 按钮样式与使用代码详解

    Bootstrap 按钮样式与使用代码详解

    这篇文章主要介绍了Bootstrap -- 按钮样式与使用,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • 获取客户端网卡MAC地址和IP地址实现JS代码

    获取客户端网卡MAC地址和IP地址实现JS代码

    获取客户端的一些信息,如IP和MAC,以结合身份验证,相信很多人都会这样做吧,我们这里用Javascript,这样做的好处是不需要服务器端进行处理,有客户端自行获取,感兴趣的你可以参考下哈
    2013-03-03
  • Javascript的构造函数和constructor属性

    Javascript的构造函数和constructor属性

    我们知道,默认情况下,对一个函数前面使用new,可以构造出一个对象。每一个对象都有一个constructor属性,这个constructor属性指向构造出该对象的函数。
    2010-01-01
  • js获取指定日期周数以及星期几的小例子

    js获取指定日期周数以及星期几的小例子

    根据某年某周获取一周的日期。如开始日期规定为星期四到下一周的星期五为一周,需要的朋友可以参考下
    2014-06-06
  • js+html5绘制图片到canvas的方法

    js+html5绘制图片到canvas的方法

    这篇文章主要介绍了js+html5绘制图片到canvas的方法,涉及html5元素操作的相关技巧,需要的朋友可以参考下
    2015-06-06
  • js电信网通双线自动选择技巧

    js电信网通双线自动选择技巧

    网站打开的速度快是相当重要的baidu.com不管你是用的什么网络,都打开的很快
    2008-11-11

最新评论