对象字面量的增强与函数参数的默认值

323 阅读2分钟

这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战

对象字面量的增强

1.对象字面量是什么

    实例化构造函数生成对象
    const person=new Object();
    person.age=18;
    person.speak = function(){};
    console.log(person);

    对象字面量
    const person={
        age:18,
        speak:function(){}
    };

2.属性的简洁表示法

当键名和变量或者常量名一样的时候,可以只写一个

    const age=18;
    const person ={
        // age:age
        age
    };
    console.log(person);//{age: 18}

3.方法的简洁表示法

方法可以省略冒号和function关键字

    const person={
        // speak:function(){}
        speak(){}
    };
    console.log(person);

方括号语法

1.方括号语法的用法

    const prop = 'age';
    const person = {};
    person.prop=18;//{prop: 18}
    person[prop]=18;//{age: 18}

    方括号语法可以写在对象字面量中
    const person = {
        [prop]:18
    };
    console.log(console.log(person));//{age: 18}

2.方括号中可以放什么

    类比 模板字符串${}
    [值或者通过计算可以得到值的(表达式)]
    const prop = 'age';
    const func = ()=>'age1';
    const person={
        // [prop]:18,
        // [func()]:18
        // ['sex']:'male's
        ['s'+'ex']:'male'
    };
    console.log(person);

3.方括号语法和点语法的区别

    点语法是方括号语法的特殊形式
    const person = {};
    person.age 等价于 person['age']
    属性名由字母、数字、下划线以及$构成,并且数字还不能打头的时候可以使用点语法
    age18_$ √
    18age ×
    合法标识符可以用来作为变量或常量名

    当你的属性或方法名是合法标识符时,可以使用点语法,其他情况下使用方括号语法        
    

函数参数的默认值

.函数参数默认值的基本用法

    const multiply = (x,y)=>{
        if(typeof y==='undefined'){
            y=1;
        };
        return x*y;
    };
    console.log(multiply(2,2));//4
    
    上述函数相当于
    const multiply = (x,y=1)=> x*y;
    console.log(multiply(2));//2

函数参数默认值的应用

1.接受很多参数的时候
    const logUser = (username='zhangsan',age=0,sex='male')=>console.log(username,age,sex);
    logUser('Alex',18,'male');
    logUser();
2.接受一个对象作为参数
    const logUser=options=>console.log(options.username,options.age,options.sex);
    通过解构赋值传参
    const logUser = ({username='zhangsan',age=0,sex='male'}={})=>console.log(username,age,sex);
    const options={
        username:'Alex',
        age:18,
        sex:'male'
    };
    
    传递一个值
    options={username:'alex'}//alex 0 male
    {username='zhangsan',age=0,sex='male'}={username:'alex'}
    
    传递一个空对象
    options={};//zhangsan 0 male
    
    什么都不传递
    **logUser();//相当于{username='zhangsan',age=0,sex='male'}=undefined前面讲过undefined和null解构都会报错
    将{username='zhangsan',age=0,sex='male'}={},,此时{username='zhangsan',age=0,sex='male'}相当于参数options
    {options={}}=undefined此时options是函数默认值{},,再进行对象解构{username='zhangsan',age=0,sex='male'}={}**
    zhangsan 0 male
    
    logUser(options);
    
    
    

注意事项

1.默认值的生效条件

不传参数,或者明确的传递undefined作为参数,只有这两种情况下,默认值才会生效

    const multiply = (x,y=1)=>x*y;
    console.log(multiply(2,0));//0
    console.log(multiply(2,null));//0
    console.log(Number(null));//0
    console.log(Number(undefined));//NaN
    console.log(multiply(2));//2
2.默认值表达式

如果默认值是表达式,默认值表达式是惰性求值的

3.设置默认值的小技巧
    函数参数的默认值,最好从参数列表的右边开始设置
    const multiply = (x=1,y)=>x*y;
    console.log(multiply(undefined,2));//2 这里必须要书写undefined

    const multiply = (x,y=1)=>x*y;
    console.log(multiply(2));//2