検索
ホームページウェブフロントエンドjsチュートリアルJavaScriptにおけるtypeofの使い方入門_基礎知識

JavaScript の Typeof は実際には非常に複雑ですが、多くのことを行うために使用できますが、多くの奇妙な動作もあります。

この記事では、その複数の用途をリストし、既存の問題と解決策も指摘します。

この記事を読む前提は、プリミティブ値とオブジェクト値の違いを理解する必要があるということです。

変数が存在するかどうか、およびその変数に値があるかどうかを確認します
typeof は、次の 2 つの場合に「未定義」を返します。

1. 変数が宣言されていません

2. 変数の値は未定義です

例:

コードをコピーします コードは次のとおりです。

> undeclaredVariable === "未定義"
true

> 宣言された変数;
> 宣言された変数の型
'未定義'

> 未定義のタイプ
'未定義'

値が未定義かどうかを検出する方法は他にもあります。

コードをコピー コードは次のとおりです。

> >> 値 === 未定義
true

しかし、このメソッドが宣言されていない変数に対して使用されると、例外がスローされます。これは、typeof のみが、エラーを報告せずに宣言されていない変数を通常どおり検出できるためです。

コードをコピーします コードは次のとおりです。
> >参照エラー: undeclaredVariable が定義されていません



注: 初期化されていない変数、パラメータが渡されていない仮パラメータ、および存在しないプロパティには、常にアクセス可能で値が常に未定義であるため、上記の問題は発生しません。

コードをコピーします コードは次のとおりです。> ; 宣言された変数 = == 未定義
true

> (関数 (x) { return x === 未定義 }())
true
> ({}).foo === 未定義

true


翻訳者注: したがって、宣言されていない可能性のあるグローバル変数の存在を検出したい場合は、if(window.maybeUndeclaredVariable){} を使用することもできます。

問題: typeof はこのようなタスクを完了するのが非常に複雑です。

解決策: この種の操作はあまり一般的ではないため、より良い解決策を見つける必要はないと考える人もいます。 しかし、おそらく誰かが特別な演算子を思いつくでしょう:

コードをコピーします

コードは次のとおりです。> 定義された undeclaredVariablefalse
> var宣言された変数;
> 定義された宣言された変数
false



あるいは、変数が宣言されているかどうかを検出する演算子が必要な場合もあります:

コードをコピーします

コードは次のとおりです:> undeclaredVariablefalse
>宣言された変数;
>宣言された変数
true



翻訳者注: Perl では、上記で定義された演算子は defined() と同等であり、上記で宣言された演算子はexists() と同等です。

値が未定義または null に等しくないかどうかを判断する

問題: 値が定義されているかどうか (値が未定義でも null でもない) を検出したい場合、次のような問題が発生しました。 typeof の有名な奇妙な動作 (バグと考えられています): typeof null は "object" を返します:


コードをコピーします

翻訳者注: これは元の JavaScript 実装のバグとしか言えず、これが現在の標準の規制方法です。 V8 では一度 typeof null === "null" を修正して実装しましたが、最終的には実行不可能であることが判明しました。 http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null。

(注釈: null を操作すると typeof は "object" を返します。これは JavaScript 言語自体のバグです。残念ながら、既存のコードがすでにこのパフォーマンスに依存しすぎているため、このバグは修正されることはありません。しかし、null はこの問題については stackoverflow で議論されています: http://stackoverflow.com/questions/801032/null-object-in-javascript/7968470#7968470@justjavac)

解決策: このタスクには typeof を使用せず、代わりに次のような関数を使用してください:

コードをコピー コードは次のとおりです。

function isDefined(x) {
return x ! == null && x !== 未定義;
}

もう 1 つの可能性は、「デフォルト値演算子」を導入することです。この場合、myValue が定義されていない場合、次の式はdefaultValue を返します。

コードをコピー コードは次のとおりです:

myValue ??defaultValue

上記の式は次と同等です:

コードをコピー コードは次のとおりです。

(myValue !== unknown && myValue ! == null ) ? myValue :defaultValue

または:

コードをコピー コードは次のとおりです:

myValue ??=defaultValue

は実際には次のステートメントを簡略化したものです:

コードをコピーします コードは次のとおりです:

myValue = myValue

bar などのネストされたプロパティにアクセスするときは、次の演算子の助けが必要になる場合があります:

コードをコピー コードは次のとおりです:

obj.foo.bar

obj または obj.foo が定義されていない場合、上記の式は例外をスローします。 演算子 .?? を使用すると、属性をレイヤーごとに移動するときに、値が未定義または null である最初に見つかった属性を返すことができます。

コードをコピー コードは次のとおりです:
obj.??foo.??bar

上記の式は次と同等です:

コードをコピー コードは次のとおりです。
(obj === unknown || obj === null) ? obj
: (obj.foo === 未定義 || obj.foo === null) ? obj.foo
: obj.foo.bar

オブジェクト値とプリミティブ値を区別する

次の関数は、x がオブジェクト値かどうかを確認するために使用されます:

コードをコピー コードは次のとおりです。
function isObject(x) {
return (typeof x === "関数"
|| (typeof x === "オブジェクト" && x !== null));
}

問題: typeof は関数とオブジェクトを異なる型とみなし、typeof null は「object」を返すため、上記の検出はより複雑になります。

解決策: 次の方法もオブジェクト値の検出によく使用されます:

コードをコピー コードは次のとおりです。
function isObject2(x) {
return x = == Object(x);
}

警告: ここで、instanceof Object を使用して検出できると思われるかもしれませんが、instanceof はオブジェクトのプロトタイプを使用してインスタンス関係を決定するため、プロトタイプのないオブジェクトをどうするか:

コードをコピーします コードは次のとおりです。

> null);
> Object.getPrototypeOf(obj)
null

