ES6新特性之解构使用细节

时间：2021-10-12 18:33:57

ES6的解构说白了就是能够让我们一次性取到多个值，大致可分为一下几个方面

1、数组解构

普通的一维数组解构，如下one = array[0],two=array[1],three=array[2]

var [one, tow, three] = array;

嵌套数组解构

var [one,[[two],three]] = [1,[[2],3]];

// one=1;two=2;three=3

还可以跳过一些元素解构

var [,,three] = [1,2,3];

// three=3

指定不定参数进行解构

var [one,...three] = [1,2,3];

three=[2,3];

当访问空数组或则越界的时候得到undefined；

2、对象解构

对象解构使用{}，首先指定要解构的属性名，然后指定绑定的变量

var {name:nameA,age:ageA}={name:"Jhon",age:23};

// nameA="Jhon",ageA=23

如果属性名和变量名一致时，可以缩写

var {name,age}={name:"Jhon",age:23};

// name="Jhon",age=23

对象也可以像数组一样进行嵌套解构，当解构一个未定义的属性时得到undefined

如果已经声明了某些变量或者没有使用关键字（var，let，const），则像下面这样使用会报错，因为解析引擎将{开头的语句解析为一个语句块，这时要加（）处理

{name,age}={name:"Jhon",age:23};

// error

({name,age}={name:"Jhon",age:23});

3、其他

  • 解析null或者undefined会得到一个错误
  • 解析原始类型将会得到undefined
典型应用，多重返回值
function show(){

	return [1,2];

}

var [one, two] = show();

解构Map

for( var [,value] of map){

	console.log(value);

}


相关文章