Hướng dẫn kiểm tra kiểu dữ liệu trong javascript mới nhất 2020

Kiểm tra kiểu dữ liệu trong javascript là một trong những keyword được search nhiều nhất trên Google về chủ đề kiểm tra kiểu dữ liệu trong javascript. Trong bài viết này, cachthietkeweb.vn sẽ viết bài viết Hướng dẫn kiểm tra kiểu dữ liệu trong javascript mới nhất 2020.

Kiểm Tra Kiểu Dữ Liệu Trong Javascript

Tóm Tắt

thiết kế xây dựng ĐẦU

Javascript là ngôn ngữ k cần chỉ rõ kiểu dữ liệu khi khai báo biến. Nếu phải định rõ kiểu cho biến sẽ làm giảm phần đông sức mạnh của Js, không những thế trong nhiều trường hợp, việc hiểu rõ các mẹo tra cứu kiểu dữ liệu của biến vẫn rất cần thiết. Có nhiều cách để check kiểu dữ liệu trong JavaScript, ngoài ra trong bài viết này, mình xin giới thiệu 4 cách: toán tử typeof, toán tử instanceof, constructor property và phương pháp toString của Object.

1. Typeof operator

Toán tử typeof trong JavaScript trả về một chuỗi mô tả kiểu dữ liệu của bất kỳ toán hạng đầu vào nào. Trong ECMAScript 5, có 6 giá trị đủ sức được trả về khi thực hiện type checking:

Bạn đang đọc: Hướng dẫn kiểm tra kiểu dữ liệu trong javascript mới nhất 2020 – Cách thiết kế Web

typeof 'str';        // "string"
typeof 10;           // "number"
typeof true;         // "boolean"
typeof {};           // "object"
typeof function(){}; // "function"
typeof undefined;    // "undefined"

Tính nhất quán và độ tin cậy của toán tử này là không cao, ta đủ sức gặp phải chủ đề khi dùng toán tử này với các kiểu dữ liệu chẳng hề là một trong những kiểu bên trên, ví dụ giống như là mảng, null các loại custom Object. hơn nữa, type checking theo mẹo này có rùi ro do sẽ phải so sánh chuỗi (case sensitive versuse insensive hoặc lỗi chính tả).

typeof null;                     // "object"
typeof [];                       // "object"
typeof new String('str');        // "object"
typeof new function Custom(){};  // "object"

typeof {} === 'Object';          // false
typeof {} === 'objcet';          // false

2. Instanceof operator

Toán tử instanceof so sánh hai trị giá (một biến và một function) bằng cách rà soát chuỗi nguyên mẫu (prototype chain) của biến với nguyên mẫu của function object. Vì toán hạng thứ 2 đủ nội lực là bất cứ function nào mà chings ta mong muốn, nên instanceof có thể được sử dụng để tra cứu các custom types nữa. thêm nữa, bởi instanceof dùng toán hạng là một function thay vì một chuỗi, do vậy, nếu ta có vô tình gõ nhầm thì trình biên dịch sẽ thông báo lỗi ngay.

{} instanceof Object;               // true
[] instanceof Array;                // true
(function(){}) instanceof Function; // true

var Foo = function(){};
new Foo() instanceof Foo;           // true

new Foo() instanceof Doo;           // ReferenceError: Doo is not defined

rà soát chuỗi nguyên mẫu của thị trường thì khá có ích, không những thế instanceof sẽ luôn luôn trả về false cho các kiểu dữ liệu nguyên thủy (chuỗi, number, booleans, null và undefined) bởi chúng không phải là phân khúc và vì thế không có nguyên mẫu.

'str' instanceof String;        // false
9 instanceof Number;            // false
true instanceof Boolean;        // false
null instanceof Object;         // false
undefined instanceof Object;    // false

Mặc dù chúng ta null hoặc undefined không thể là toán hạng thứ 2 của toán tử instanceof (vì chúng không hề là function), ta luôn luôn đủ nội lực dễ dàng rà soát null và undefined với toán tử ===.

undefined instanceof undefined; // TypeError: Expecting a function in instanceof thanh tra rà soát, but got undefined
null instanceof null;           // TypeError: Expecting a function in instanceof thanh tra rà soát, but got null

undefined === undefined;        // true
null === null;                  // true

3. Constructor property

