JavaScript はデータ型をどのように決定するのでしょうか? 8つの共有方法

青灯夜游
リリース: 2023-02-17 18:19:41
転載
4652 人が閲覧しました

JavaScript はデータ型をどのように判断するのでしょうか?この記事では、仕事や面接に効果的に役立つ、JS を使用してデータ型を決定する 8 つの方法を紹介します。

JavaScript はデータ型をどのように決定するのでしょうか? 8つの共有方法

1. typeof

  • は基本型と参照型のみを認識できます

注: null , NaN, document.all 判定

console.log(typeof null); // object
console.log(typeof NaN); // number
console.log(typeof document.all); // undefined
ログイン後にコピー

2, コンストラクタ

  • コンストラクタ インスタンス オブジェクトを作成したコンストラクターを指します

nullunnamed には constructor と ## がないことに注意してください。 #constructor 書き換え可能

String.prototype.constructor = function fn() {
  return {};
};

console.log("云牧".constructor); // [Function: fn]
ログイン後にコピー


3,instanceof

    構文:
  • objinstanceof Type
  • 関数:判定
  • objType クラスのインスタンスであるかどうかは、参照データ
  • が実装されているかどうか、つまり
  • のプロトタイプ オブジェクトであるかどうかを判断するためにのみ使用できます。 Typeobj プロトタイプ チェーン上のオブジェクト
  • 注: 右側のオペランドは関数またはクラスである必要があります
Handwriting

instanceof:

function myInstanceof(Fn, obj) {
  // 获取该函数显示原型
  const prototype = Fn.prototype;
  // 获取obj的隐式原型
  let proto = obj.__proto__;
  // 遍历原型链
  while (proto) {
    // 检测原型是否相等
    if (proto === prototype) {
      return true;
    }
    // 如果不等于则继续往深处查找
    proto = proto.__proto__;
  }
  return false;
}
ログイン後にコピー


4. isPrototypeof

    はインスタンス オブジェクトのプロトタイプ チェーン上にありますか?
  • は基本的に
  • instanceof# と同等です。
    console.log(Object.isPrototypeOf({})); // false
    console.log(Object.prototype.isPrototypeOf({})); // true  期望左操作数是一个原型,{} 原型链能找到 Object.prototype
    ログイン後にコピー
5. Object.prototype.toString

##関数動的 this の機能を使用します

##
function typeOf(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

// 测试
console.log(typeOf(1)); // Number
console.log(typeOf("1")); // String
console.log(typeOf(true)); // Boolean
console.log(typeOf(null)); // Null
console.log(typeOf(undefined)); // Undefined
console.log(typeOf(Symbol(1))); // Symbol
console.log(typeOf({})); // Object
console.log(typeOf([])); // Array
console.log(typeOf(function () {})); // Function
console.log(typeOf(new Date())); // Date
console.log(typeOf(new RegExp())); // RegExp
ログイン後にコピー
    #6. アヒル型の検出
自身の属性の型や実行結果の型を確認する

#通常、解の候補として使用されます

    #例:
  • kindof
  • および
  • p-is-promise
  • p-is-promise:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const isObject = value =&gt; value !== null &amp;&amp; (typeof value === &quot;object&quot; || typeof value === &quot;function&quot;); export default function isPromise(value) { return ( value instanceof Promise || (isObject(value) &amp;&amp; typeof value.then === &quot;function&quot; &amp;&amp; typeof value.catch === &quot;function&quot;) ); }</pre><div class="contentsignin">ログイン後にコピー</div></div>kindof:
  • function kindof(obj) {
      var type;
      if (obj === undefined) return "undefined";
      if (obj === null) return "null";
    
      switch ((type = typeof obj)) {
        case "object":
          switch (Object.prototype.toString.call(obj)) {
            case "[object RegExp]":
              return "regexp";
            case "[object Date]":
              return "date";
            case "[object Array]":
              return "array";
          }
    
        default:
          return type;
      }
    }
    ログイン後にコピー

7、Symbol.toStringTag

原則:
Object.prototype.toString

は値を読み取ります

##該当するシナリオ: カスタム タイプが必要
  • Notes: 互換性
    class MyArray {
      get [Symbol.toStringTag]() {
        return "MyArray";
      }
    }
    
    const arr = new MyArray();
    console.log(Object.prototype.toString.call(arr)); // [object MyArray]
    ログイン後にコピー
  • 8. 待機中の比較
  • 原則: 固定値との比較

該当するシナリオ:

未定義

    window
  • document
  • null など。underscore.js:
  • ##概要

メソッド

基本データ型

参照型注意事項typeof√##constructor√ 部分 √ は書き換え可能 instanceofxx √ マルチウィンドウ、適切なコンストラクターまたはクラスisPrototypeof√√#ダックタイピング-√最後の手段としての互換性カスタム オブジェクトの識別特別なオブジェクト追加の食品: ES6 で強化された NaNNaN および Number.NaN 機能
NaN、オブジェクト、ドキュメント.all
null と未定義に注意してくださいtoString
組み込みプロトタイプに注意してください
Symbol.toString Tagxx
その他の比較
typeof

の後には数字が続きます

    私は自分自身と同等ではありません
  • delete
  • は削除できません
  • isNaN
  • 数値でない場合、暗黙的な変換の受信結果が # の場合##NaN の場合は

    true
  • が返され、それ以外の場合は
false

    console.log(isNaN(NaN)); // true
    console.log(isNaN({})); // true
    ログイン後にコピー
  • Number.isNaN## が返されます。 # 値が数値であるかどうか、およびその値が NaN
    console.log(Number.isNaN(NaN)); // true
    console.log(Number.isNaN({})); // false
    ログイン後にコピー
  • に等しいかどうかを判断します。 その他の判断
NaN

のメソッド

function isNaNVal(val) {
  return Object.is(val, NaN);
}

function isNaNVal(val) {
  return val !== val;
}

function isNaNVal(val) {
  return typeof val === "number" && isNaN(val);
}

// 综合垫片
if (!("isNaN" in Number)) {
  Number.isNaN = function (val) {
    return typeof val === "number" && isNaN(val);
  };
}
ログイン後にコピー
# かどうか
    ##indexOf と includes
  • indexOf
は検索できません

NaN,includes

の場合は

const arr = [NaN];

console.log(arr.indexOf(NaN)); // -1
console.log(arr.includes(NaN)); // true
ログイン後にコピー
[推奨学習:
    JavaScript 上級チュートリアル
  • ]

以上がJavaScript はデータ型をどのように決定するのでしょうか? 8つの共有方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート