对空对象参数这里不明白老师解释下

let def = "default";

function createEle(littele='div',{className=def,content=def}=con){

let cdom;

cdom =document.createElement(littele);

cdom.className=con.className;

cdom.innerHTML=con.content;

return cdom;

}

console.log(createEle('span'));

weixin_慕莱坞5016066 2021-03-29

源自：对象字面量的增强与函数参数的默认值 3-4 项目作业

收起

1回答

好帮手慕慕子 2021-03-29 16:00:19

同学你好，直接测试同学粘贴的这部分代码，控制台出现报错，找不到con，如下图所示：

老师猜测同学这里是提前定义了一个空对象con，如下图所示：

如果是的话，那么同学的代码没有效果是因为等号左侧的con表示要被解构的对象，而等号左侧的才是解构后的值，由于con是一个空对象，所以不可以使用con获取属性值。

建议修改：直接使用解构后的值即可。

因为{ className = def, content = def } = con表示给函数的参数设置默认值为空对象，并对这个空对象进行解构赋值，防止代码报错。如果设置默认值为空对象的话，那么当调用函数，没有传递第二个参数或者传递的第二个参数不是一个对象格式，代码就会报错，示例：

控制台报错，如下图所示：

祝学习愉快~

收起回答

慕沐0341706 #1
老师你这里好像不对？，
《因为{ className = def, content = def } = con表示给函数的参数设置默认值为空对象，并对这个空对象进行解构赋值，防止代码报错。如果设置默认值为空对象的话，那么当调用函数，没有传递第二个参数或者传递的第二个参数不是一个对象格式，代码就会报错，示例：》

这个我试了可以运行不会报错
<script>
        let con={};
        const createElement = (x = 'div', { content = 'default',className='default' } = con) => {
            let dom = document.createElement(x);
            dom.className = className;
            dom.innerText = content;
            // let body = document.querySelector('body');
            document.body.appendChild(dom);
            return dom;
        };
        // console.log(createElement());
        console.log(createElement('a'));
        console.log(createElement('span', { content: '慕课网' }));
        // console.log(createElement('span', {className:'feild', content: '函数某个参数是对象' }));
        createElement();
        createElement('a');
        createElement('span', { content: '慕课网' });
        createElement('span', {className:'feild', content: '函数某个参数是对象' });
    </script>

搜索
复制
搜索
复制
收藏
2022-03-30 18:01:36
好帮手慕慕子回复慕沐0341706 #2

同学你好，非常抱歉，老师这里漏掉了一个不字，应该是“如果不设置默认值为空对象的话”，如下：
非常抱歉给同学带来不好的体验，老师以后会更加严谨的，祝学习愉快~

2022-03-30 18:39:07