Un examen plus approfondi de null en JavaScript

Tutoriel recommandé : "Tutoriel vidéo JavaScript"

JavaScript a 2 types : les types de base (string, booleans number , symbol) et des objets.

Les objets sont des structures de données complexes, les objets les plus simples en JS sont des objets ordinaires : un ensemble de clés et de valeurs associées :

let myObject = {
  name: '前端小智'
}

Mais dans certains cas, les objets ne peuvent pas être créés. Dans ce cas, JS fournit une valeur spéciale null — indiquant que l'objet est manquant.

let myObject = null

Dans cet article, nous allons tout apprendre sur null en JavaScript : ce que cela signifie, comment le détecter, la différence entre null et undefined et pourquoi l'utilisation de null nuit à votre code Difficile de maintenir.

1. Le concept de null

La spécification JS explique des informations sur null :

valeurnull La valeur de l'objet spécifié n'est pas définie. C'est l'un des types de base de JS et est considéré comme falsy dans les opérations booléennes.

Par exemple, la fonction greetObject() crée un objet, mais peut également renvoyer 回null lorsqu'elle ne peut pas créer d'objet :

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

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

Cependant, lorsque la fonction greetObject() est appelée sans arguments, la fonction renvoie null. Renvoyer null est raisonnable car le paramètre who n'a aucune valeur.

2. Comment vérifier null

Un bon moyen de vérifier une valeur null est d'utiliser l'opérateur d'égalité stricte :

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

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

Le résultat de missingObject === null est true car la variable missingObject contient une valeur null.

Si la variable contient une valeur non nulle (comme un objet), l'expression existObject === null est évaluée à false.

2.1 null est une valeur imaginaire

null et false, 0, '', undefined et NaN sont. toutes les valeurs imaginaires. Si une valeur imaginaire est rencontrée dans une instruction conditionnelle, JS forcera la valeur imaginaire à false. L'opérateur

Boolean(null); // => false

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

2.2 typeof null

typeof value détermine le type de valeur. Par exemple, le type de 15 est 'number' et le résultat de typeof {prop：'Value'} est 'object'.

Intéressant, quel est le résultat de type null

typeof null; // => 'object'

Pourquoi 'object', typoef null est object est un bug dans les premières implémentations de JS.

Pour détecter la valeur typeof, utilisez l'opérateur null. Comme mentionné précédemment, utilisez l'opérateur égal strict myVar === null.

Si nous voulons utiliser l'opérateur typeof pour vérifier si une variable est un objet, nous devons également exclure la valeur null :

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

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

3 . Le piège de null

null apparaît souvent de manière inattendue lorsque l'on pense que la variable est un objet. Ensuite, si vous extrayez l'attribut de null, JS générera une erreur.

Utilisez à nouveau la fonction greetObject() et essayez d'accéder à la propriété message à partir de l'objet renvoyé :

let who = '';

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

Comme la variable who est une chaîne vide, la fonction renvoie null . Lors de l'accès à une propriété null à partir de message, une erreur TypeError sera générée.

peut être géré en utilisant un chaînage facultatif avec une fusion nulle null:

let who = ''

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

4 Alternatives à null

. Lorsque l'objet ne peut pas être construit, notre approche habituelle consiste à revenir null, mais cette approche présente des inconvénients. Une vérification doit être effectuée lorsque null apparaît dans la pile d'exécution.

Essayez d'éviter de renvoyer null :

• Renvoyer l'objet par défaut au lieu de null
• Lance une erreur au lieu de renvoyer null

renvoie à la fonction greeting qui a initialement renvoyé l'objet greetObject(). Lorsque des paramètres sont manquants, au lieu de renvoyer null :

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

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

ou de générer une erreur :

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

, vous pouvez éviter d'utiliser null.

5. null vs undefined

undefined est une variable ou une propriété d'objet non initialisée. la valeur de undefined est la valeur d'une variable ou d'une propriété d'objet non initialisée.

let myVariable;

myVariable; // => undefined

La principale différence entre null et undefined est que null représente un objet perdu tandis que undefined représente un état non initialisé.

L'opérateur d'égalité stricte符=== fait la différence entre null et undefined :

null === undefined // => false

tandis que l'opérateur d'égalité == considère null et undefined comme égaux

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）很有用。 但是，如果为null，则typeof会产生误导：typeof null的值为'object'。

null和undefined在某种程度上是等价的，但null表示缺少对象，而undefined未初始化状态。

更多编程相关知识，请访问：编程视频课程！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!