JavaScript의 null 종합 분석

이 기사에서는 javascript에 대한 관련 지식을 제공합니다. Null은 의도적으로 개체 값을 포함하지 않음을 의미합니다. JavaScript에서 null의 의미와 감지 방법을 살펴보겠습니다. null과 정의되지 않음의 차이점, null을 광범위하게 사용하면 코드 유지 관리가 어려워지는 이유 등을 모두에게 도움이 되기를 바랍니다.

【관련 권장 사항: javascript 비디오 튜토리얼, web front-end】

JavaScript에는 기본 유형(문자열, 부울, 숫자, 기호) 및 객체 <code>JavaScript 有两种类型：原始类型（strings, booleans, numbers, symbols）和对象

对象是一个复杂的数据结构。最简单的 JavaScript 对象是普通对象 —— 键和相关值的集合

let myObject = {
  name: 'Eric Cartman'
};

但是很多情况下不能创建一个对象。在这种情况下，JavaScript 提供了一个特殊的值 null —— 表示缺少对象

let myObject = null;

在这篇文章中，你将学习关于 JavaScript 中的 null 的一切: 它的含义，如何检测它，null 和 undefined 之间的区别，以及为什么大量使用 null 会造成代码维护困难等

1.null 的概念

JavaScript 规范中这么描述 null

null 是一种原始类型，表示有意不包含任何对象值

如果您看到 null(分配给变量或由函数返回)，那么在那个位置原本应该是一个对象，但由于某种原因，一个对象没有创建

比如，函数 greetObject() 创建对象，但也可以在无法创建对象时返回 null:

function greetObject(who) {
  if (!who) {
    return null;
  }
  return { message: `Hello, ${who}!` };
}

greetObject('Eric'); // => { message: 'Hello, Eric!' }
greetObject();       // => null

当上面的函数中传入一个字符串参数时，如预期的，函数返回一个对象 { message: 'Hello, Eric!' }

但是，函数中不传任何参数时，该函数返回 null。返回 null 是合理的，因为 who 参数没有值，导致 greeting 对象无法创建

1.1 null 的一个比较贴切的比喻

考虑关于 null 的一个比较贴切的比喻，你可以把变量想象成一个盒子。就像变量可以容纳对象一样，盒子也可以容纳像茶壶等的物品

但一旦你收到一个盒子，打开它，什么也没有!有人弄错了，给了你一个空盒子。该盒子不包含任何内容，或者换句话说，它包含一个 null 值

2. 如何去检测 null

检查 null 好方法是使用严格相等运算符

const missingObject = null;
const existingObject = { message: 'Hello!' };

missingObject  === null; // => true
existingObject === null; // => false

missingObject === null 的结果为 true，因为 missingObject 变量包含一个 null 值。如果变量包含非空值，比如对象，则表达式 existingObject === null 的结果为 false

2.1 null 是一个假值

null 与 false、0、"、undefined、NaN 都是假值。如果在条件语句中遇到它们，那么 JavaScript 将把它们强制为 false

Boolean(null); // => false

if (null) {
  console.log('null is truthy');
} else {
  console.log('null is falsy'); // logs 'null is falsy'
}

2.2 typeof null

typeof value 类型操作符可以确定值的类型。例如，类型为 15 的是 number，typeof { prop: 'Value' } 等于 object。

有趣的是，null 值类型的结果是什么

typeof null; // => 'object'

一个缺失的对象类型怎么被判断为 object? 原来 typoef null 作为 object 是早期 JavaScript 实现中的一个错误

不要使用 typeof 操作符检测 null 值。如前所述，使用严格的相等运算符 myVar === null

如果你想使用 typeof 去检查一个变量是否是一个对象，你必须排除掉 null 的情况

function isObject(object) {
  return typeof object === 'object' && object !== null;
}

isObject({ prop: 'Value' }); // => true
isObject(15);                // => false
isObject(null);              // => false

3. null 的陷阱

null 通常会在你希望使用对象的情况下意外出现。然后，如果尝试从 null 中提取属性，JavaScript 会抛出一个错误

