Để g&acirc;y ấn tượng với một lập tr&igrave;nh vi&ecirc;n chuy&ecirc;n nghiệp, th&igrave; bạn n&ecirc;n l&agrave;m g&igrave;? Đơn giản th&ocirc;i: H&atilde;y giải quyết một vấn đề phức tạp bằng logic đơn giản v&agrave; c&agrave;ng &iacute;t d&ograve;ng m&atilde; c&agrave;ng tốt. Nhờ sự ra đời của c&aacute;c h&agrave;m mũi t&ecirc;n của ES6, bạn c&oacute; thể tạo ra những c&uacute; ph&aacute;p one-liner tr&ocirc;ng vừa thanh lịch vừa đơn giản, m&agrave; ở đ&oacute; one- liner l&agrave; những c&uacute; ph&aacute;p ngắn v&agrave; kết hợp với alias để tạo th&agrave;nh một c&acirc;u lệnh đơn giản hiệu quả.
Trong b&agrave;i viết n&agrave;y, h&atilde;y c&ugrave;ng Tek.4 t&igrave;m hiểu 11 con đường độc đạo hiếm c&oacute; nhưng lại cực kỳ mạnh mẽ. H&atilde;y sẵn s&agrave;ng v&agrave; bắt đầu th&ocirc;i!
&nbsp;
<h1 style="text-align: justify;">1. Lấy số lượng k&yacute; tự trong một chuỗi</h1>
Nhận số lượng k&yacute; tự l&agrave; một tiện &iacute;ch hữu &iacute;ch v&agrave; c&oacute; thể hữu &iacute;ch trong nhiều trường hợp. Bạn c&oacute; thể sử dụng n&oacute; để đếm khoảng trắng v&agrave; sau đ&oacute; đếm từ, hoặc n&oacute; c&oacute; thể được sử dụng để đếm một dấu ph&acirc;n t&aacute;ch nhất định trong một chuỗi.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/b02aecb8-cefc-45f3-9e31-aa2ac8083ce3" alt="js" />
<pre class="language-python"><code>const characterCount = (str, char) =&gt; str.split(char).length - 1</code></pre>
&Yacute; tưởng l&agrave; ho&agrave;n to&agrave;n đơn giản. Bạn chia chuỗi bằng c&aacute;ch sử dụng tham số <code>char</code> đ&atilde; truyền v&agrave; lấy độ d&agrave;i của mảng trả về. V&igrave; mỗi khi chuỗi được chia, sẽ c&oacute; nhiều hơn một đoạn so với bộ chia; v&igrave; vậy số 1 bị trừ đi v&agrave; ở đ&oacute; bạn c&oacute; một d&ograve;ng one-liner <code>characterCount</code>.
&nbsp;
<h1 style="text-align: justify;">2. Kiểm tra xem một đối tượng c&oacute; trống kh&ocirc;ng</h1>
Kiểm tra t&iacute;nh trống rỗng của một đối tượng thực sự kh&oacute; hơn tưởng tượng. Việc kiểm tra xem một đối tượng c&oacute; bằng <code>{}</code> hay kh&ocirc;ng sẽ trả về false mỗi lần mặc d&ugrave; đối tượng đ&oacute; trống.
May mắn thay, one-liner b&ecirc;n dưới thực hiện ch&iacute;nh x&aacute;c những g&igrave; ch&uacute;ng ta muốn.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/9ed7bf33-6497-4623-ba3b-fba4e1e8b88a" alt="js" />
<pre class="language-python"><code>const isEmpty = obj =&gt; Reflect.ownKeys(obj).length === 0 &amp;&amp; obj.constructor === Object</code></pre>
Trong one-liner n&agrave;y, bạn kiểm tra xem độ d&agrave;i của c&aacute;c kh&oacute;a của đối tượng c&oacute; bằng 0 hay kh&ocirc;ng v&agrave; tham số được truyền v&agrave;o c&oacute; phải l&agrave; một đối tượng thực tế hay kh&ocirc;ng.
&nbsp;
<h1 style="text-align: justify;">3. Chờ một thời gian nhất định trước khi thực hiện</h1>
Trong one-liner n&agrave;y, bạn sẽ gặp kh&oacute; khăn với một số lập tr&igrave;nh kh&ocirc;ng đồng bộ. &Yacute; tưởng đơn giản th&ocirc;i. Trong khi chạy m&atilde;, nếu bạn muốn đợi trong một khoảng thời gian nhất định, đ&acirc;y l&agrave; one- liner <code>wait</code>:
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/43bffeb5-3b79-4671-9b95-c42eecd2121f" alt="js" />
<pre class="language-python"><code>const wait = async (milliseconds) =&gt; new Promise((resolve) =&gt; setTimeout(resolve, milliseconds));</code></pre>
Trong một oner- liner <code>wait</code>, bạn tạo một promise v&agrave; giải quyết n&oacute; sau một khoảng thời gian nhất định bằng c&aacute;ch sử dụng h&agrave;m <code>setTimeout</code>.
&nbsp;
<h1 style="text-align: justify;">4. Nhận được sự kh&aacute;c biệt trong ng&agrave;y giữa hai ng&agrave;y</h1>
Trong khi ph&aacute;t triển ứng dụng web, ng&agrave;y thường l&agrave; phần kh&oacute; thực hiện nhất v&igrave; c&oacute; nhiều kh&aacute;i niệm c&oacute; thể dễ bị t&iacute;nh to&aacute;n sai.
Đ&acirc;y l&agrave; một one-liner mạnh gi&uacute;p t&iacute;nh to&aacute;n sự kh&aacute;c biệt trong ng&agrave;y giữa hai ng&agrave;y.. Như mẫu tr&ecirc;n, bạn c&oacute; thể tạo một one-liner của ri&ecirc;ng m&igrave;nh để t&iacute;nh to&aacute;n sự ch&ecirc;nh lệch th&aacute;ng, năm, v.v.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/b034f1cd-1290-42a7-853c-3bc438e37364" alt="js" />
<pre class="language-python"><code>const daysBetween = (date1, date2) =&gt; Math.ceil(Math.abs(date1 - date2) / (1000 * 60 * 60 * 24))</code></pre>
Logic đằng sau one- liner kh&aacute; dễ hiểu. Khi hai ng&agrave;y bị trừ đi, gi&aacute; trị trả về sẽ l&agrave; ch&ecirc;nh lệch t&iacute;nh đằng mili gi&acirc;y. Để chuyển đổi mili gi&acirc;y th&agrave;nh ng&agrave;y, bạn phải chia n&oacute; cho từng mili gi&acirc;y, gi&acirc;y, ph&uacute;t v&agrave; giờ.
<h1 style="text-align: justify;">5. Chuyển hướng đến một URL kh&aacute;c</h1>
Nếu bạn từng tạo trang web, th&igrave; chắc chắn đ&atilde; gặp phải t&igrave;nh huống logic x&aacute;c thực. V&iacute; dụ, người d&ugrave;ng kh&ocirc;ng phải quản trị vi&ecirc;n sẽ kh&ocirc;ng thể truy cập quyền <code>/admin</code>. Nếu người d&ugrave;ng thử th&igrave; bạn phải chuyển hướng đến một URL kh&aacute;c.&nbsp;
One- liner n&agrave;y th&igrave; d&ugrave;ng cho t&igrave;nh huống n&agrave;y nhưng chắc chắn rằng bạn c&ograve;n c&oacute; thể t&igrave;m thấy nhiều trường hợp sử dụng kh&aacute;c.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/81023c07-7c81-4b7f-80f2-792930e79af2" alt="js" />
<pre class="language-python"><code>const redirect = url =&gt; location.href = url</code></pre>
<code>location</code> l&agrave; một phương thức tr&ecirc;n đối tượng <code>window</code> to&agrave;n cầu v&agrave; h&agrave;nh vi thiết lập thuộc t&iacute;nh <code>href</code> tương tự như khi người d&ugrave;ng nhấp v&agrave;o li&ecirc;n kết.
&nbsp;
<h1 style="text-align: justify;">6. Kiểm tra hỗ trợ cảm ứng tr&ecirc;n thiết bị</h1>
Khi c&aacute;c thiết bị c&oacute; thể kết nối internet ng&agrave;y c&agrave;ng nhiều th&igrave; nhu cầu tạo ra c&aacute;c trang web đ&aacute;p ứng c&agrave;ng tăng. 20 năm trước, c&aacute;c&nbsp; lập tr&igrave;nh vi&ecirc;n lẽ ra n&ecirc;n nghĩ đến phi&ecirc;n bản trang web d&agrave;nh cho m&aacute;y t&iacute;nh để b&agrave;n nhưng ng&agrave;y nay hơn 50% lưu lượng truy cập web đến từ c&aacute;c thiết bị cảm ứng. V&igrave; vậy, thực hiện một số h&agrave;nh động dựa tr&ecirc;n hỗ trợ cảm ứng của thiết bị l&agrave; một kh&aacute;i niệm quan trọng như vậy.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/88926a5c-02db-42d1-a10c-dd3e827f57e6" alt="js" />
<pre class="language-python"><code>const touchSupported = () =&gt; ('ontouchstart' in window || DocumentTouch &amp;&amp; document instanceof DocumentTouch)</code></pre>
Trong one- liner n&agrave;y, bạn c&oacute; thể kiểm tra xem t&agrave;i liệu c&oacute; hỗ trợ sự kiện touchstart hay kh&ocirc;ng.
&nbsp;
<h1 style="text-align: justify;">7. Ch&egrave;n một chuỗi HTML sau một phần tử</h1>
Việc cập nhật DOM bằng JavaScript l&agrave; một điều phổ biến khi ph&aacute;t triển c&aacute;c ứng dụng web. C&oacute; một số phương ph&aacute;p cơ bản để ho&agrave;n th&agrave;nh c&ocirc;ng việc nhưng khi t&igrave;nh h&igrave;nh trở n&ecirc;n phức tạp, bạn c&oacute; thể kh&oacute; khắc phục được.
Đ&acirc;y l&agrave; one-liner để ch&egrave;n một chuỗi HTML ngay sau một phần tử HTML. Với v&agrave;i ph&uacute;t suy nghĩ v&agrave; sử dụng Google, chắc chắn rằng bạn c&oacute; thể t&igrave;m thấy phi&ecirc;n bản trước của một lớp l&oacute;t n&agrave;y.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/47718320-44ea-4f4e-8697-3a3d62e8741f" alt="js" />
<pre class="language-python"><code>const insertHTMLAfter = (html, el) =&gt; el.insertAdjacentHTML('afterend', html)</code></pre>
&nbsp;
<h1 style="text-align: justify;">8. Trộn một mảng</h1>
X&aacute;o trộn một tập hợp dữ liệu trong qu&aacute; tr&igrave;nh ph&aacute;t triển l&agrave; một t&igrave;nh huống phổ biến m&agrave; bạn c&oacute; thể gặp phải bất cứ l&uacute;c n&agrave;o v&agrave; rất tiếc, kh&ocirc;ng c&oacute; phương ph&aacute;p x&aacute;o trộn c&aacute;c mảng t&iacute;ch hợp sẵn trong JavaScript.
Tuy nhi&ecirc;n, đ&acirc;y l&agrave; one- liner shuffle m&agrave; bạn c&oacute; thể sử dụng h&agrave;ng ng&agrave;y:
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/05e47a8c-e75c-4c95-a0e4-4af77b8a6337" alt="js" />
<pre class="language-python"><code>const shuffle = arr =&gt; arr.sort(() =&gt; 0.5 - Math.random())</code></pre>
N&oacute; sử dụng phương ph&aacute;p sort của mảng v&agrave; sắp xếp ngẫu nhi&ecirc;n trước hoặc sau phần tử trước đ&oacute; của mảng.
&nbsp;
<h1 style="text-align: justify;">9. Nhận văn bản đ&atilde; chọn tr&ecirc;n trang web</h1>
C&aacute;c tr&igrave;nh duyệt c&oacute; một phương thức t&iacute;ch hợp c&oacute; t&ecirc;n <code>getSelection</code> tr&ecirc;n đối tượng <code>windows</code> to&agrave;n cầu. Sử dụng phương ph&aacute;p n&agrave;y, bạn c&oacute; thể tạo một lớp l&oacute;t trả về văn bản được đ&aacute;nh dấu hoặc đ&atilde; chọn tr&ecirc;n trang web.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/15c806ae-bfc3-45ac-a0f4-2959509ea732" alt="js" />
<pre class="language-python"><code>const getSelectedText = () =&gt; window.getSelection().toString()</code></pre>
&nbsp;
<h1 style="text-align: justify;">10. Nhận một biến Random Boolean&nbsp;</h1>
Trong khi lập tr&igrave;nh, đặc biệt nếu bạn đang viết m&atilde; tr&ograve; chơi, đ&ocirc;i khi bạn muốn thực hiện h&agrave;nh động một c&aacute;ch ngẫu nhi&ecirc;n. Trong những trường hợp n&agrave;y, one- liner b&ecirc;n dưới rất tiện dụng.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/2f9beba0-d160-4f19-8ebe-4e9799a1bd43" alt="js" />
<pre class="language-python"><code>const getRandomBoolean = () =&gt; Math.random() &gt;= 0.5</code></pre>
One- liner ở tr&ecirc;n c&oacute; 50/50 cơ hội trả về true hoặc false. V&igrave; x&aacute;c suất để số ngẫu nhi&ecirc;n được tạo ra lớn hơn 0,5 bằng x&aacute;c suất nhỏ hơn.
Tuy nhi&ecirc;n, v&iacute; dụ: nếu bạn muốn nhận được một Boolean ngẫu nhi&ecirc;n với x&aacute;c suất sai 70%, th&igrave; bạn chỉ cần thay đổi 0,5 th&agrave;nh 0,7, v.v.
&nbsp;
<h1 style="text-align: justify;">11. T&iacute;nh gi&aacute; trị trung b&igrave;nh của một mảng</h1>
Gi&aacute; trị trung b&igrave;nh của một mảng c&oacute; thể được t&iacute;nh bằng nhiều c&aacute;ch. Nhưng logic l&agrave; như nhau cho tất cả. Bạn phải lấy tổng của mảng v&agrave; độ d&agrave;i của n&oacute;; th&igrave; ph&eacute;p chia cho gi&aacute; trị trung b&igrave;nh.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/ad8fb1e1-504a-45f0-bdb7-41de1fc803be" alt="js" />
<pre class="language-python"><code>const average = (arr) =&gt; arr.reduce((a, b) =&gt; a + b) / arr.length</code></pre>
Trong một one-liner average, bạn sử dụng reduce để lấy tổng của mảng trong một d&ograve;ng thay v&igrave; sử dụng một v&ograve;ng lặp. Sau đ&oacute;, chia n&oacute; cho độ d&agrave;i mảng v&agrave; đ&acirc;y l&agrave; gi&aacute; trị trung b&igrave;nh của một mảng.
&nbsp;
Kết luận
B&acirc;y giờ bạn đ&atilde; nắm được 11 m&atilde; JavaScript one-liner đơn giản nhưng mạnh mẽ. Đ&acirc;y đều l&agrave; những m&atilde; kh&ocirc;ng phổ biến v&agrave; nổi tiếng m&agrave; bạn c&oacute; thể học hỏi được. Ch&uacute;c bạn th&agrave;nh c&ocirc;ng!

Admin

11 câu lệnh JavaScript một dòng sẽ khiến bạn kinh ngạc

Cùng tác giả

Admin

Có liên quan