ES6要掌握的基本知识2：解构赋值

一、变量的解构赋值

let arr=[1,2,3];
//let a=arr[0];
//let b=arr[1];
//let c=arr[2];
let [a,b,c]=arr

如果给undefined的话，就取默认值。没给的话就undefined

let [a=0,b=1,c=2]=[1,undefined,3];

let [a=0,b=1,c]=[1,undefined];

注意下面这种情况：

let [m,n]=[1,2,3];//m=1,n=3

二、对象的结构赋值
对象简写

let arr=[1,2,3];
let [a,b,c]=arr;
let obj={
a,//相当于a:a
b:b,
add(){},//相当于 add:function(){}
}

对象结构赋值的基本用法

let user={
name:'lili',
age:'12'
}
//let name=user.name;
//let age=user.age;
let {name,age}=user;//相当于 let{name:name,age:age}=user 》》即name 'lili' age 12

修改结构赋值的名称

let user={
name:'lili',
age:'12'
}
//let name=user.name;
//let age=user.age;
let {name:nm,age:ag}=user;//》》即nm 'lili' ag 12

对象默认值

let user={
name:'lili',
age:'12'
}
let {name,age,sex=true}=user;

let user={
name:'lili',
age:'12',
sex:false
}
let {name,age,sex=true}=user;

三、字符串的解构赋值
方法一：以数组形式解构

let str='fjiekjkjvihid';
let [hi,io]=str;

方法二：以对象形式解构

let str='fjiekjkjvihid';
let {indexOf,length,slice}=str;

四、解构运用练习：
1、实现单选选项卡
可视化编辑
2、选项卡实现点击高亮，再点击高亮取消
可视化编辑
3、8*8 64宫格
[可视化编辑