让我们再次使用 greetObject() 函数并尝试从返回的对象中访问 message 属性

let who = '';

greetObject(who).message; 
// throws "TypeError: greetObject() is null"

因为 who 变量是一个空字符串，所以函数返回 null。当从 null 访问 message 属性时，将抛出类型错误错误

你可以通过使用 可选链操作符 来处理 null

객체는 복잡한 데이터 구조입니다. 가장 간단한 JavaScript 객체는 키와 관련 값의 모음인 일반 객체입니다

let who = '';

greetObject(who)?.message ?? 'Hello, Stranger!';  
// => 'Hello, Stranger!'

그러나 대부분의 경우 객체를 생성할 수 없습니다. 이 경우 JavaScript는 개체가 누락되었음을 나타내는 특수 값 null을 제공합니다. 🎜

function greetObject(who) {
  if (!who) {
    who = 'Stranger';
  }
  return { message: `Hello, ${who}!` };
}

greetObject('Eric'); // => { message: 'Hello, Eric!' }
greetObject();       // => { message: 'Hello, Stranger!' }

🎜이 기사에서는 JavaScript에 대해 배웁니다. 의 >null: 의미, 이를 감지하는 방법, null과 정의되지 않음의 차이점, < code>null은 코드 유지 관리 문제 등을 야기합니다. 🎜

1. null

🎜JavaScript의 개념은 null</code 사양에 설명되어 있습니다. >🎜 🎜null은 의도적으로 객체 값을 포함하지 않는 기본 유형입니다. 🎜🎜 <code>null(변수에 할당되거나 함수에 의해 반환됨)이 표시되면 해당 위치에 객체가 있어야 합니다. , 그러나 어떤 이유로 개체가 생성되지 않았습니다🎜🎜예를 들어 greetObject() 함수는 개체를 생성하지만 개체를 ​​만들 수 없는 경우 null을 반환할 수도 있습니다. 생성됨:🎜

function greetObject(who) {
  if (!who) {
    throw new Error('"who" argument is missing');
  }
  return { message: `Hello, ${who}!` };
}

greetObject('Eric'); // => { message: 'Hello, Eric!' }
greetObject();       // => throws an error

🎜위의 경우 예상대로 문자열 매개변수가 함수에 전달되면 함수는 { message: 'Hello, Eric!' }🎜🎜객체를 반환합니다. 함수에 전달되면 함수는 null을 반환합니다. who 매개변수에 값이 없어 greeting 개체를 생성할 수 없기 때문에 null을 반환하는 것이 합리적입니다. 🎜

1.1 null에 대한 더 적절한 비유

🎜 null에 대한 더 적절한 비유를 생각해 보세요. 변수를 상자로 생각할 수 있습니다. 변수가 물건을 담을 수 있는 것처럼 상자도 찻주전자 등의 물건을 담을 수 있습니다. 🎜🎜 하지만 일단 상자를 받고 열어보면 아무 것도 없습니다! 누군가 실수로 빈 상자를 주었습니다. 상자에 내용이 없습니다. 즉, null 값이 들어 있습니다🎜

2. null을 감지하는 방법

🎜 null 확인 좋은 방법 완전 항등 연산자🎜

let myVariable;

myVariable; // => undefined

🎜missingObject === null를 사용한 결과는 missingObject 변수에 null</code이 포함되어 있으므로 <code>true입니다. 코드> 값. 변수에 객체와 같이 null이 아닌 값이 포함된 경우 existingObject === null 표현식은 false로 평가됩니다.🎜

2.1 null은 false 값입니다< /h3> 🎜null 및 false, 0, ", 정의되지 않음, NaN은 모두 false 값입니다. 조건문에서 이를 발견하면 JavaScript는 강제로 false🎜

null === undefined; // => false

2.2 typeof null

🎜typeof value 유형을 지정합니다. 연산 기호는 값의 유형을 결정할 수 있습니다. 예를 들어 유형 15는 number이고 typeof { prop: 'Value' }는 객체와 같습니다. . 흥미롭게도 null 값 유형🎜

