Analyse complète de null en JavaScript

Cet article vous apporte des connaissances pertinentes sur javascript est un type primitif, ce qui signifie qu'il ne contient intentionnellement aucune valeur d'objet. Jetons un coup d'œil à tout ce qui concerne null en JavaScript : sa signification et comment le détecter. la différence entre null et indéfini, et pourquoi une utilisation intensive de null entraînera des difficultés dans la maintenance du code, etc. J'espère que cela sera utile à tout le monde.

【Recommandations associées : tutoriel vidéo javascript, front-end web】

JavaScript a deux types : les types primitifs (chaînes, booléens, nombres, symboles) et objets <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

let who = '';

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

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

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

1 Le concept de 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

. 1.1 Une métaphore plus appropriée pour null

2 Comment détecter null

let myVariable;

myVariable; // => undefined

2.1 null est une valeur fausse< /h3> 🎜null et false, 0, ", undefined, NaN sont tous des valeurs fausses. Si dans une instruction conditionnelle les rencontre, alors JavaScript les forcera à false🎜

null === undefined; // => false

Copier après la connexion

Copier après la connexion

2.2 typeof null

🎜typeof null; // => 'object'🎜

null == undefined; // => true

3 Le piège de null

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

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

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

let myVariable;

myVariable; // => undefined

null === undefined; // => false

null == undefined; // => true

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

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