对象解构赋值 ※很重要
/**
* 对象解构赋值:获取元素中属性的值,然后赋值给变量
*/
//声明一个对象
let obj = {
name:'chen',
age:38,
gender:'man',
score:100
};
//es5中
// let name1 = obj.name;
// let age1 = obj.age;
// let gender1 = obj.gender;
// let score1 = obj.score;
// console.log(name1,age1,gender1,score1);
//es6中 对象解构赋值
// let{
// name:name1,
// age:age1,
// gender:gender1,
// score:score1
// } = obj;//就是直接用{属性名:变量名} 来给变量名赋值直接的
// console.log(name1,age1,gender1,score1);
// let{
// name:name,
// age:age,
// gender:gender,
// score:score
// } = obj;//名字一样也可以
// console.log(name,age,gender,score);
// let{
// name,age,gender,score
// } = obj;//如果声明的变量名跟对象的属性名一样 可以直接写一个{变量名} 就可以直接简写 比较方便
// console.log(name,age,gender,score);
// let{
// name,age,gender,fenshu
// } = obj;
// console.log(name,age,gender,fenshu);//如果简写的变量名跟对象属性名对不上(对象中没有与变量名同名的属性名) 就是没有 这个变量名的值就会是undefined
// let{
// name,age,gender,score:fenshu
// } = obj;
// console.log(name,age,gender,fenshu);//这就是变量名跟对象属性名一样的简写 不一样的就老老实实的按照 属性名:变量名 这样写
// let{
// name,age,gender,score:fenshu,height=180
// } = obj;//可以用 变量名=值 来指定默认值
// console.log(name,age,gender,fenshu,height);
let{
name,age = 18,gender,score:fenshu,height=180
} = obj;
//可以用 变量名=值 来指定默认值 但对于有与变量名同名的对象属性名 还有默认值的来说 会取用对象的属性值
//这就体现了 变量名=值 是默认值 只有在其他情况都没有赋值的情况才会使用
console.log(name,age,gender,fenshu,height);
数组解构赋值
/**
* 数组解构赋值:就是把数组的每一个元素依次赋值给变量
* 数组解构赋值 只能按顺序赋值 不可以更改顺序赋值
*/
//声明数组
let arr = [10,20,30,40];
//es5中
let num1 = arr[0];
let num2 = arr[1];
let num3 = arr[2];
let num4 = arr[3];
console.log(num1,num2,num3,num4);
//es6中 可以用数组解构赋值 用[]
// let [num1,num2,num3,num4] = arr;//意思按正常顺序 依次按照索引值将数组中的元素赋值给对应的变量名
// console.log(num1,num2,num3,num4);
// let [num1,num2,num3,num4,num5] = arr;//变量数量多于数组元素数量的话 多出来的就是没有 undefined
// console.log(num1,num2,num3,num4,num5);
// let [num1 = 100,num2,num3,num4,num5 = 50] = arr;// 变量名 = 值 为默认值 跟那个对象解构赋值类似
// console.log(num1,num2,num3,num4,num5);
解构赋值结合函数声明
/**
* 解构赋值结合函数声明
*/
//es5中
//声明一个函数,形参有多个
// function test(name,age,gender){
// console.log(name,age,gender);
// }
// test('chen',35,'man');
//形参有多个 可以吧形参打包成一个对象
// function test(obj){
// console.log(obj.name,obj.age,obj.gender);
// }
// test({
// name:'chen',
// age:35,
// gender:'man'
// });
//es6中
//声明一个函数,形参有多个
//形参我就直接可以用对象解构赋值
// function test1({name,age,gender,height = 180}){//默认值 也可以使用 不传就是用默认值 传了就用穿了的
// console.log({name,age,gender});
// };
// test1({
// name:'chen',
// age:35,
// gender:'man'
// });
//上面跟下面这行代码一个意思 形参 = 实参
// let {name,age,gender} = {name:'chen',age:35,gender:'man'}
function x([a,b,c,d]){
console.log(a+b+c+d);
}
x([10,20,30]);//结果是NaN 因为d没有值 是undefined 数字加undefined是NaN