ECMAScript6--解构

大致介绍

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

数组解构

例子:

rush:js;"> let [a,b,c] = [1,2,3]; console.log(a); //1 console.log([a,c]); //[1,3]

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

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

rush:js;"> let [a,[b,[c]]] = [1,[2,[3]]]; console.log(c); //3

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

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

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

rush:js;"> let [a,b] = [1]; console.log(b); //undefined

不完全解构也是可以的

rush:js;"> let [a,3,4]; console.log(c); //3

也可以设置认值

rush:js;"> 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

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

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

对象解构

例子:

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

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

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

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

rush:js;"> 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};

对象解构也可以进行嵌套

rush:js;"> 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

rush:js;"> 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

字符串解构

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

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

数值和布尔值解构

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

rush:js;"> let {toString: s} = 123; s === Number.prototype.toString // true

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

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

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

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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...