ECMAScript2015解构赋值的基本用法
解构赋值
数组解构
-
数组解构:
-
数组解构时左右侧的结构要一致,解构时会按照元素的下标进行复制
let arr = [1,2,3]
let [a,b,c] = arr;//[1,2,3]
部分解构:
如果只希望获取小量的部分的元素
let [g] = arr;// 只会默认取下标为0的元素
let[ , , h] = arr;//会取出下标为2的元素
字符串解构:
-
字符串解构:
-
定义一个字符串str
let str = ‘ABC’;
let [a,b,c] = str;
通过 let [a,b,c] 可以分别取出其中字符串中每一个char字符的值
console.log(a)//A
console.log(b)//B
console.log©//C
对象解构
-
对象解构:
-
把一个数据解构,解开后,赋值给新的部分。
例如:
定义一个staffInfo对象
let staffInfo = {
id:1,
name:‘张三’,
qq:123456789
}
通过 let { qq } = staffInfo; 可以取出staffInfo中 qq的值
通过 let { name, qq} =staffInfo; 可以取出staffInfo中name, qq的值
console.log(qq) //输出123456789
let { name, qq} =staffInfo; 其实与 ;let name = staffInfo.name; let qq =
staffInfo.qq; 等价
## 参数对象解构
-
参数对象解构:
例如:
定义一个staffInfo对象
let staffInfo = {
id:1,
name:‘张三’,
age:18
qq:123456789
}
定义方法getStaffAgeAndName -
//第一种 : 参数解构
function getStaffAgeAndName({age,name}){
console.log(age);//18
console.log(qq);//123465789
} -
//第二种 : 参数解构并为形参对象附加默认值,如果不传值为空
function getStaffAgeAndName({age,name} = {}){
console.log(age);//18
console.log(qq);//123465789
} -
//第三种 : 参数解构并为形参对象附加默认值,如果不传值为空 ,
同时为每个对象属性附加默认值 如果对象没有age属性 则默认15 如果对象没有
name属性 则默认叫李四
function getStaffAgeAndName({age=15,name=“李四”} = {}){
console.log(age);//输出18
console.log(qq);//123465789
}
//调用方法 传入实参
getStaffAgeAndName(staffInfo);