JavaScript の null を詳しく見る-jsチュートリアル-php.cn

JavaScript の null を詳しく見る

青灯夜游

リリース： 2020-11-10 17:46:01

転載

2966 人が閲覧しました

JavaScript の null を詳しく見る

推奨チュートリアル: 「JavaScript ビデオチュートリアル」

JavaScript には 2 つのタイプがあります: 基本型 (string, # #) #booleans number, symbol) とオブジェクト。

オブジェクトは複雑なデータ構造です。JS の最も単純なオブジェクトは、キーと関連する値のセットである通常のオブジェクトです。

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

ログイン後にコピー

ただし、場合によっては、オブジェクトを作成できない場合があります。この場合、JS はオブジェクトが欠落していることを示す特別な値

null を提供します。

let myObject = null

ログイン後にコピー

この記事では、JavaScript の null についてすべて学びます。その意味、検出方法、

null と unknown の違い、そしてなぜそれを使用するのかについて説明します。 null により、コードのメンテナンスが困難になります。

1. null の概念

JS 仕様では、

null:

に関する情報について説明しています。値

null は、値が設定されていないオブジェクトを参照します。これは、JS の基本タイプの 1 つであり、ブール演算では falsy と見なされます。

たとえば、関数

greetObject() はオブジェクトを作成しますが、オブジェクトを作成できない場合は null を返すこともあります:

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

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

ログイン後にコピー

ただし、関数

greetObject() がパラメータを指定して呼び出された場合、関数は null を返します。 who パラメータには値がないため、null を返すのが妥当です。

2. null を確認する方法

null 値を確認する良い方法は、厳密等価演算子:

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

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

ログイン後にコピー

missingObject === null missingObject 変数に null が含まれるため、結果は true になります。価値。

変数に null 以外の値 (オブジェクトなど) が含まれている場合、式

existObject === null は false と評価されます。

2.1 null は仮想値

null および false、0、 ''、unknown、NaN はすべて虚数です。条件文で false 値が見つかった場合、JS は false 値を強制的に false に設定します。

Boolean(null); // => false

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

ログイン後にコピー

2.2 typeof null

typeof value演算子は値のタイプを決定します。たとえば、typeof 15 は 'number' であり、typeof {prop: 'Value'} の計算結果は 'object' となります。

興味深いことに、

type null

typeof null; // => 'object'

ログイン後にコピー

の結果は何ですか。

'object'、typoef null は # です。 ##object は初期の JS 実装のバグです。

null

値を検出するには、typeof 演算子を使用します。前に述べたように、厳密等価演算子 myVar === null を使用します。

typeof

演算子を使用して変数がオブジェクトかどうかを確認する場合は、null 値も除外する必要があります: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function isObject(object) { return typeof object === 'object' && object !== null; } isObject({ prop: 'Value' }); // => true isObject(15); // => false isObject(null); // => false</pre><div class="contentsignin">ログイン後にコピー</div></div>

3. null

null

の罠は、変数をオブジェクトだと思っているときに予期せず現れることがよくあります。次に、null からプロパティを抽出すると、JS はエラーをスローします。

greetObject()

関数を再度使用し、返されたオブジェクトから message プロパティへのアクセスを試みます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let who = ''; greetObject(who).message; // throws "TypeError: greetObject() is null"</pre><div class="contentsignin">ログイン後にコピー</div></div> because

who

変数は空の文字列であるため、関数は null を返します。 null から message プロパティにアクセスすると、TypeError エラーが発生します。 null マージによるオプションのチェーンを使用することで処理できます

null

:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let who = '' greetObject(who)?.message ?? 'Hello, Stranger!' // => 'Hello, Stranger!'</pre><div class="contentsignin">ログイン後にコピー</div></div>

4. null ## の代替案#オブジェクトを構築できない場合、通常のアプローチは null

を返すことですが、このアプローチには欠点があります。実行スタックに

null が表示された場合は、チェックを実行する必要があります。 null

を返さないようにしてください:

エラーをスローする代わりに、

null

代わりにデフォルトのオブジェクトを返します。 null
を返す場合は、最初に

オブジェクトを返した

greetObject() 関数に戻ります。パラメーターが欠落している場合、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

ログイン後にコピー

これら 2 つのアプローチにより、

の使用を回避できます。ヌル＃＃＃。

null 対未定義 unknown は初期化されていない変数またはオブジェクトのプロパティの値であり、

unknown

は初期化されていない変数またはオブジェクトのプロパティの値です。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let myVariable; myVariable; // => undefined</pre><div class="contentsignin">ログイン後にコピー</div></div>null と

unknown

の主な違いは、null は欠落しているオブジェクトを表すのに対し、unknown は初期化されていない状態を表すことです。。厳密等価演算子 演算子===

null

と unknown :<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">null === undefined // => false</pre><div class="contentsignin">ログイン後にコピー</div></div>および二重等価演算子== は、

null

および unknownと等しいとみなされます。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">null == undefined // => true</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>我使用双等相等运算符检查变量是否为<code>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未初始化状态。

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

以上がJavaScript の null を詳しく見るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。