7752

ES6 变量的解构赋值

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

一、数组解构赋值

<script> //以前的赋值 let a=1; let b=2; console.log(a);//1 console.log(b);//2 //ES6赋值,从数组中提取值,按照对应位置,对变量赋值 let [c,d]=[3,5]; console.log(c);//3 console.log(d);//5 </script>

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值,我们可以看看更多的例子

let [foo,[[bar],baz]]=[1,[[2],3]]; console.log(foo);//1 console.log(bar);//2 console.log(baz);//3 let [first,,third]=["aaa","bb","cc"]; console.log(first);//aaa console.log(third);//cc //将数组剩余部分赋值给一个变量。 let [head, ...tail] = [1, 2, 3, 4,5,6,7]; console.log(head);//1 console.log(tail);//[2, 3, 4, 5, 6, 7] let [x, y, ...z] = [1,,3,4]; console.log(x);//1 console.log(y);//undefined;解构不成功,值为undefined console.log(z);//[3,4]

以上是完全解构,下面代码是不完全解构,但可以成功解构

let [aa,bb]=[3,4,5]; console.log(aa);//3 console.log(bb);//4 let [a, [b], d] = [1, [2, 3], 4]; console.log(a);//1 console.log(b);//2 console.log(d);//4

注:如果等号的右边不是数组(或者严格地说,不是可遍历的结构),那么将会报错。

let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {};//前面五个表达式转为对象以后不具备 Iterator 接口,最后一个表达式本身就不具备 Iterator 接口。

看到这可能有点懵,什么是Iterator 接口?我们可以去阮一峰老师《ECMAScript 6 入门》Iterator进行详解。当然后面我也会写一篇关于Iterator的笔记

默认值

为了防止从数组中取出一个值为undefined的对象,可以在表达式左边的数组中为任意对象预设默认值

let [a=5,b=7]=[1]; console.log(a);//1 console.log(b);//7 // 需要注意的是在es6内部使用的是严格相等来判断一个位置是否有值。只有当数组中的成员严格等于undefined 默认值才能生效。 // 如果默认值里是null,因为null不严格等于undefined 所有默认值也不会生效。      let [c=2]=[null]; console.log(c);//a=null     //默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。      function fn(){      return 2;      };      let [d=fn()]=[1];      console.log(d);//1      //默认值可以引用解构赋值的其他变量,但该变量必须已经声明

let [x = 1, y = x] = [];
console.log(x);
console.log(y);// x=1; y=1

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

let [c = 1, d = x] = [1, 2];
console.log(c);//c=1
console.log(d);//d=2

let [e = f, f = 1] = [];
console.log(f);//Cannot access 'f' before initialization

//报错原因:因为e用f做默认值时,f还没有声明。

 

二、对象的解构赋值

注:对象解构不需要位置和数组解构位置一致,只要保证解构的变量名和属性一致即可。

let {p,q}={p:42,q:true} console.log(p);//42 console.log(q);//true

let {aa,cc}={cc:4,aa:2};
console.log(aa,cc);//2 4

 

无声明赋值

let a,b; ({a,b}={a:1,b:2}); console.log(a);//1 console.log(b);//2

注:

赋值语句周围的圆括号 ( ... ) 在使用对象字面量无声明解构赋值时是必须的。

{a, b} = {a: 1, b: 2} 不是有效的独立语法,因为左边的 {a, b} 被认为是一个块而不是对象字面量。
然而,({a, b} = {a: 1, b: 2}) 是有效的,正如 var {a, b} = {a: 1, b: 2}
你的 ( ... ) 表达式之前需要有一个分号,否则它可能会被当成上一行中的函数执行

解构对象赋值默认值

let {dd=10,ss=3}={dd:4}; console.log(dd);//4 console.log(ss);//3

解构可以用于嵌套结构的对象

let obj = { p: [ 'Hello', { y: 'World' } ] }; let { p, p: [x, { y }] } = obj; console.log(p);//["Hello", {y: "World"}] console.log(x);//Hello console.log(y);//World

字符串解构赋值

注:字符串被转换成了一个类似数组的对象。

let [a,b,c,d,e]='hello' console.log(a);//h console.log(b);//e console.log(c);//l console.log(d);//l console.log(e);//o let {length : len} = 'hello'; console.log(len); // 5  

函数的解构赋值

function add([x,y]){ return x+y; } console.log(add([1,2]));//3

来源:博客园

作者:smile小吴

链接:https://www.cnblogs.com/smile-xin/p/11423562.html

Recommend