ES6新语法--解构赋值

对象解构赋值 ※很重要

/**
 * 对象解构赋值:获取元素中属性的值，然后赋值给变量
 */

//声明一个对象
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