Rumah hujung hadapan web tutorial js JS中数据类型检测的四种方法简单介绍

JS中数据类型检测的四种方法简单介绍

Aug 06, 2018 pm 05:09 PM

JS中我们只用一个var就能定义所有类型的变量,非常方便,但是也同样给我们造成了困扰,如果我们想知道一个函数的返回值是什么类型的,或者输入的信息是什么类型的时候就要通过对数据进行检测,所以我们该如何进行数据类型的检测呢? 

数据类型检测方式:

  • typeof:用来检测数据类型的运算符

  • instanceof:用来检测某个实例是不是属于某个类

  • constructor:构造函数 作用和instanceof非常相似

  • Object.prototype.toString.call();   最准确的最常用的方法

typeof
typeof:用来检测数据类型的运算符;使用方式是  typeof + 检测的内容。

使用typeof检测数据类型,首先返回的都是一个字符串,字符串中包含对应的数据类型;

var num  = 2;
console.log(typeof num); // ->控制台输出字符串numberconsole.log(typeof typeof typeof typeof function () {}); 
 // 输出的结果为字符串String,因为第一次使用typeof检测后结果为一个字符串数据类型的数据,以后每次检测都是String
Salin selepas log masuk

typeof的局限性
1. typeof null 的结果为“object”
2. 不能具体细分是数组还是正则,还是对象中的其他值,因为使用typeof检测数据类型,对于对象数据类型中左右的值,最后返回的结果都是“object”


instanceof
instanceof:用来检测某个实例是不是属于某个类;使用方法: 实例 instanceof 类名

instanceof的局限性
1. 不能用来处理字面量创建出来的基本类型值:对于基本的数据类型来说,字面量方式创建出来的结果和实例方式创建出来的结果是有一定的区别的,从严格的意义上来讲,只有实例创建出来的结果才是标准对象数据类型的值,也是标准的Number这一个类的实例;对于字面量方式创建的结果是基本的数据类型值,不是严谨的实例,但是由于JS的松散性,导致可以使用Number.prototype上提供的方法

 console.log(1 instanceof Number);//->控制台输出false
 console.log(new Number(1) instanceof Number);//-> 控制台输出true
Salin selepas log masuk
  1. instanceof只要在当前实例的原型链上,我们检测出来的结果都为true

  2. 在类的原型链继承当中,我们最后检测出来的结果未必正确

 function Fn() {
 }  
 var  ary = new Array;
 Fn.prototype = ary;//原型继承:让子类的原型等于父类的一个实例
 var  f =new Fn; // f->Fn.prototype->Array.prototype->Object.prototype
 console.log(f instanceof Array); //-> true
Salin selepas log masuk

constructor:构造函数
constructor:构造函数 这种方法与instanceof非常相似

var obj = [];
console.log(obj.constructor === Array ); //->trueconsole.log(obj.constructor === RegExp); //->false//console还可以出来基本的数据类型var num = 1;
console.log(num.constructor === Number);//->true// constructor检测和instanceof一同,一般情况下是检测不了的var  reg = /^$/;
console.log(reg.constructor === RegExp);//-> trueconsole.log(reg.constructor === RegExp);//-> false
Salin selepas log masuk

局限性:我们可以把类的原型进行重写,在重写的过程中很有可能出现把之前的constructor覆盖了,这样检测出来的结果就是不准确的;对于特殊的数据类型null和undefined,它们的所属类是Null和Undefined,但是浏览器吧这两个类保护起来了,不允许我们进行访问使用

function Fn() {}  
Fn.prototype = new Array;var  f =new Fn;
console.log(f.constructor);//-> Array
Salin selepas log masuk

Object.prototype.toString.call()
这种方法是我们真是项目中最长用的也是现在最准确的一种方式
首先获取Object原型上的toString方法,让方法执行,并且改变方法中的this关键字的指向
在了解这种方式之前我们先了解下toString这个方法
toString:从字面上来看是转化成字符串,但是某些toString方法不仅仅是转化成字符串;对于Number、String、Boolean、Array、RegExp、Date、Function原型上的toString方法都是①把当前的数据类型转化为字符串的类型(它们的作用仅仅只是用来转成字符串);但是在Object原型上的toString方法不同于这些,②它的作用是返回当前方法的执行主体(方法中的this)所属的类的详细信息。
第一中类型转成字符串

        //Number.prototype.toString方法是转化为字符串  
        console.log((1).toString()); //->这里的toString是Number.prototype.toString用法是转成字符串-> '1'
        console.log((1).__proto__.__proto__.toString());//[object Object]
        console.log((128).toString(2/8/10));//把数字转化为二进制、八进制、十进制
Salin selepas log masuk

Object原型上的

 ({name:'编程'}).toString();
 console.log(obj.toString());//-> toString中的this是Obj,返回的是obj所属类的信息->[Object Object]第一个Object代表当前实例是对象数据类型的(这个是固定死的),第二个Object代表的是obj所属的类是ObjectMath.toString();//->toString中的this是Math,返回的是Math所属类的信息 ->  [Object Math]console.log(Object.prototype.toString.call([]));                //->[object Array]console.log(Object.prototype.toString.call(/^$/));               //->[object Array]console.log(({}).toString.call(new  Date));                      //->[object Date]console.log(Object.prototype.toString.call(1));                  //->[object Number]console.log(Object.prototype.toString.call('编程'));             //->[object String]console.log(Object.prototype.toString.call(null));               //->[object Null]console.log(Object.prototype.toString.call(undefined));          //->[object Undefined]console.log(Object.prototype.toString.call(function () {}));     //->[object Function]
Salin selepas log masuk

所有经过对比我们第四中方式的准确性是最高的,所以也是我们项目中经常使用的。Are you get it!!!

相关推荐:

详解在javaScript中检测数据类型的几种方式总结

js 判断数据类型的几种方法

Atas ialah kandungan terperinci JS中数据类型检测的四种方法简单介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri? Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri? Mar 18, 2025 pm 03:12 PM

Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.

Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas? Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas? Mar 18, 2025 pm 03:14 PM

Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.

Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apr 04, 2025 pm 02:42 PM

Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...

Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar? Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar? Mar 18, 2025 pm 03:16 PM

Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.

Siapa yang dibayar lebih banyak Python atau JavaScript? Siapa yang dibayar lebih banyak Python atau JavaScript? Apr 04, 2025 am 12:09 AM

Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.

Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified? Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified? Mar 18, 2025 pm 03:17 PM

Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.

Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza? Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza? Apr 04, 2025 pm 05:12 PM

Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...

TypeScript untuk pemula, Bahagian 2: Jenis Data Asas TypeScript untuk pemula, Bahagian 2: Jenis Data Asas Mar 19, 2025 am 09:10 AM

Sebaik sahaja anda telah menguasai tutorial TypeScript peringkat kemasukan, anda harus dapat menulis kod anda sendiri dalam IDE yang menyokong TypeScript dan menyusunnya ke dalam JavaScript. Tutorial ini akan menyelam ke dalam pelbagai jenis data dalam TypeScript. JavaScript mempunyai tujuh jenis data: null, undefined, boolean, nombor, rentetan, simbol (diperkenalkan oleh ES6) dan objek. Typescript mentakrifkan lebih banyak jenis atas dasar ini, dan tutorial ini akan meliputi semuanya secara terperinci. Jenis data null Seperti JavaScript, Null dalam TypeScript

See all articles