JavaScript kh&ocirc;ng ngừng ph&aacute;t triển v&agrave; n&acirc;ng cấp mỗi ng&agrave;y, ng&agrave;y c&agrave;ng c&oacute; nhiều t&iacute;nh năng mới gi&uacute;p code ngắn gọn hơn. B&agrave;i viết n&agrave;y sẽ giới thiệu 6 t&iacute;nh năng mới của JavaScript. H&atilde;y c&ugrave;ng kh&aacute;m ph&aacute; n&agrave;o!
<h1 style="text-align: justify;">1. Sử dụng &ldquo;Object.hasOwn&rdquo; thay v&igrave; to&aacute;n tử &ldquo;in&rdquo;</h1>
Đ&ocirc;i khi, ta cần biết đối tượng c&oacute; một thuộc t&iacute;nh n&agrave;o đ&oacute; hay kh&ocirc;ng bằng c&aacute;ch sử dụng to&aacute;n tử &ldquo;in&rdquo; hoặc &ldquo;obj.hasOwnProperty&rdquo;. Nhưng cả hai c&aacute;ch n&agrave;y đều c&oacute; nhược điểm như sau:
<h3 style="text-align: justify;">To&aacute;n tử &ldquo;in&rdquo;</h3>
To&aacute;n tử &ldquo;in&rdquo; sẽ trả về <code>true</code> nếu c&oacute; một thuộc t&iacute;nh được chỉ định trong <code>specified object</code> hoặc <code>prototype chain</code> của n&oacute;.
<pre class="language-python"><code>const Person = function (age) {
 this.age = age
}
Person.prototype.name = 'fatfish'
const p1 = new Person(24)
console.log('age' in p1) // true
console.log('name' in p1) // true pay attention here</code></pre>
<h3 style="text-align: justify;">obj.hasOwnProperty</h3>
Phương thức <code>hasOwnPropert</code>y trả về một gi&aacute; trị boolean cho biết thuộc t&iacute;nh được chỉ định l&agrave; <code>own property</code> của đối tượng hay kh&ocirc;ng (tr&aacute;i ngược với việc kế thừa n&oacute;).
V&iacute; dụ:
<pre class="language-python"><code>const Person = function (age) {
 this.age = age
}
Person.prototype.name = 'fatfish'
const p1 = new Person(24)
console.log(p1.hasOwnProperty('age')) // true
console.log(p1.hasOwnProperty('name')) // fasle pay attention here</code></pre>
C&oacute; thể "<code>obj.hasOwnProperty</code>" đ&atilde; lọc ra c&aacute;c thuộc t&iacute;nh tr&ecirc;n chuỗi nguy&ecirc;n mẫu, nhưng trong một số trường hợp, c&aacute;ch l&agrave;m n&agrave;y kh&ocirc;ng an to&agrave;n v&agrave; sẽ khiến chương tr&igrave;nh bị lỗi.
<pre class="language-python"><code>Object.create(null).hasOwnProperty('name')
// Uncaught TypeError: Object.create(...).hasOwnProperty is not a function</code></pre>
<h3 style="text-align: justify;">Object.hasOwn</h3>
Đừng lo lắng, ch&uacute;ng ta c&oacute; thể sử dụng &ldquo;Object.hasOwn&rdquo; để tr&aacute;nh t&igrave;nh trạng n&agrave;y. C&aacute;ch n&agrave;y thuận tiện hơn v&agrave; an to&agrave;n hơn so với việc sử dụng &ldquo;obj.hasOwnProperty&rdquo;.
<pre class="language-python"><code>let object = { age: 24 }
Object.hasOwn(object, 'age') // true
let object2 = Object.create({ age: 24 })
Object.hasOwn(object2, 'age') // false The 'age' attribute exists on the prototype
let object3 = Object.create(null)
Object.hasOwn(object3, 'age') // false an object that does not inherit from "Object.prototype"</code></pre>
<h1 style="text-align: justify;">2. Sử dụng &ldquo;#&rdquo; để khai b&aacute;o thuộc t&iacute;nh private</h1>
Trước đ&acirc;y, k&yacute; tự&nbsp; "<code>_</code>" thường được d&ugrave;ng để biểu diễn thuộc t&iacute;nh private, nhưng c&aacute;ch l&agrave;m n&agrave;y kh&ocirc;ng an to&agrave;n v&agrave; k&yacute; tự vẫn c&oacute; thể bị sửa đổi b&ecirc;n ngo&agrave;i chương tr&igrave;nh.
<pre class="language-python"><code>class Person {
 constructor (name) {
 this._money = 1
 this.name = name
 }
 get money () {
 return this._money
 }
 set money (money) {
 this._money = money
 }
 showMoney () {
 console.log(this._money)
 }
}
const p1 = new Person('fatfish')
console.log(p1.money) // 1
console.log(p1._money) // 1
p1._money = 2 // Modify private property _money from outside
console.log(p1.money) // 2
console.log(p1._money) // 2</code></pre>
<h3 style="text-align: justify;">Thay v&agrave;o đ&oacute;, h&atilde;y d&ugrave;ng &ldquo;#&rdquo; để khai b&aacute;o c&aacute;c thuộc t&iacute;nh private một c&aacute;ch an to&agrave;n:</h3>
<pre class="language-python"><code>class Person {
 #money=1
 constructor (name) {
 this.name = name
 }
 get money () {
 return this.#money
 }
 set money (money) {
 this.#money = money
 }
 showMoney () {
 console.log(this.#money)
 }
}
const p1 = new Person('fatfish')
console.log(p1.money) // 1
// p1.#money = 2 // We cannot modify #money in this way
p1.money = 2
console.log(p1.money) // 2
console.log(p1.#money) // Uncaught SyntaxError: Private field '#money' must be declared in an enclosing class</code></pre>
<h1 style="text-align: justify;">3. Dấu ph&acirc;n c&aacute;ch số</h1>
Ch&uacute;ng ta c&oacute; thể sử dụng k&yacute; hiệu &ldquo;<code>_</code>&rdquo; để l&agrave;m cho c&aacute;c số dễ đọc hơn.
<pre class="language-python"><code>const sixBillion = 6000000000
// It is very difficult to read
const sixBillion2 = 6000_000_000
// It's cool and easy to read
console.log(sixBillion2) // 6000000000</code></pre>
&ldquo;<code>_</code>&rdquo; cũng c&oacute; thể được d&ugrave;ng trong t&iacute;nh to&aacute;n:
<pre class="language-python"><code>const sum = 1000 + 6000_000_000 // 6000001000</code></pre>
<h1 style="text-align: justify;">4. Sử dụng &ldquo;?.&rdquo; để đơn giản h&oacute;a &ldquo;&amp;&amp;&rdquo; v&agrave; to&aacute;n tử bậc 3</h1>
Chắc hẳn bạn đ&atilde; quen thuộc với c&aacute;c v&iacute; dụ dưới đ&acirc;y, l&agrave;m thế n&agrave;o để r&uacute;t gọn code?
<pre class="language-python"><code>const obj = null
console.log(obj &amp;&amp; obj.name)
const $title = document.querySelector('.title')
const title = $title ? title.innerText : undefined</code></pre>
C&acirc;u trả lời l&agrave; h&atilde;y sử dụng &ldquo;?.&rdquo;
<pre class="language-python"><code>const obj = null
console.log(obj?.name)
const $title = document.querySelector('.title')
const title = $title?.innerText</code></pre>
Mẹo&nbsp;
C&aacute;ch viết phổ biến của &ldquo;&rdquo;?.&rdquo;
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">thuộc t&iacute;nh đối tượng <code>obj?.prop</code></li>
<li style="font-weight: 400;" aria-level="1">thuộc t&iacute;nh đối tượng <code>obj?. [expr]</code></li>
<li style="font-weight: 400;" aria-level="1">lệnh gọi <code>func?. (... args)</code> của h&agrave;m hoặc phương thức đối tượng</li>
</ol>
<h1 style="text-align: justify;">5. Sử dụng &ldquo;??&rdquo; thay v&igrave; &ldquo;||&rdquo;</h1>
Sử dụng "??" thay v&igrave; &ldquo;||&rdquo; để đ&aacute;nh gi&aacute; xem gi&aacute; trị ở b&ecirc;n tr&aacute;i to&aacute;n tử c&oacute; l&agrave; <code>null</code> hay <code>undefined</code> hay kh&ocirc;ng, sau đ&oacute; trả về gi&aacute; trị ở b&ecirc;n phải.
<pre class="language-python"><code>const obj = {
 name: 'fatfish',
 nullValue: null,
 zero: 0,
 emptyString: '',
 falseValue: false,
}
console.log(obj.age ?? 'some other default') // some other default
console.log(obj.age || 'some other default') // some other default

console.log(obj.nullValue ?? 'some other default') // some other default
console.log(obj.nullValue || 'some other default') // some other default
console.log(obj.zero ?? 0) // 0
console.log(obj.zero || 'some other default') // some other default

console.log(obj.emptyString ?? 'emptyString') // ''
console.log(obj.emptyString || 'some other default') // some other default

console.log(obj.falseValue ?? 'falseValue') // false
console.log(obj.falseValue || 'some other default') // some other default</code></pre>
<h1 style="text-align: justify;">6. Sử dụng &ldquo;BigInt&rdquo; để giải c&aacute;c b&agrave;i t&iacute;nh to&aacute;n với số nguy&ecirc;n lớn</h1>
Việc t&iacute;nh to&aacute;n trong JS nếu vượt qu&aacute; "<code>Number.MAX_SAFE_INTEGER</code>" sẽ kh&ocirc;ng đảm bảo kết quả ch&iacute;nh x&aacute;c 100%.
V&iacute; dụ:
<pre class="language-python"><code>Math.pow(2, 53) === Math.pow(2, 53) + 1 // true
// Math.pow(2, 53) =&gt; 9007199254740992
// Math.pow(2, 53) + 1 =&gt; 9007199254740992</code></pre>
Khi t&iacute;nh to&aacute;n c&aacute;c gi&aacute; trị số nguy&ecirc;n lớn, ta c&oacute; thể sử dụng &ldquo;BigInt&rdquo; để tr&aacute;nh trường hợp kết quả bị lỗi
<pre class="language-python"><code>BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1) // false</code></pre>

Admin

6 Tính năng tuyệt vời của JavaScript hiện đại ít được biết đến

Cùng tác giả

Admin

Có liên quan