🎜typeof null // => 'object'🎜

🎜 누락된 객체 유형은 어떻게 될까요? 객체로 결정되나요? 객체로서의 typoef null는 초기 JavaScript 구현🎜🎜의 버그였습니다. typeof 연산자를 사용하지 마세요. null 값을 감지합니다. 앞서 언급한 것처럼 원하는 경우 완전 항등 연산자 myVar === null🎜🎜을 사용하세요. typeof를 사용하려면 변수가 객체인지 확인하려면 null 상황을 제외해야 합니다🎜

null == undefined; // => true

3. null

🎜null 일반적으로 개체를 사용하려는 경우 예상치 못한 일입니다. 그런 다음 null에서 속성을 추출하려고 하면 JavaScript에서 오류가 발생합니다. 🎜🎜 사용해 보겠습니다. < 다시 code>greetObject() 함수를 실행하고 반환된 개체에서 message 속성에 액세스하려고 시도합니다. 🎜

function isEmpty(value) {
  return value == null;
}

isEmpty(42);                // => false
isEmpty({ prop: 'Value' }); // => false
isEmpty(null);              // => true
isEmpty(undefined);         // => true

🎜 who 변수가 빈 문자열이므로 함수는 < code>null을 반환합니다. null🎜🎜선택적 연결 연산자 rrreee🎜를 사용하여 null🎜을 처리할 수 있습니다. 또는 두 가지를 사용할 수 있습니다. 다음 섹션에서 설명하는 옵션입니다. 🎜

4. null 的替代方案

当你不能构造一个对象时，很容易返回 null。但这种做法也有缺点

一旦 null 出现在执行堆栈中，你总是必须检查它

我们尽量避免返回 null：

• 返回默认对象而不是 null
• 抛出错误而不是返回 null

让我们回忆一下 greetObject() 函数返回 greeting 对象

当缺少参数时，可以返回一个默认对象，而不是返回 null

function greetObject(who) {
  if (!who) {
    who = 'Stranger';
  }
  return { message: `Hello, ${who}!` };
}

greetObject('Eric'); // => { message: 'Hello, Eric!' }
greetObject();       // => { message: 'Hello, Stranger!' }

或者抛出一个错误

function greetObject(who) {
  if (!who) {
    throw new Error('"who" argument is missing');
  }
  return { message: `Hello, ${who}!` };
}

greetObject('Eric'); // => { message: 'Hello, Eric!' }
greetObject();       // => throws an error

这些实践可以让你完全避免处理 null

5. null vs undefined

undefined 就是未初始化的变量或对象属性的值

例如，如果在声明变量时没有赋初值，那么访问该变量的结果为 undefined

let myVariable;

myVariable; // => undefined

null 和 undefined 之间的主要区别是，null 表示丢失了的对象，而 undefined 表示未初始化的状态

严格相等运算符 === 区分 null 和 undefined

null === undefined; // => false

而松散相等运算符 == 则认为 null 和 undefined 相等

null == undefined; // => true

我使用松散相等运算符检查变量是否为 null 或 undefined

function isEmpty(value) {
  return value == null;
}

isEmpty(42);                // => false
isEmpty({ prop: 'Value' }); // => false
isEmpty(null);              // => true
isEmpty(undefined);         // => true

6. 总结

null 是 JavaScript 中的一个特殊值，表示丢失的对象

严格相等运算符判断变量是否为空: variable === null。

typoef 操作符用于确定变量的类型(number, string, boolean)。但是，typeof 在 null 情况下会引起误解: typeof null 结果为 object

null 和 undefined 在某种程度上是等价的，但null 表示一个丢失的对象，而 undefined 表示未初始化状态

尽可能避免返回 null 或将变量设置为 null。因为这种做法会导致 null 值的扩展和需要对 null 的验证。相反，尝试使用具有默认属性的对象，或者甚至抛出错误会是更好的实践

你会使用什么方法来检查 null?

【相关推荐：javascript视频教程、web前端】

위 내용은 JavaScript의 null 종합 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!