obj は確かにオブジェクトですが、値のインスタンスではありません:

コードをコピーします コードは次のとおりです。

> typeof obj
'object '
> オブジェクトのインスタンス
false

実際には、そのようなオブジェクトに遭遇することはめったにないかもしれませんが、それは存在し、その用途があります。

翻訳者注: Object.prototype は、プロトタイプのない唯一の組み込みオブジェクトです。

コードをコピー コードは次のとおりです。

>Object.getPrototypeOf(Object.prototype )
null
>Object.prototype のタイプ
'object'
>Object.prototype オブジェクトのインスタンス
false

プリミティブ値の型は何ですか?
typeof は、プリミティブ値の型を確認する最良の方法です。

コードをコピーします コードは次のとおりです。

> typeof "abc"
'文字列'
> 未定義のタイプ
'未定義'

問題: typeof null の奇妙な動作に注意する必要があります。

コードをコピー コードは次のとおりです。

> typeof null // 注意してください。
'オブジェクト'

回避策: 次の関数でこの問題を解決できます (この使用例のみ)。

コードをコピー コードは次のとおりです。

function getPrimitiveTypeName(x) {
var typeName = typeof x;
switch(typeName) {
case "未定義":
case "boolean":
case "number":
case "string":
return type Name;
case "object":
if (x === null) {
return "null";
}
default: // 以前の判定はどれも合格しませんでした
throw new TypeError ("パラメータはプリミティブ値ではありません: " x);
}
}

より良い解決策: getTypeName() 関数を実装します。この関数は、元の値の型を返すだけでなく、オブジェクト値の内部 [[Class]] 属性も返すことができます。 この関数の実装方法は次のとおりです (翻訳者注: jQuery の $.type はそのような実装です)

値が関数であるかどうか
typeof を使用して、値が関数であるかどうかを検出できます。

コードをコピー コードは次のとおりです。

> typeof function () {}
'関数'
> Object.prototype.toString
'関数'

原則として、instanceof Function もこの要件を検出できます。 一見すると、よりエレガントな書き方に見えます。 ただし、ブラウザには癖があります。すべてのフレームとウィンドウに独自のグローバル変数があります。 したがって、あるフレームから別のフレームにオブジェクトを渡す場合、2 つのフレームのコンストラクターが異なるため、instanceof は正しく機能しません。 ECMAScript5 に Array.isArray() メソッドがあるのはこのためです。 オブジェクトが特定のコンストラクターのインスタンスであるかどうかをチェックするためのクロスフレームワーク メソッドがあれば便利です。 上記の getTypeName() は利用可能な回避策ですが、より根本的な解決策がある可能性があります。

概要
次に挙げるのは、現時点で JavaScript で最も緊急に必要とされる機能であり、typeof の現在の役割の一部の機能を置き換えることができます。

•isDefined() (Object.isDefined() など): 関数または演算子として使用できます

•isObject()

•getTypeName()

• オブジェクトが指定されたコンストラクターのインスタンスであるかどうかを検出するフレームワーク間のメカニズム

変数が宣言されているかどうかを確認するような要件の場合、独自の演算子は必要ない場合があります。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、