TypeScript中的以下条件有什么区别

Question

if (!value || value.length<1) 
if (value.length<1)

这两种情况有什么区别？不是一样吗？

Answer 1

不，它们完全不同。

!value

这会检查一个项是否存在并且它没有被定义，但![] and also ![3]这总是错误的。基本上它检查存在。

并且甚至CCD_ 2总是真的。

length

计算该数组中的元素数量，并将其纯粹应用于数组。

对于[] , value.length<1 this returns true.

Answer 2

如果value是null或undefined，则第二个if将抛出一个错误，说明您无法访问null/undefined的length。

第一个阻止了这种情况，因为只有当value是真的时，它才会访问value.length。否则，满足第一个条件(!value(，因此甚至不会评估第二个条件(value.length < 1(。

const arr1 = null;
const arr2 = [];
// Satisfies first condition:
if (!arr1 || arr1.length < 1) console.log('No values in arr1.');
// Satisfies second condition:
if (!arr2 || arr2.length < 1) console.log('No values in arr2.');
// Breaks:
if (arr1.length < 1) console.log('No values in arr1.');

无论如何，这并不是TS特有的，它只是香草JS的工作方式。

Answer 3

快速理解的方法是不能访问未定义数组的length属性。因此，第二个if条件将抛出类似于Cannot access property 'length' of undefined的错误。

然而，第一个if条件检查阵列是否已定义。所以它不会抛出任何错误。

Typescript包含使用"安全导航运算符"或可选链接运算符?.进行此检查的本机方法。所以在TS中，你可以简单地进行

if (value?.length < 1) { }

相当于JS

if ((value === null || value === void 0 ? void 0 : value.length) < 1) { }