tek4

Kiểu dữ liệu trong JavaScript

by - September. 26, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8279 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-81.png" alt="Kiểu dữ liệu trong JavaScript" width="560" height="344" /></p> <p>Trong b&agrave;i viết n&agrave;y, ta sẽ c&ugrave;ng t&igrave;m hiểu về c&aacute;c kiểu dữ liệu trong JavaScript c&ugrave;ng với sự trợ gi&uacute;p của c&aacute;c v&iacute; dụ dẫn chứng.</p> <h1>C&aacute;c kiểu dữ liệu trong JavaScript</h1> <p>Kiểu dữ liệu li&ecirc;n quan đến c&aacute;ch thức m&agrave; c&aacute;c gi&aacute; trị dữ liệu m&agrave; ta c&oacute; thể sử dụng trong chương tr&igrave;nh của m&igrave;nh. Kiểu dữ liệu được sử dụng nhằm x&aacute;c định loại dữ liệu m&agrave; biến sẽ lưu trữ, đồng thời, gi&uacute;p cho người lập tr&igrave;nh thực hiện c&aacute;c thao t&aacute;c kh&aacute;c nhau với dữ liệu c&oacute; được.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a = 100; // Kiểu dữ liệu số nguy&ecirc;n var b = "Lap trinh Javscript"; // Kiểu dữ liệu chuỗi k&yacute; tự</pre> <p>Trong v&iacute; dụ tr&ecirc;n:</p> <ul> <li>Biến a c&oacute; chứa gi&aacute; trị l&agrave; 100, l&agrave; kiểu dữ liệu số nguy&ecirc;n (integer).</li> <li>Biến b c&oacute; chứa gi&aacute; trị l&agrave; một chuỗi k&yacute; tự, do đ&oacute; n&oacute; l&agrave; kiểu dữ liệu chuỗi.</li> </ul> <h2>C&aacute;c kiểu dữ liệu</h2> <p>C&oacute; t&aacute;m kiểu dữ liệu cơ bản trong Javascript, bao gồm:</p> <table> <tbody> <tr> <td style="text-align: center;">Kiểu dữ liệu</td> <td style="text-align: center;">M&ocirc; tả</td> <td style="text-align: center;">V&iacute; dụ</td> </tr> <tr> <td style="text-align: center;">String</td> <td>Đại diện cho kiểu dữ liệu văn bản.</td> <td>"Lập tr&igrave;nh Javascript"</td> </tr> <tr> <td style="text-align: center;">Number</td> <td>L&agrave; một gi&aacute; trị số nguy&ecirc;n hoặc số thực.</td> <td>100, 5.2</td> </tr> <tr> <td style="text-align: center;">BigInt</td> <td>L&agrave; một gi&aacute; trị số nguy&ecirc;n lớn.</td> <td>8001248342n</td> </tr> <tr> <td style="text-align: center;">Boolean</td> <td>C&oacute; hai gi&aacute; trị l&agrave; true hoặc false.</td> <td>True</td> </tr> <tr> <td style="text-align: center;">undefined</td> <td>L&agrave; kiểu dữ liệu của biến chưa được khởi tạo gi&aacute; trị.</td> <td>var a;</td> </tr> <tr> <td style="text-align: center;">null</td> <td>L&agrave; kiểu gi&aacute; trị rỗng hay null.</td> <td>var a = null;</td> </tr> <tr> <td style="text-align: center;">Symbol</td> <td>L&agrave; kiểu dữ liệu m&agrave; c&aacute;c thể hiện của n&oacute; l&agrave; kh&ocirc;ng thay đổi v&agrave; l&agrave; duy nhất.</td> <td>var a = Symbol('JS');</td> </tr> <tr> <td style="text-align: center;">Đối tượng (Object)</td> <td>Chứa c&aacute;c cặp gi&aacute; trị v&agrave; kh&oacute;a của c&aacute;c tập hợp.</td> <td>let a = { };</td> </tr> </tbody> </table> <p>Ở đ&acirc;y, tất cả c&aacute;c kiểu dữ liệu ngoại trừ Object l&agrave; kiểu dữ liệu căn bản.</p> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Kiểu dữ liệu đối tượng (Object) c&oacute; thể lưu trữ c&aacute;c tập hợp dữ liệu, trong khi kiểu dữ liệu căn bản chỉ c&oacute; thể lưu trữ một dữ liệu duy nhất.</span></strong></p> <h2>1. Kiểu chuỗi k&yacute; tự (String)</h2> <p>Kiểu chuỗi k&yacute; tự được sử dụng để lưu trữ dữ liệu ở dạng văn bản. Trong Javascript, c&aacute;c chuỗi được bao quanh bởi dấu nh&aacute;y gồm:</p> <ul> <li>Dấu ngoặc đơn: 'Xin ch&agrave;o'</li> <li>Dấu ngoặc k&eacute;p: "Xin ch&agrave;o"</li> <li>Dấu huyền: `Xin ch&agrave;o`</li> </ul> <p>V&iacute; dụ: C&aacute;c biến lưu trữ dữ liệu kiểu chuỗi k&yacute; tự.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a = 'JS'; // Kiểu dữ liệu chuỗi k&yacute; tự var b = "Java"; // Kiểu dữ liệu chuỗi k&yacute; tự var c = `Ng&ocirc;n ngữ lập tr&igrave;nh ${a} v&agrave; ${b}`; //&nbsp;Kiểu&nbsp;dữ&nbsp;liệu&nbsp;chuỗi&nbsp;k&yacute;&nbsp;tự</pre> <p>Dấu nh&aacute;y đơn v&agrave; dấu nh&aacute;y k&eacute;p tr&ecirc;n thực tế l&agrave; giống nhau v&agrave; ta c&oacute; thể sử dụng một trong hai.</p> <p>Dấu huyền thường được sử dụng khi cần bao gồm c&aacute;c biến hoặc biểu thức kh&aacute;c v&agrave;o trong một chuỗi k&yacute; tự. Điều n&agrave;y được thực hiện bằng c&aacute;ch bao bọc c&aacute;c biến hoặc biểu thức với k&yacute; hiệu dấu ${biến hoặc biểu thức} như trong v&iacute; dụ tr&ecirc;n.</p> <h2>2. Kiểu dữ liệu số (Number)</h2> <p>Kiểu dữ liệu số đại diện cho c&aacute;c dữ liệu ở dạng số nguy&ecirc;n, số thực, số thập ph&acirc;n v&agrave; số mũ.</p> <p>V&iacute; dụ: C&aacute;c kiểu dữ liệu số.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const a = 100; const b = 100.6; const c = 2e6;</pre> <p>Một kiểu dữ liệu số cũng c&oacute; thể nhận gi&aacute; trị l&agrave; + Infinity, -Infinity hoặc NaN (kh&ocirc;ng phải l&agrave; số).</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const a = 1990/0; console.log(a); const b = -100/0; console.log(b); const c = "JS"/100; console.log(c);</pre> <p>Kết quả:</p> <pre>Infinity -Infinity NaN</pre> <h2>3. Kiểu dữ liệu BigInt</h2> <p>Trong JavaScript, kiểu dữ liệu số chỉ c&oacute; thể đại diện cho c&aacute;c số nhỏ hơn (2^53 - 1) v&agrave; lớn hơn - (2^53 - 1). Tuy nhi&ecirc;n, nếu ta cần sử dụng một kiểu dữ liệu ở dạng số lớn hơn như vậy, ta c&oacute; thể sử dụng kiểu dữ liệu BigInt.</p> <p>Kiểu dữ liệu số BigInt được sử dụng bằng c&aacute;ch th&ecirc;m <code class="EnlighterJSRAW" data-enlighter-language="generic">n</code>v&agrave;o cuối một số nguy&ecirc;n.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a = 900719925124740998n; var b = a + 1n; console.log(b);</pre> <p>Kết quả:</p> <pre>900719925124740999n</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Kiểu dữ liệu BigInt đ&atilde; được giới thiệu trong phi&ecirc;n bản JavaScript mới hơn v&agrave; kh&ocirc;ng được hỗ trợ bởi nhiều tr&igrave;nh duyệt bao gồm Safari.</span></strong></p> <h2>4. Kiểu dữ liệu Boolean</h2> <p>Kiểu dữ liệu n&agrave;y đại diện cho c&aacute;c thực thể Logic. Boolean đại diện cho một trong hai gi&aacute; trị bao gồm true (đ&uacute;ng) hoặc false (sai).</p> <p>V&iacute; dụ: Kiểu dữ liệu Boolean.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const a = true; const b = false;</pre> <h2>5. Kiểu dữ liệu undefined</h2> <p>Kiểu dữ liệu kh&ocirc;ng x&aacute;c định đại diện cho gi&aacute; trị kh&ocirc;ng được g&aacute;n cho một biến n&agrave;o đ&oacute;. Nếu một biến được khai b&aacute;o nhưng gi&aacute; trị kh&ocirc;ng được g&aacute;n, th&igrave; gi&aacute; trị của biến đ&oacute; sẽ l&agrave; <code class="EnlighterJSRAW" data-enlighter-language="generic">undefined</code>hay kh&ocirc;ng được x&aacute;c định.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let a; console.log(a);</pre> <p>Kết quả:</p> <pre>undefined</pre> <p>Cũng c&oacute; thể chỉ định r&otilde; r&agrave;ng một gi&aacute; trị biến l&agrave; <code class="EnlighterJSRAW" data-enlighter-language="generic">undefined</code>.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let a = undefined; console.log(a);</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Kh&ocirc;ng n&ecirc;n g&aacute;n undefined cho một biến. Th&ocirc;ng thường, null được sử dụng để g&aacute;n gi&aacute; trị chưa được biết cho một biến.</span></strong></p> <h2>6. Kiểu dữ liệu null</h2> <p>Trong JavaScript, <code class="EnlighterJSRAW" data-enlighter-language="generic">null</code>l&agrave; một gi&aacute; trị đặc biệt đại diện cho gi&aacute; trị rỗng hoặc kh&ocirc;ng x&aacute;c định.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const a = null;</pre> <p>Đoạn m&atilde; tr&ecirc;n c&oacute; nghĩa rằng biến a c&oacute; gi&aacute; trị l&agrave; rỗng hay null.</p> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: null kh&ocirc;ng giống với NULL hoặc Null.</span></strong></p> <h2>7. Kiểu dữ liệu Symbol</h2> <p>Kiểu dữ liệu n&agrave;y đ&atilde; được giới thiệu trong phi&ecirc;n bản JavaScript mới hơn (từ ES2015). Một gi&aacute; trị c&oacute; kiểu dữ liệu Symbol c&oacute; thể được coi l&agrave; một gi&aacute; trị kiểu Symbol. Symbol l&agrave; một gi&aacute; trị căn bản, c&oacute; t&iacute;nh bất biến v&agrave; c&oacute; t&iacute;nh duy nhất.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const a = Symbol('ab');</pre> <h2>8. Kiểu dữ liệu đối tượng (Object)</h2> <p>Object l&agrave; một kiểu dữ liệu phức hợp, cho ph&eacute;p ch&uacute;ng ta lưu trữ c&aacute;c tập hợp dữ liệu.</p> <p>V&iacute; dụ: Kiểu dữ liệu đối tượng.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const student = { ten: 'Nam', ID: 100 };</pre> <p>JavaScript l&agrave; một ng&ocirc;n ngữ động, tức l&agrave; JavaScript sẽ tự động x&aacute;c định kiểu dữ liệu của biến. Điều đ&oacute; cũng c&oacute; nghĩa l&agrave; một biến c&oacute; thể thuộc một kiểu dữ liệu bất kỳ v&agrave; sau n&agrave;y n&oacute; c&oacute; thể được thay đổi th&agrave;nh kiểu dữ liệu kh&aacute;c.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let a; a = 100; a = "JS";</pre> <h2>To&aacute;n tử typeof</h2> <p>Để x&aacute;c định kiểu dữ liệu của một biến, ta c&oacute; thể sử dụng to&aacute;n tử <code class="EnlighterJSRAW" data-enlighter-language="generic">typeof</code>.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let a; a = 100; console.log(typeof(a)); a = "JS"; console.log(typeof(a)); a = null; console.log(typeof(a));</pre> <p>Kết quả:</p> <pre>number string object</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: To&aacute;n tử typeof đ&atilde; trả về kiểu dữ liệu object cho kiểu null.</span></strong></p> <p>Tr&ecirc;n đ&acirc;y l&agrave; kh&aacute;i niệm v&agrave; v&iacute; dụ cơ bản về c&aacute;c kiểu dữ liệu trong JavaScript. Hy vọng mọi người c&oacute; thể &aacute;p dụng v&agrave;o trong chương tr&igrave;nh của m&igrave;nh. Mọi người h&atilde;y tiếp tục theo d&otilde;i c&aacute;c b&agrave;i tiếp theo v&agrave; cập nhật c&aacute;c b&agrave;i tiếp theo về lập tr&igrave;nh JavaScript tr&ecirc;n <a href="http://tek4.vn">tek4</a> nh&eacute;!</p> <p>P/s: Cảm ơn mọi người đ&atilde; tin tưởng tek4!</p>