1. ก่อนแนะนำ 5 ประเภทดั้งเดิม
5 ประเภทดั้งเดิมใน JavaScript คือ สตริง , ตัวเลข , บูลีน , ไม่ได้กำหนด , null
var name = "jack"; var อายุ = 32; var single = false; var app; //undefinedConsole.log(Typeof ชื่อ); //stringconsole.log(Typeof อายุ); //numberconsole.log(Typeof Single); //booleanconsole.log( ttypeof app); //undefinedConsole.log(TypeOf NULL); //วัตถุ
พบว่าอีกสี่ประเภทพื้นฐาน ยกเว้น null สามารถระบุได้โดย typeof :
if (typeof name === "String") {name += "Zhang"; } if (typeof age === "number") {อายุ ++; } if (typeof single === "boolean" && single) {…} if (typeof app === "undefined") {app = {}; -เนื่องจาก typeof null จะได้รับวัตถุให้ใช้ === เพื่อตรวจจับ null โดยตรง:
if (el === null) {…}2. วัตถุ
วัตถุ JavaScript รวมถึงวัตถุในตัว ( วันที่, regexp, ข้อผิดพลาด ฯลฯ ) และ วัตถุที่กำหนดเอง
(โปรดทราบว่าแม้ว่าฟังก์ชั่นและอาร์เรย์จะเป็นวัตถุในตัว แต่ก็จะถูกกล่าวถึงแยกกันในส่วนถัดไป)
ไม่สามารถตรวจพบวัตถุโดยใช้ typeof เช่นประเภทพื้นฐานเนื่องจากผลลัพธ์ที่ตรวจพบเป็น วัตถุ ทั้งหมด:
console.log (typeof วันที่ใหม่ ()); //objectconsole.log(Typeof ใหม่ regexp ()); //objectConsole.log(Typeof ใหม่ข้อผิดพลาด ()); //objectconsole.log(Typeof ใหม่ ()); //objectconsole.log(Typeof ใหม่ ()); // การใช้ typeof เพื่อตรวจจับว่าวัตถุที่กำหนดเองเป็นวัตถุ
หากต้องการใช้อินสแตนซ์แทนเพื่อตรวจจับ:
var date = new date (); var reg = new regexp (); var err = ข้อผิดพลาดใหม่ (); var me = บุคคลใหม่ (); if (วันที่อินสแตนซ์ของวันที่) {// วันที่ตรวจจับปี = date.getulyear (); } if (reg instanceof regexp) {// การตรวจจับนิพจน์ปกติ reg.test (... ); } if (ข้อผิดพลาด err instanceof) {// ข้อยกเว้นการตรวจจับการโยน ERR; } if (me instanceof person) {// การตรวจจับวัตถุที่กำหนดเอง ... } แต่มีปัญหากับวัตถุที่กำหนดเองโดยสมมติว่าบุคคลนั้นถูกกำหนดไว้ในทั้ง Framea และ Frameb ของเบราว์เซอร์ วัตถุ ME ถูกกำหนดไว้ใน Framea และตรวจพบว่าเป็นความจริงโดยใช้ me instanceof Person แต่เมื่อวัตถุที่กำหนดเองฉันถูกส่งผ่านไปยัง FrameB อินสแตนซ์ของจะเป็นเท็จใน frameb
ดังที่ได้กล่าวไว้ในตอนต้นของส่วนนี้แม้ว่าฟังก์ชั่นและอาร์เรย์จะเป็นวัตถุในตัวพวกเขาจะถูกทิ้งไว้ในส่วนถัดไป เหตุผลก็คือฟังก์ชั่นและอาร์เรย์ก็มีปัญหาข้างต้นเช่นเดียวกับวัตถุที่กำหนดเอง ดังนั้นฟังก์ชั่นและอาร์เรย์โดยทั่วไปจะไม่ใช้อินสแตนซ์ของ
3. ฟังก์ชั่น
ข้างต้นกล่าวว่าการใช้ฟังก์ชั่นการตรวจจับอินสแตนซ์ไม่สามารถข้ามเฟรมได้ ดังนั้น typeof ใช้ในการตรวจจับซึ่งสามารถข้ามเฟรมได้:
var func = function () {}; if (typeof func === 'function') {…}อย่างไรก็ตาม IE8 ใช้ typeof เพื่อตรวจจับฟังก์ชั่น DOM และจะได้รับวัตถุดังนั้น IE8 ที่ใช้ใน:
console.log (typeof document.getElementById); // วัตถุไม่ใช่ functionconsole.log (typeof document.getElementsByTagname); // วัตถุไม่ใช่ functionconsole.log (typeof document.createElement); // object, ไม่ใช่ฟังก์ชั่น // ie Browsers ก่อน IE8, ใช้ในการตรวจจับว่าฟังก์ชั่น DOM ได้รับการสนับสนุนหรือไม่ถ้า ("getElementById" ในเอกสาร) {…} ถ้า ("getElementsByTagname" ในเอกสาร) {…} ถ้า ("getElementsByTagname" ในเอกสาร)4. อาเรย์
ข้างต้นกล่าวว่าการใช้อินสแตนซ์ของการตรวจจับอาร์เรย์นั้นไม่สามารถข้ามเฟรมได้ ก่อน ES5 เรามีวิธีการตรวจจับที่กำหนดเอง วิธีที่แม่นยำที่สุด: toString ที่ขึ้นอยู่กับอาร์เรย์จะส่งคืนสตริงคงที่ "[อาร์เรย์วัตถุ]" เพื่อตรวจจับ :
ฟังก์ชั่น isarray (arr) {return object.prototype.toString.call (arr) === "[อาร์เรย์วัตถุ]";}วิธีนี้มีความแม่นยำและสง่างามดังนั้นจึงถูกนำมาใช้โดยห้องสมุดหลายแห่ง ในที่สุดอาร์เรย์ได้รับการแนะนำให้รู้จักกับวิธีการ ISARRAY ใน ES5 โดยอ้างถึง MDN ตอนนี้คุณไม่จำเป็นต้องปรับแต่งวิธีการตรวจจับเพียงแค่ใช้ isarray ()
วิธีการตรวจจับอื่น ๆ มีข้อบกพร่องของตัวเองและไม่สามารถแม่นยำ 100% แต่เป็นวิธีคิดมันสามารถเรียนรู้ได้จากมัน ตัวอย่างเช่นการพึ่งพาความจริงที่ว่าอาร์เรย์เป็นวัตถุเดียวที่มีวิธีการเรียงลำดับที่ตรวจพบ:
ฟังก์ชั่น isarray (arr) {return typeof arr.sort === "function";}หากวิธีการเรียงลำดับถูกกำหนดไว้สำหรับวัตถุที่กำหนดเองวิธีนี้จะไม่ถูกต้อง
V. คุณลักษณะ
ตรวจสอบ ว่า ควรใช้คุณสมบัติในวัตถุอินสแตนซ์หรือไม่ หากคุณไม่สนใจว่าแอตทริบิวต์อยู่ในวัตถุอินสแตนซ์หรือในวัตถุต้นแบบคุณสามารถใช้ใน
ตัวอย่างเช่นตรวจจับคุณสมบัติวัตถุที่แท้จริง:
var person = {name: "jack", อายุ: 33}; ถ้า ("ชื่อ" ในตัวเอง) {…} //trueif(person.hasownproperty("name ")) {…} // จริงตัวอย่างเช่นคุณสมบัติวัตถุอินสแตนซ์:
var person = function (ชื่อ, อายุ) {this.name = name; this.age = age;}; person.prototype.location = "Shanghai"; var me = บุคคลใหม่ ("Jack", 33) ถ้า ("ชื่อ" ในตัวฉัน) {…} //trueif(Me.HasownProperty("Name "))) //trueif(me.hasownproperty("location ")) {…} // falseวิธีอื่น ๆ ไม่ดี:
ถ้า (วัตถุ [propname]) // ไม่ดีคุณจะรู้ได้อย่างไรว่าค่าคุณสมบัติไม่ใช่ 0 หรือ 1? ถ้า (วัตถุ [propname] === null) // ไม่ดีคุณจะรู้ได้อย่างไรว่าค่าคุณสมบัติไม่ใช่ NULL? ถ้า (วัตถุ [propname] === ไม่ได้กำหนด) // ไม่ดีคุณจะรู้ได้อย่างไรว่าค่าคุณสมบัติไม่ได้ถูกกำหนด?
สรุป
ใช้ typeof เพื่อตรวจจับสตริง, ตัวเลข, บูลีน, ไม่ได้กำหนด, ฟังก์ชั่น
ตรวจจับ null ด้วย ===
ตรวจจับอาร์เรย์ด้วย isarray ()
ใช้อินสแตนซ์ของเพื่อตรวจจับวัตถุในตัว (ยกเว้นฟังก์ชั่นและอาร์เรย์) และวัตถุที่กำหนดเอง
ใช้ HasownProperty เพื่อตรวจสอบว่าคุณสมบัติอยู่ในวัตถุอินสแตนซ์หรือไม่ หากคุณไม่สนใจว่าแอตทริบิวต์อยู่ในวัตถุอินสแตนซ์หรือในวัตถุต้นแบบคุณสามารถใช้ใน
โอเคนั่นคือทั้งหมดสำหรับบทความนี้เกี่ยวกับวิธีการตรวจจับ JavaScript ประเภทต่างๆ ฉันหวังว่าทุกคนสามารถศึกษาเนื้อหาของบทความนี้อย่างรอบคอบซึ่งอาจเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ JavaScript