ECMAScript6--解构

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ECMAScript6--解构，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2532字，纯文字阅读大概需要4分钟。

内容图文

大致介绍

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

数组解构

例子：

 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无法转为对象，所以对它们进行解构赋值，都会报错。

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

内容总结

以上是互联网集市为您收集整理的ECMAScript6--解构全部内容，希望文章能够帮你解决ECMAScript6--解构所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---