javascript - 未捕获的类型错误：无法解构“未定义”或“空”的属性“名称”

Question

在传递空对象的情况下，对象解构会引发错误

function test ({name= 'empty'}={}) {
  console.log(name)
}
test(null);

未捕获的类型错误：无法解构name“未定义”或“空”的属性。测试时 (:1:15) 时:1:1

Answer 1

请参阅文档：

如果未传递任何值或未定义，则默认函数参数允许使用默认值初始化命名参数。

换句话说，如果被传递，则不会分配默认参数：null

function fn(arg = 'foo') {
  console.log(arg);
}
fn(null);

改为在函数的第一行进行解构：

function test (arg) {
  const { name = 'empty' } = arg || {};
  console.log(name)
}
test(null);

Answer 2

function test (user = {}) {
  const defaultName= 'Invalid User Object'
  if(!user?.name) return defaultName
  const {name} = user
  return user
}
test(null);

Answer 3

如果您没有为对象分配任何参数或值，但想将其传递为空，因为您计划在稍后阶段为其分配一个值，最好不要将其放在括号内，将其传递为空。

所以让我们假设你有：

这个功能：

const {signup}  = useAuth()

这肯定会引发错误，因为您实际上是在传递没有参数的对象。

要解决此问题，您必须从括号中删除空对象，如下所示：

const signup  = useAuth() 

然后在您的类或函数中使用它，如下所示：

async {....
     await signup(emailRef.current.value, passwordRef.current.value)

...}

Answer 4

这就是你需要的：

function doDotsCalculations(el) {
    const height = el.height();
    const {top = 'empty', left = 'empty'} = el.position() || {};
    const res = height + top + 20;

    $(".owl-carousel .owl-dots").css({
        top: `${res}px`,
        left: `${left}px`
    });
}