将参数作为对象与字符串传递给函数有什么区别

Question

下面是一种方法，当用户在表单中输入他们的信息并单击提交时，使用他们的电子邮件和密码注册用户并在 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)
            }
        }
    }

对于这个函数调用：

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。

我的问题是：

为什么 displayName 只有在作为对象而不是正常形式传入时才有效？例如：

await createUserDocumentFromAuth(user, { displayName })

将取代 displayName: null 但是当我传入时不是：

await createUserDocumentFromAuth(user, displayName)

JavaScript 中这种技术叫什么？

Answer 1

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

稍后调用 setDoc() 方法时，它会使用 additionalInfo 到 add/overwrite 中的任何数据 userAuth。

所以，我建议添加

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

查看正在发送什么数据setDoc()

将参数作为对象与字符串传递给函数有什么区别

What is the difference between passing in argument as object vs string into a function

javascript

firebase

function

object

parameters