const pageId =data.formData&&data.formData.facetId 和const pageId =data?.formData?.facetId 的区别
时间: 2024-09-13 19:09:59 浏览: 44
FormData:FormData支持其中window.FormData未定义
在这两个JavaScript表达式中,`const pageId = data.formData && data.formData.facetId` 和 `const pageId = data?.formData?.facetId` 都试图从 `data` 对象获取名为 `formData` 的属性,进一步访问其中的 `facetId` 属性。但是它们在处理 undefined 或 null 值的方式上有显著区别:
1. **短路运算符 (&&)**: 当 `data.formData` 为 falsy(即 undefined、null、false、0、NaN 等)时,表达式会立即停止检查,因为后续的 `data.formData.facetId` 将不会执行。所以如果 `data.formData` 不存在或者值为 false,则 `pageId` 被赋值为 `undefined`。
```javascript
// 如果 formData 不存在,pageId 将保持未定义
const pageId = data.formData && data.formData.facetId;
```
2. **空合并操作符 (?)**: 这是一个新的特性,在ES2020中引入,它也是短路的。当 `data.formData` 为 null 或 undefined 时,`.`运算符会跳过尝试访问 `formData.facetId`。这种方式可以避免 `TypeError`,使得表达式更加健壮。
```javascript
// 如果 formData 不存在或 null,pageId 仍会得到 undefined
const pageId = data?.formData?.facetId;
```
总结来说,`data?.formData?.facetId` 更加安全,能处理 `data` 为空的情况,并且只有在 `data`、`formData` 都存在且非 null 时才会尝试访问 `facetId`。
阅读全文