1、解构
解构通俗点说,就是通过一种特定格式,快捷的读取对象/数组中的数据的方法
基本用法:(如果右边是对象,左边也要用对象的格式,解构出来就是变量了,再也不是属性了)
//解构对象
var oUser={
'name':'aaa',
'age':20
}
//es5读数据的方法
console.log(oUser['name'],oUser['age']);//aaa 20
//let{name,age}=oUser;
let{name,age,sex="man"}=oUser;//还能给默认值
console.log(name,age,sex);//aaa 20 man
-------------------------------------------
//解构数组
let arr=[10,20,30];
//let [a,b,c]=arr;
//console.log(a,b,c); //[10, 20, 30]
//如果只想解构一个
let [,b,]=arr;
console.log(b);//20
基本应用:
//解构二维数组
let arr=[10,[100,200],300];
//let [a,b,c]=arr; //b解构的是二维数组
//把二维数组解构出来
let [a,[b,d],c]=arr;
console.log(a,b,d,c); //10 100 200 300
-------------------------------------------
//交换两个变量的值
//es5
let a=10,b=20,tmp=null;
tmp = a;
a=b;
b=tmp;
console.log(a,b)
//es6解构
let a=10,b=20;
[b,a]=[a,b];//这里不用let,解构出来是变量,前面已经定义了
console.log(a,b);//20 10
//用解构修改局部变量的值
let oUser={ //里面的name,age是属性,外面的是局部变量
'name':'aaa',
'age':20
},
name='bbb',
age=40;
({name,age}=oUser);//用小括号括起来,就被认为是结构表达式
console.log(name,age)
//其他解构
let name='aaa',age=20;
({name:name2,age:age2}={
name, //简写,没赋值就去作用域中找变量
age
})
console.log(name2,age2,name,age) //bbb 40 bbb 40
解构表达式作为参数、解构三级对象:
//解构表达式作为参数(引用还是复制?)
let oUser={
'name':'aaa',
'age':20
}
function show(obj){
console.log(obj === oUser); //true
console.log(obj.name,obj.age);//aaa 20
console.log(name,age);//aaa 20
}
show({name,age}=oUser); //作为参数传给函数
console.log(name,age); //aaa 20 已经解构出来了,在外面就相当于变量了
-------------------------------------------
//解构三级对象:一级级往下解构,遇到同名要改名字
let oUser={
'name':'aaa',
'age':20,
'myClass':{
'group1':{
'one':'aaa1',
'two':'aaa2'
},
'group2':{
'one':'bbb1',
'two':'bbb2'
}
}
}
let{name,age,myClass}=oUser;
let{group1,group2}=myClass;
let {one,two}=group1;
let {one:a,two:b}=group1;
console.log(group1,group2);
解构不定参数及嵌套解构:
//把b,c解构到不定参数
let arr=[10,20,30];
let [a,...other]=arr;
console.log(a,other[0],other[1]);//10 20 30
-------------------------------------------
//es5复制数组
var arr=[10,20,30];
var arr2=[];
//arr2=arr ;这样不叫复制数组,叫引用,指向同一个内存地址,一方修改另一方会跟着修改
for(var i=0;i