将参数作为 object 与字符串传递到 function 之间有什么区别

Question

下面是一种使用 email 和密码注册用户并在用户将其信息输入表单并单击提交时在 Firebase 中创建文档的方法：

const onSubmitHandler = async (e) => {
        e.preventDefault();

        try {
            const { user } = await createAuthUserWithEmailAndPassword(email, password);
            console.log(user, 'user')

            await createUserDocumentFromAuth(user, { displayName })
        }catch(err) {
            if(err === 'auth/email-already-in-use') {
                alert('Account with this email already exists');
                return;
            }else {
                console.log(err)
            }
        }
    }

对于这个 function 电话：

await createUserDocumentFromAuth(user, { displayName })

其中displayName可以是字符串，例如ElonMusk 。 在实际的createUserDocumentFromAuth ，我调用了 setDoc 方法，该方法来自 Firebase 以设置用户文档：

export const createUserDocumentFromAuth = async ( userAuth, additionalInfo = {} ) => {
  if(!userAuth) return;
  console.log(additionalInfo, 'additionalInfo')
  const userDocRef = doc(db, 'users', userAuth.uid);
  const userSnapshot = await getDoc(userDocRef);

  if(!userSnapshot.exists()) {
    const { displayName, email } = userAuth;
    const createdAt = new Date();
    try {
      // set the doc here
      await setDoc(userDocRef, {
        displayName,
        email,
        createdAt,
        ...additionalInfo
      });
    } catch(err) {
      console.log('err creating the user', err)
    }
  };

  return userDocRef;
}

我手动传入{ displayName }的原因是因为有一种情况，服务器对createAuthUserWithEmailAndPassword(email, password)的响应中displayName为null ，但我们希望用户在数据库中注册一个 displayName 。

我的问题是：

1. 为什么displayName仅在作为 object 而不是正常形式传入时才有效？ 例如：

await createUserDocumentFromAuth(user, { displayName })

将替换显示displayName: null但是当我传入时不会：

await createUserDocumentFromAuth(user, displayName)

2. JavaScript中这个技术叫什么？

Answer 1

如果您查看createUserDocumentFromAuth ，您会发现它需要两个 arguments userAuth和additionalInfo ，这两个 arguments 都应该是对象。

稍后在调用setDoc()方法时，它使用来自additionalInfo的数据来添加/覆盖userAuth中的任何内容。

所以，我建议添加

console.log(userDocRef, {
        displayName,
        email,
        createdAt,
        ...additionalInfo
      });

查看什么数据被发送到setDoc()