3.1数组的解构赋值
3.1.1基本用法
Es6允许按照一定模式从数组和对象中取值,然后对变量进行赋值,这被称为解构。
ES6写法:
变量赋值:
let [ a、b、c]=[1、2、3]
相当于
let a=1;
let b=2;
let c=3;
如果解构成功的话,会赋值,不成功的话,会等于undefined;
本质上,这种写法属于模式匹配,只要等号两边的模式相同,左边的变量就会赋予对应的值。
另一种情况的是不完全解构,即等号左边的模式匹配一部分的等号右边的数组,这种情况下,依然可以解构成功。如果右边不是数组,那么将会报错。
3.1.2默认值
解构赋值允许指定默认值:
let [foo =true]=[];
foo//true;
let [ x、y='b']=['a',undefined];//x='a';y='b'
ES6内部使用严格相等运算符来判断一个位置是否有值。所以如果一个数组成员不严格等于undefined,默认值是不会生效的。
let [x=1]=[null]
x//null
如果一个数组成员是null,默认值就不生效,因为null不严格等于undefined。
如果一个默认值是表达式,那么这个表达式是惰性求值的,即只有用到时才会求值。
let [x=f()]=[1];
上面的代码中,因为x能取到值,所以函数f根本不会执行。上面的代码等价于
let x;
if([1][0]===undefined){
x=f();
}else{
x=[1][0];
}
3.2对象的解构赋值:
解构不仅可以用于数组,还可以用于对象
对象的解构与数组有一个重要的不同。数组的元素是按次序排序的,变量的取值是由他的位置决定的;而对象的属性没有次序,变量必须与属性同名才能取到正确的值。
等号左边变量没有对应的同名属性,导致取不到值,会等于uindefined。
如果变量名与属性名不一致,必须写成如下样式:
var {foo:baz}={foo:'a',bar:'b'};
baz//'a'
foo//error:foo is not defined
foo是匹配模式,baz才是变量。真正被赋值的是变量baz ,而不是模式foo
let {bar,foo}={foo:'a',bar:'b'}
foo//a
bar//b
也就是说,对象的结构赋值的内部机制是先找到同名属性,然后再赋值给对应的变量。真正被赋值的是后者,而不是前者。
与数组一样,解构也可以用于嵌套结构的对象。
默认值生效的条件是,对象的属性严格等于undefined
如果解构失败,就等于undeifined
3.3字符串的解构赋值
字符串也可以解构赋值。这是因为此时字符串被转换成了一个类似数组的对象。
const [a,b,c,d,e]="hello''
a//h
b//e
c//l
d//l
e//o
类似数组的对象都有一个length属性,因此还可以对这个属性进行解构赋值。
let {length:len}='hello';
len//5
3.4数值和布尔值的解构赋值
解构赋值是,如果等号右边是数值和布尔值,则会先转为对象
解构赋值的规则是,只要等号右边的值不是对象或者数组,就先将其转为对象,由于undefined和null无法转为对象,所以他们解构时都会报错。
3.5函数参数的解构赋值
函数的参数也可以使用解构赋值。
function add([x,y]) {
return x+y;
}
add([1,2]);//3
函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说。
函数参数的解构也可以使用默认值。
function move ({x=0,y=0}={}){
return [x,y];
}
move ({x:3,y:8})//[3,8];
move({x:3})//[3,0];
move({});//[0,0];
move();//[0,0];
函数的参数是一个对象,同队对这个对象进行解构,得到变量x和y的值,如果解构失败,x和y等于默认值。
3.6圆括号问题
如果模式中出现圆括号该怎么办?ES6的规则是,只要有可能导致解构的歧义,就不得使用圆括号。
3.7用途
1交换变量的值;
2.从何时返回多个值
3.函数参数的定义
4.提取json的数据尤其重要
5.函数参数的默认值
6.遍历map的结构
任何部署了itertor接口的对象都可以使用for...of循环遍历。map结构原生支持iterator接口,配合变量的结构赋值获取键名和键值。
var map=new Map();
map.set('1','one');
map.set('2','two');
for (let [key,value] of map){
console.log(key +"is"+value)
}
打印的是1 is one
2 is two
7输入模块的指定方法
const {SourceMapConsumer,SourceNode}=require(“source-map”)
网友评论