tek4

Toán tử trong JavaScript

by - September. 26, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8286 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-86.png" alt="To&aacute;n tử trong JavaScript" width="561" height="343" /></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 to&aacute;n tử trong JavaScript v&agrave; c&aacute;ch sử dụng ch&uacute;ng với sự trợ gi&uacute;p của c&aacute;c v&iacute; dụ dẫn chứng.</p> <h1>To&aacute;n tử trong JavaScript</h1> <p>Trong JavaScript, to&aacute;n tử l&agrave; một k&yacute; hiệu được sử dụng để thực hiện c&aacute;c ph&eacute;p to&aacute;n tr&ecirc;n c&aacute;c to&aacute;n hạng.</p> <p>V&iacute; dụ: T&iacute;nh tổng của 3 v&agrave; 4.</p> <pre class="EnlighterJSRAW" data-enlighter-language="generic">3 + 4;</pre> <p>Ở đ&acirc;y, to&aacute;n tử + l&agrave; một to&aacute;n tử thực hiện ph&eacute;p cộng, 3 v&agrave; 4 l&agrave; c&aacute;c to&aacute;n hạng.</p> <h2>C&aacute;c kiểu to&aacute;n tử trong JavaScript</h2> <p>Sau đ&acirc;y l&agrave; danh s&aacute;ch c&aacute;c to&aacute;n tử kh&aacute;c nhau m&agrave; ta sẽ t&igrave;m hiểu trong b&agrave;i viết n&agrave;y.</p> <ul> <li>To&aacute;n tử g&aacute;n</li> <li>To&aacute;n tử số học</li> <li>To&aacute;n tử so s&aacute;nh</li> <li>To&aacute;n tử Logic</li> <li>To&aacute;n tử Bitwise</li> <li>To&aacute;n tử với chuỗi k&yacute; tự</li> <li>C&aacute;c to&aacute;n tử kh&aacute;c</li> </ul> <h2>To&aacute;n tử g&aacute;n</h2> <p>To&aacute;n tử g&aacute;n được sử dụng để g&aacute;n gi&aacute; trị cho c&aacute;c biến.</p> <p>V&iacute; dụ: Khai b&aacute;o biến v&agrave; g&aacute;n gi&aacute; trị.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const a = 100;</pre> <p>Ở đ&acirc;y, to&aacute;n tử = được sử dụng để g&aacute;n gi&aacute; trị 100 cho hằng số a.</p> <p>Dưới đ&acirc;y l&agrave; danh s&aacute;ch c&aacute;c to&aacute;n tử g&aacute;n thường được sử dụng:</p> <table> <tbody> <tr> <td style="text-align: center;">To&aacute;n tử</td> <td style="text-align: center;">T&ecirc;n</td> <td style="text-align: center;">V&iacute; dụ</td> </tr> <tr> <td style="text-align: center;">=</td> <td>To&aacute;n tử g&aacute;n.</td> <td style="text-align: center;">a = 100;</td> </tr> <tr> <td style="text-align: center;">+=</td> <td>To&aacute;n tử g&aacute;n ph&eacute;p cộng.</td> <td style="text-align: center;">b += 100; // b = b + 100</td> </tr> <tr> <td style="text-align: center;">-=</td> <td>To&aacute;n tử g&aacute;n ph&eacute;p trừ.</td> <td style="text-align: center;">c -= 100; // c = c - 100</td> </tr> <tr> <td style="text-align: center;">*=</td> <td>To&aacute;n tử g&aacute;n ph&eacute;p nh&acirc;n.</td> <td style="text-align: center;">d *= 200; // d = d * 200</td> </tr> <tr> <td style="text-align: center;">/=</td> <td>To&aacute;n tử g&aacute;n ph&eacute;p chia.</td> <td style="text-align: center;">e /= 100; // e = e / 100</td> </tr> <tr> <td style="text-align: center;">%=</td> <td>To&aacute;n tử ph&eacute;p chia lấy dư.</td> <td style="text-align: center;">f %= 30; // f = f % 30</td> </tr> <tr> <td style="text-align: center;">**=</td> <td>To&aacute;n tử ph&eacute;p số mũ.</td> <td style="text-align: center;">g **= 3; // g = g**3</td> </tr> </tbody> </table> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: To&aacute;n tử g&aacute;n thường được sử dụng l&agrave; k&yacute; hiệu dấu (=). Ta sẽ t&igrave;m hiểu về c&aacute;c to&aacute;n tử g&aacute;n kh&aacute;c như + =, - =, * =,... sau khi ch&uacute;ng ta t&igrave;m hiểu về to&aacute;n tử số học.</span></strong></p> <h2>To&aacute;n tử số học</h2> <p>To&aacute;n tử số học được sử dụng để thực hiện c&aacute;c ph&eacute;p t&iacute;nh số học.</p> <p>V&iacute; dụ: T&iacute;nh tổng của hai số.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const a = 100 + 20;</pre> <p>Ở đ&acirc;y, to&aacute;n tử + được sử dụng để cộng hai to&aacute;n hạng.</p> <table> <tbody> <tr> <td style="text-align: center;">To&aacute;n tử</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;">+</td> <td>Ph&eacute;p cộng.</td> <td style="text-align: center;">a + b</td> </tr> <tr> <td style="text-align: center;">-</td> <td>Ph&eacute;p trừ.</td> <td style="text-align: center;">a &ndash; b</td> </tr> <tr> <td style="text-align: center;">*</td> <td>Ph&eacute;p nh&acirc;n.</td> <td style="text-align: center;">a * b</td> </tr> <tr> <td style="text-align: center;">/</td> <td>Ph&eacute;p chia.</td> <td style="text-align: center;">a / b</td> </tr> <tr> <td style="text-align: center;">%</td> <td>Ph&eacute;p chia lấy dư.</td> <td style="text-align: center;">a % b</td> </tr> <tr> <td style="text-align: center;">++</td> <td>Tăng l&ecirc;n 1 đơn vị.</td> <td style="text-align: center;">++a hoặc a++</td> </tr> <tr> <td style="text-align: center;">--</td> <td>Trừ đi 1 đơn vị.</td> <td style="text-align: center;">-- b hoặc b--</td> </tr> <tr> <td style="text-align: center;">**</td> <td>Số mũ.</td> <td style="text-align: center;">a ** b</td> </tr> </tbody> </table> <p>V&iacute; dụ: Sử dụng c&aacute;c to&aacute;n tử số học trong JavaScript.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let a = 2; let b = 4; console.log('a + b = ', a + b); console.log('a - b = ', a - b); console.log('a * b = ', a * b); console.log('a / b = ', a / b); console.log('a % b = ', a % b); console.log('++a = ', ++a); console.log('a++ = ', a++); console.log('a = ', a); console.log('--a = ', --a); console.log('a-- = ', a--); console.log('a = ', a); console.log('a ** b =', a ** b);</pre> <p>Kết quả:</p> <pre>a + b = 6 a - b = -2 a * b = 8 a / b = 0.5 a % b = 2 ++a = 3 a++ = 3 a = 4 --a = 3 a-- = 3 a = 2 a ** b = 16</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: To&aacute;n tử ** đ&atilde; được giới thiệu trong EcmaScript 2016 v&agrave; một số tr&igrave;nh duyệt c&oacute; thể kh&ocirc;ng hỗ trợ to&aacute;n tử n&agrave;y.</span></strong></p> <h2>To&aacute;n tử so s&aacute;nh</h2> <p>C&aacute;c to&aacute;n tử so s&aacute;nh sẽ thực hiện so s&aacute;nh hai gi&aacute; trị v&agrave; trả về một gi&aacute; trị kiểu dữ liệu Boolean, true (đ&uacute;ng) hoặc false (sai).</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const a = 100, b = 200; console.log(a == b);</pre> <p>Kết quả:</p> <pre>false</pre> <p>Ở đ&acirc;y, to&aacute;n tử so s&aacute;nh == được sử dụng để so s&aacute;nh xem a c&oacute; bằng b hay kh&ocirc;ng.</p> <table> <tbody> <tr> <td style="text-align: center;">To&aacute;n tử</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;">==</td> <td>Hai biểu thức c&oacute; bằng nhau hay kh&ocirc;ng.</td> <td style="text-align: center;">a == b</td> </tr> <tr> <td style="text-align: center;">!=</td> <td>Hai biểu thức c&oacute; kh&aacute;c nhau hay kh&ocirc;ng.</td> <td style="text-align: center;">a != b</td> </tr> <tr> <td style="text-align: center;">===</td> <td>Hai biểu thức c&oacute; giống nhau về gi&aacute; trị hoặc kiểu dữ liệu hay kh&ocirc;ng.</td> <td style="text-align: center;">a === b</td> </tr> <tr> <td style="text-align: center;">!==</td> <td>Hai biểu thức c&oacute; kh&aacute;c nhau về kiểu dữ liệu hoặc kh&aacute;c nhau về cả gi&aacute; trị v&agrave; kiểu dữ liệu hay kh&ocirc;ng.</td> <td style="text-align: center;">a !== b</td> </tr> <tr> <td style="text-align: center;">&gt;</td> <td>Biểu thức b&ecirc;n tr&aacute;i c&oacute; lớn hơn biểu thức b&ecirc;n phải hay kh&ocirc;ng.</td> <td style="text-align: center;">a &gt; b</td> </tr> <tr> <td style="text-align: center;">&gt;=</td> <td>Biểu thức b&ecirc;n tr&aacute;i lớn hơn biểu thức b&ecirc;n phải hoặc bằng hay kh&ocirc;ng.</td> <td style="text-align: center;">a &gt;= b</td> </tr> <tr> <td style="text-align: center;">&lt;</td> <td>Biểu thức b&ecirc;n tr&aacute;i c&oacute; nhỏ hơn biểu thức b&ecirc;n phải hay kh&ocirc;ng.</td> <td style="text-align: center;">a &lt; b</td> </tr> <tr> <td style="text-align: center;">&lt;=</td> <td>Biểu thức b&ecirc;n tr&aacute;i c&oacute; nhỏ hơn hoặc bằng biểu thức b&ecirc;n phải hay kh&ocirc;ng.</td> <td style="text-align: center;">a &lt;= b</td> </tr> </tbody> </table> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">console.log(100 == 100); console.log(6 == '6'); console.log(1 != 2); console.log('Javascript' != 'javascript'); console.log(100 === 100); console.log(100 === '100'); console.log(3 &gt;= 2); console.log(2 &lt;= 2);</pre> <p>Kết quả:</p> <pre>true true true true true false true true</pre> <p>To&aacute;n tử so s&aacute;nh được sử dụng trong việc đưa ra quyết định v&agrave; trong c&aacute;c v&ograve;ng lặp. Ta sẽ t&igrave;m hiểu chi tiết về việc sử dụng c&aacute;c to&aacute;n tử so s&aacute;nh trong c&aacute;c b&agrave;i sau.</p> <h2>To&aacute;n tử Logic</h2> <p>C&aacute;c to&aacute;n tử Logic thực hiện c&aacute;c ph&eacute;p to&aacute;n Logic v&agrave; trả về một gi&aacute; trị kiểu dữ liệu Boolean, true (đ&uacute;ng) hoặc false (sai).</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">(2 &lt; 20) &amp;&amp; (1 &lt; 5);</pre> <p>Kết quả:</p> <pre>True</pre> <p>Ở đ&acirc;y, &amp;&amp; l&agrave; to&aacute;n tử Logic AND. V&igrave; cả 2 &lt; 20 v&agrave; 1 &lt; 5 đều đ&uacute;ng n&ecirc;n kết quả l&agrave; true (đ&uacute;ng).</p> <table> <tbody> <tr> <td style="text-align: center;">To&aacute;n tử</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;">&amp;&amp;</td> <td>Trả về true nếu cả 2 biểu thức đều đ&uacute;ng.</td> <td style="text-align: center;">a &amp;&amp; b</td> </tr> <tr> <td style="text-align: center;">||</td> <td>Trả về true nếu 1 trong 2 biểu thức l&agrave; đ&uacute;ng.</td> <td style="text-align: center;">a || b</td> </tr> <tr> <td style="text-align: center;">!</td> <td>Trả về true nếu biểu thức l&agrave; sai.</td> <td style="text-align: center;">!a</td> </tr> </tbody> </table> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">console.log((1 &lt; 2) &amp;&amp; (3 &lt; 4)); console.log((1 &gt; 2) &amp;&amp; (3 &lt; 4)); console.log((1 &gt; 2) || (3 &lt; 4)); console.log(!(1 &gt; 2));</pre> <p>Kết quả:</p> <pre>true false true true</pre> <p>C&aacute;c to&aacute;n tử Logic được sử dụng trong việc ra quyết định v&agrave; trong c&aacute;c v&ograve;ng lặp. Ta sẽ t&igrave;m hiểu chi tiết về việc sử dụng c&aacute;c to&aacute;n tử Logic trong c&aacute;c b&agrave;i viết sau.</p> <h2>To&aacute;n tử Bitwise</h2> <p>To&aacute;n tử Bitwise thực hiện c&aacute;c ph&eacute;p to&aacute;n tr&ecirc;n dạng nhị ph&acirc;n.</p> <table> <tbody> <tr> <td style="text-align: center;">To&aacute;n tử</td> <td style="text-align: center;">M&ocirc; tả</td> </tr> <tr> <td style="text-align: center;">&amp;</td> <td>Ph&eacute;p AND.</td> </tr> <tr> <td style="text-align: center;">|</td> <td>Ph&eacute;p OR.</td> </tr> <tr> <td style="text-align: center;">^</td> <td>Ph&eacute;p XOR.</td> </tr> <tr> <td style="text-align: center;">~</td> <td>Ph&eacute;p NOT.</td> </tr> <tr> <td style="text-align: center;">&lt;&lt;</td> <td>Dịch bit sang tr&aacute;i.</td> </tr> <tr> <td style="text-align: center;">&gt;&gt;</td> <td>Dịch bit sang phải.</td> </tr> </tbody> </table> <h2>To&aacute;n tử cho chuỗi k&yacute; tự</h2> <p>Trong JavaScript, ta cũng c&oacute; thể sử dụng to&aacute;n tử + để nối (thực hiện ph&eacute;p nối) hai hoặc nhiều chuỗi k&yacute; tự.</p> <p>V&iacute; dụ: Nối hai chuỗi k&yacute; tự.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">console.log('Lap trinh JavaScript' + ' can ban');</pre> <p>Kết quả:</p> <pre>Lap trinh JavaScript can ban</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Khi to&aacute;n tử + được sử dụng với c&aacute;c chuỗi, n&oacute; sẽ thực hiện ph&eacute;p nối c&aacute;c chuỗi. Tuy nhi&ecirc;n, khi to&aacute;n tử + được sử dụng với c&aacute;c số, n&oacute; sẽ thực hiện ph&eacute;p cộng.</span></strong></p> <h2>C&aacute;c to&aacute;n tử kh&aacute;c trong JavaScript</h2> <p>Sau đ&acirc;y l&agrave; danh s&aacute;ch c&aacute;c to&aacute;n tử kh&aacute;c c&oacute; trong JavaScript. Ta sẽ t&igrave;m hiểu về c&aacute;c to&aacute;n tử n&agrave;y trong c&aacute;c b&agrave;i sau.</p> <table> <tbody> <tr> <td style="text-align: center;">To&aacute;n tử</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;">,</td> <td>Đ&aacute;nh gi&aacute; nhiều to&aacute;n hạng v&agrave; trả về to&aacute;n hạng cuối c&ugrave;ng.</td> <td style="text-align: center;">let a = (2, 5, 6); // 6</td> </tr> <tr> <td style="text-align: center;">?:</td> <td>Trả về gi&aacute; trị dựa tr&ecirc;n điều kiện.</td> <td style="text-align: center;">(1 &gt; 2) ? 'đ&uacute;ng' : 'sai'; // "sai"</td> </tr> <tr> <td style="text-align: center;">delete</td> <td>X&oacute;a một thuộc t&iacute;nh của đối tượng hoặc một phần tử của mảng.</td> <td style="text-align: center;">delete a</td> </tr> <tr> <td style="text-align: center;">typeof</td> <td>Trả về kiểu dữ liệu của biến.</td> <td style="text-align: center;">typeof (100); // "number"</td> </tr> <tr> <td style="text-align: center;">void</td> <td>Loại bỏ gi&aacute; trị trả về của biểu thức.</td> <td style="text-align: center;">void(a)</td> </tr> <tr> <td style="text-align: center;">in</td> <td>Trả về true nếu thuộc t&iacute;nh c&oacute; trong đối tượng.</td> <td style="text-align: center;">a in b</td> </tr> <tr> <td style="text-align: center;">instanceof</td> <td>Trả về true nếu đối tượng được x&aacute;c định thuộc kiểu dữ liệu của đối tượng.</td> <td style="text-align: center;">a instanceof b_type</td> </tr> </tbody> </table> <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 to&aacute;n tử 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 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 <a href="http://tek4.vn">tek4</a>!</p>