1,什么是解构?为什么要使用解构?
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量,并且让我们的程序结构更清晰。
2,数组的解构赋值
(1)简单的数组解构:
之前我们为一些变量赋值的方法:let a=0;let b=1;let c=2;
使用数组解构赋值:let [a,b,c] = [0,1,2];可以简单的理解为等号左边为数组模式,右边为赋值 模式;赋值模式要与数组模式在形式上统一,let [a,[b,c],d]=[1,[2,3],4]; 否则解构失败;
(2)解构的默认值:
解构赋值是允许使用默认值的,例如:let[foo=true]=[];console.log(foo);//true;
let[foo=true]=[] 可以理解为 let[foo=true]=[undefined];
栗子:
let [a,b="JSPang"]=['技术胖'] console.log(a+b); //“技术胖JSPang”
let[a,b="JSPang"]=['技术胖',undefined]console.log(a+b);//“技术胖JSPang”
let [a,b="JSPang"]=['技术胖',null]console.log(a+b); //“技术胖null”
(3)null与undefined的区别:
undefined表示什么都没有;null表示有值,但值为null;
3,对象的解构赋值
栗子:let{foo,bar}={foo:'JSPang',bar:'技术胖'};
console.log(foo+bar);//控制台打印出了“JSPang技术胖”
与数组解构的区别:数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
4,解构的应用场景
(1)变量交换:
ES5:采用中间变量的方式进行存储;
ES6: let a=1; let b=2; [a,b]=[b,a]; console.log(a,b);//2,1
(2) 函数返回值是数组,需要获取数组内某个值:
ES5:先给一个变量获取函数的返回结果,再按索引获取两个值;
ES6: function f(){return [1,2]}; let [a,b]=f(); console.log(a,b);//
(3) 返回多个值,选择性的接受某值:
ES5:先给一个变量获取函数的返回结果,再按索引获取两个值;
ES6: function f(){return [1,2,3,4,5]}; let [a,,,b]=f(); console.log(a,b);//1,4
(4) 不知道函数返回的数组的长度是多少,只关心第一个,其余的放到一个数组中
ES5:先给一个变量获取函数的返回结果,再按索引操作;
ES6: function f(){return [1,2,3,4,5]}; let a,b; [a,...b]=f(); console.log(a,b);//1,[2,3,4,5]
未完待续。。。。
网友评论