概念
ES6允许 按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。
**变量的解构赋值在本质上属于 “模式匹配”,要掌握这个知识点,只需要找准它们的对应关系,并且能准确区分 谁是“模式” 谁是“变量”
数组解构赋值
只要等号两边的模式相同 左边的变量就会被赋与对应的值
var a=1;
var b=2; => let [a,b,c]=[1,2,3] //a=1;b=2;c=3
var c=3;
不完全解构:等号左边的模式只匹配等号右边数组的一部分。
let [x,y]=[1,2,3] //x=1;y=2
let [a,[b],d] = [1,[2,3],4] //a=1;b=2;d=4
报错:如果等号右边不是可遍历的解构(数组),将会报错
let [a]=1;
let [a]=false;
let [a]=NaN;
let [a]=undefined;
let [a]=null;
let [a]={};
解构赋值允许指定默认值
var [foo=true]=[] //foo=ture
var [x,y='b']=['a'] //x='a';y='b'
默认值也可以引用其他变量,但变量必须已经声明
let [x=1,y=x]=[]; //x=1;y=1
let [x=1,y=x]=[2]; //x=2;y=2
let [x=y,y=1]=[]; //ReferenceError
对象的解构赋值
*对象的属性没有次序,变量必须与属性同名,才能取到正确的值,否则取不到值,最后等于undefined。
//例1
var {foo,bar}={foo:'aaa',bar:'bbb'} // foo='aaa' ;bar='bbb'
var {baz}={foo:'aaa',bar:'bbb'} //baz=undefined
*如果想要声明的变量名与属性名不一样,则必须写成下面这样:
//例2
var {foo:baz}={foo:'aaa',bar:'bbb'} //baz='aaa'
*对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量,真正被赋值的是后者,而不是前者。
//例3
var {foo:baz}={foo:'aaa',bar:'bbb'}
//baz='aaa'
//foo error:foois not defined
// 本例中被真正赋值的是baz 而不是模式foo
//**由上可知,例1中对象的解构赋值 其实是一种简写
var {foo,bar}={foo:'aaa',bar:'bbb'} =>
var {foo:foo,bar:bar}={foo:'aaa',bar:'bbb'}
(ES6允许在对象中只写属性名,不写属性值,这个时候,属性值等于属性名字所代表的变量)
var baz={foo} => var baz={foo:foo}
#####解构嵌套结构的对象
var obj={
p:[
"hello",
{y:''word"}
]
};
var {p:[x,{y}]}=obj;
//x=>"hello"
// y => "world"
// p => error: p is not defined
*这时p 是模式,不是变量,因此不会被赋值
对象的解构也可以指定默认值
var {x=3}={} // x=>3
var {x,y=5}={x;1} //x=>3 y=>5
var {x:y=9}={} //y=>9
字符串的解构赋值
此时字符串被转换成了一个类似数组的对象
const [a,b,c,d,e]="hello"
// a => "h"
// b => "e"
// c => "l"
// d => "l"
// e => "0"
****类似数组的对象都有length属性,因此还可以对这个属性解构赋值。***
let {lebgth:len}="hello"
//len => 5
数值和布尔值的解构赋值
解构赋值的规则是,只要等号右边的值不是对象,就先将起转化为对象,所以数值和布尔值的解构赋值,会先将起转为对象,因此,需要注意的是,undefined和null 无法转为对象,所以对它们进行解构赋值都会报错。
函数参数的解构赋值
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() //[00]
用途
1、交换变量的值
var [x,y] =[y,x]
2、提取JSON数据
var json={
id:42,
status: "ok",
data:[867,5309]
}
let {id,status, data:number}=jsonData;
3、指定函数参数默认值,省去在函数体内部 再写 var foo=config.foo|| "default foo" 短路写法
$.ajax = function (url,{
async=true,
cache = true
})
4、输入模块的指定方法
let {formData,pxTorem,foo}= improt '../../index.js';