Các phân khúc kế thừa constructor property từ nguyên mẫu của chúng, chúng ta đủ sức sử dụng nó để tra cứu kiểu của biến mà chẳng phải rà soát tất cả chuỗi nguyên mẫu. giống như instanceof, ta vừa mới test function object, vì vậy chúng ta đủ sức tra cứu custom function.

Xem thêm: Top 20 bài tập javascript cơ bản mới nhất 2022

({}).constructor === Object;           // true
/regex/.constructor === RegExp;        // true
(new Date()).constructor === Date;     // true

[].constructor === Array;              // true
[] instanceof Array;                   // true
[].constructor === Object;             // false
[] instanceof Object;                  // true

var Custom = function(){};
(new Custom()).constructor === Custom; // true

mẹo này cũng ứng dụng với những kiểu dữ liệu nguyên thủy, bởi JavaScript sẽ wrap những trị giá này vào trong những class Number, String và Boolean khi tất cả chúng ta chịu khó truy vấn vào một thuộc tính trên chúng .

(9).constructor === Number;   // true
'str'.constructor === String; // true
true.constructor === Boolean; // true

ngoài ra, vì cách này truy vấn trực tiếp vào property thay vì trải qua method, cần hoàn toàn có thể gặp trường hợp vô tình sửa đổi trị giá của property

var Custom = function(){};
var custom = new Custom();

custom.constructor = null;
custom.constructor === Custom; // false

custom = null;
custom.constructor === Custom; // TypeError: Cannot read property 'constructor' of null
custom === null;               // true

4. Object.prototype.toString method

hướng dẫn này thì khắc phục được nhiều vấn đề của các phương thức bên trên. Object.prototype.toString sẽ trả về một chuỗi theo form “[object Type]”, và nó có thể được so sánh tương tự như cách sử dụng typeof. k may là ta vẫn phải so sánh chuỗi, và các custom object sẽ trả về chuỗi “[object Object]”.

[1,2,3].toString();                        // "1,2,3"
Object.prototype.toString.call([1,2,3]);   // "[object Array]"
Object.prototype.toString.call(new Date())
  .slice(8, -1) === 'Date';                // true
Object.prototype.toString.call(
  new (function Custom(){}));              // "[object Object]"

như constructor, method này sẽ wrap các kiểu dữ liệu nguyên thủy vào các đối tượng tương ứng của chúng. hơn nữa, phương pháp này còn ứng dụng được cho cả trường hợp null hoặc undefined.

Object.prototype.toString.call('str');     // "[object String]"
Object.prototype.toString.call(10);        // "[object Number]"
Object.prototype.toString.call(false);     // "[object Boolean]"
Object.prototype.toString.call(null);      // "[object Null]"
Object.prototype.toString.call(undefined); // "[object Undefined]"

KẾT luận giải

I would be presumptuous to claim there is one best way to thanh tra rà soát types in JavaScript. In truth, there are many valid ways, each with their pros and cons, and each better suited for specific situations and projects. Having a better understanding of these options gives us power to make an informed decision that’s best for our code. For convenience, here is a table summarizing a few properties of each approach. k thể khẳng định chắc chắn đâu là mẹo tốt nhất để kiểm tra kiểu dữ liệu trong JavaScript. Trong trong thực tiễn, có rất nhiều chiêu thức, mỗi hướng dẫn đều có ưu và khuyết điểm riêng, và tương thích hơn cho từng trường hợp đơn cử của dự án Bất Động Sản. Nắm rõ càng nhiều giải pháp, ta lại càng đủ sức lựa chọn tuyệt kỹ thêm vào nhất với mình. Để thuận tiện, dưới đây là một bảng tóm tắt một vài thuộc tính của mỗi mẹo trên

	typeof	instanceof	constructor	tostring
Tránh phải so sánh chuỗi		O	O
commonly used	O	O
checks custom classes		O	O
test null trực tiếp				O
rà soát Xem thêm: 5 Loại Vòng lặp trong JavaScript undefined trực tiếp	O			O
hoạt động trong trường hợp window không giống nhau (1)	O			O

Chú thích

( 1 ) Mỗi window / frame lại tạo instance unique cho mỗi đối tượng người dùng build-in. cho nên vì thế nếu tất cả chúng ta so sánh Array window này với Array ở window khác, 2 giá trị này sẽ không bằng nhau .
nguồn : viblo.asia

Source: https://final-blade.com
Category: Kiến thức Internet

admin

final-blade.com