<p style="text-align: justify;"><span style="font-weight: 400;">JavaScript one-liners l&agrave; những c&uacute; ph&aacute;p ngắn, 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ả. N&oacute; kh&aacute; tiện dụng v&agrave; được mọi người sử dụng thường xuy&ecirc;n. H&atilde;y c&ugrave;ng <a href="https://tek4.vn/">Tek4.vn</a> đi s&acirc;u v&agrave;o b&agrave;i viết để kh&aacute;m ph&aacute; những c&uacute; ph&aacute;p mạnh bậc nhất nh&eacute;!</span></p>
<h2 style="text-align: justify;"><strong>Lấy gi&aacute; trị của tr&igrave;nh duyệt </strong><strong>cookie </strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">Nhận gi&aacute; trị cookie với </span><code><span style="font-weight: 400;">document.cookie</span></code></p>
<pre class="language-python"><code>const cookie = name =&gt; `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();

cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"</code></pre>
<h2 style="text-align: justify;"><strong>X&oacute;a tất cả cookie</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">Bạn muốn x&oacute;a tất cả cookie c&ugrave;ng một l&uacute;c ư? Chỉ cần thực thi đoạn m&atilde; sau:</span></p>
<pre class="language-python"><code>const clearCookies = document.cookie.split(';').forEach(cookie =&gt; document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));</code></pre>
<h2 style="text-align: justify;"><strong>Chuyển đổi RGB sang Hex</strong></h2>
<pre class="language-python"><code>const rgbToHex = (r, g, b) =&gt;
  "#" + ((1 &lt;&lt; 24) + (r &lt;&lt; 16) + (g &lt;&lt; 8) + b).toString(16).slice(1);

rgbToHex(0, 51, 255); 
// Result: #0033ff</code></pre>
<h2 style="text-align: justify;"><strong>Tạo Hex ngẫu nhi&ecirc;n</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">Bạn c&oacute; thể tạo m&agrave;u sắc hex ngẫu nhi&ecirc;n bằng c&aacute;c thuộc t&iacute;nh </span><code><span style="font-weight: 400;">Mаth.rаndоm</span></code><span style="font-weight: 400;"> v&agrave; </span><code><span style="font-weight: 400;">раdEnd</span></code><span style="font-weight: 400;">.</span></p>
<pre class="language-python"><code>const randomHex = () =&gt; `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;

console.log(randomHex());
// Result: #92b008</code></pre>
<h2 style="text-align: justify;"><strong>Sao ch&eacute;p v&agrave;o clipboard</strong></h2>
<p style="text-align: justify;"><code><span style="font-weight: 400;">Navigator.clipboard.writeText</span></code><span style="font-weight: 400;"> sẽ gi&uacute;p bạn sao ch&eacute;p văn bản v&agrave;o cliboard.</span></p>
<pre class="language-python"><code>const copyToClipboard = (text) =&gt; navigator.clipboard.writeText(text);

copyToClipboard("Hello World");</code></pre>
<h2 style="text-align: justify;"><strong>X&aacute;c thực ng&agrave;y th&aacute;ng&nbsp;</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">Để x&aacute;c định xem một ng&agrave;y c&oacute; hợp lệ hay kh&ocirc;ng, bạn c&oacute; thể sử dụng h&agrave;m <code>isDateValid()</code> trong Javascript.</span></p>
<pre class="language-python"><code>const isDateValid = (...val) =&gt; !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");
// Result: true</code></pre>
<h2 style="text-align: justify;"><strong>T&igrave;m ng&agrave;y trong năm</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">T&igrave;m một ng&agrave;y kể từ ng&agrave;y:</span></p>
<pre class="language-python"><code>const dayOfYear = (date) =&gt;
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date());
// Result: 272</code></pre>
<h2 style="text-align: justify;"><strong>Viết hoa một chuỗi</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">Với c&aacute;c phương thức c&oacute; sẵn, ch&uacute;ng ta c&oacute; thể thực hiện điều đ&oacute; một c&aacute;ch nhanh ch&oacute;ng v&igrave; kh&ocirc;ng c&oacute; phương ph&aacute;p n&agrave;o hiện c&oacute; để viết hoa một chuỗi.</span></p>
<pre class="language-python"><code>const capitalize = str =&gt; str.charAt(0).toUpperCase() + str.slice(1)

capitalize("follow for more")
// Result: Follow for more</code></pre>
<h2 style="text-align: justify;"><strong>T&igrave;m số ng&agrave;y giữa hai ng&agrave;y bất kỳ</strong></h2>
<pre class="language-python"><code>const dayDif = (date1, date2) =&gt; Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)

dayDif(new Date("2020-10-21"), new Date("2021-10-22"))
// Result: 366</code></pre>
<h2 style="text-align: justify;"><strong>Loại bỏ phần tử tr&ugrave;ng lặp trong mảng</strong></h2>
<pre class="language-python"><code>const removeDuplicates = (arr) =&gt; [...new Set(arr)];

console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// Result: [ 1, 2, 3, 4, 5, 6 ]
</code></pre>
<h2 style="text-align: justify;"><strong>Nhận th&ocirc;ng số truy vấn từ URL</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">Bạn c&oacute; thể dễ d&agrave;ng truy xuất truy vấn <code>раrаms frоm а URL</code> bằng </span><code><span style="font-weight: 400;">windоw.lосаtiоn</span></code><span style="font-weight: 400;"> hoặc URL th&ocirc; </span><code><span style="font-weight: 400;">gооle.соm? Seаrсh = eаsy &amp; раge = 3</span></code></p>
<pre class="language-python"><code>const getParameters = (URL) =&gt; {
  URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&amp;/g, '","').replace(/=/g, '":"') +'"}');
  return JSON.stringify(URL);
};

getParameters(window.location)
// Result: { search : "easy", page : 3 }</code></pre>
<h2 style="text-align: justify;"><strong>Thời gian ghi nhật k&yacute; từ ng&agrave;y</strong></h2>
<pre class="language-python"><code>const timeFromDate = date =&gt; date.toTimeString().slice(0, 8);

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// Result: "17:30:00"</code></pre>
<h2 style="text-align: justify;"><strong>Lấy ra gi&aacute; trị trung b&igrave;nh</strong></h2>
<pre class="language-python"><code>const average = (...args) =&gt; args.reduce((a, b) =&gt; a + b) / args.length;

average(1, 2, 3, 4);
// Result: 2.5</code></pre>
<h2 style="text-align: justify;"><strong>Di chuyển l&ecirc;n đầu</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">Bạn c&oacute; thể sử dụng phương thức </span><code><span style="font-weight: 400;">windоw.sсrоllTо (0, 0)</span></code><span style="font-weight: 400;"> để thực hiện. Đặt thứ </span><code><span style="font-weight: 400;">x</span></code><span style="font-weight: 400;"> v&agrave; thứ</span><span style="font-weight: 400;"> <code>y</code></span><span style="font-weight: 400;"> l&agrave; </span><code><span style="font-weight: 400;">0</span></code><span style="font-weight: 400;">.</span></p>
<pre class="language-python"><code>const goToTop = () =&gt; window.scrollTo(0, 0);

goToTop();</code></pre>
<h2 style="text-align: justify;"><strong>Đảo ngược một chuỗi</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">Đ&aacute;ng tiếc l&agrave; kh&ocirc;ng c&oacute; phương thức sẵn c&oacute; n&agrave;o cho việc n&agrave;y, v&igrave; vậy h&atilde;y thực hiện n&oacute; bằng c&aacute;ch sử dụng c&aacute;c phương thức hiện c&oacute;.</span></p>
<pre class="language-python"><code>const reverse = str =&gt; str.split('').reverse().join('');

reverse('hello world');     
// Result: 'dlrow olleh'</code></pre>
<h2 style="text-align: justify;"><strong>Kiểm tra một mảng c&oacute; trống kh&ocirc;ng</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">One-liner đơn giản để kiểm tra xem một mảng c&oacute; trống hay kh&ocirc;ng, n&oacute; sẽ trả về </span><code><span style="font-weight: 400;">true</span></code><span style="font-weight: 400;"> hoặc </span><code><span style="font-weight: 400;">false</span></code>.</p>
<pre class="language-python"><code>const isNotEmpty = arr =&gt; Array.isArray(arr) &amp;&amp; arr.length &gt; 0;

isNotEmpty([1, 2, 3]);
// Result: true</code></pre>
<h2 style="text-align: justify;"><strong>Lấy ra văn bản đ&atilde; chọn</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">Lấy ra văn bản m&agrave; người d&ugrave;ng tự chọn bằng thuộc t&iacute;nh getSeleсtiоn c&oacute; sẵn.</span></p>
<pre class="language-python"><code>const getSelectedText = () =&gt; window.getSelection().toString();

getSelectedText();</code></pre>
<h2 style="text-align: justify;"><strong>Trộn một mảng</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">Việc trộn ngẫu nhi&ecirc;n l&agrave; một điều tuyệt vời hơn với c&aacute;c phương thức </span><code><span style="font-weight: 400;">sort</span></code><span style="font-weight: 400;"> v&agrave; </span><code><span style="font-weight: 400;">rаndоm</span></code><span style="font-weight: 400;">.</span></p>
<pre class="language-python"><code>const shuffleArray = (arr) =&gt; arr.sort(() =&gt; 0.5 - Math.random());

console.log(shuffleArray([1, 2, 3, 4]));
// Result: [ 1, 4, 3, 2 ]</code></pre>
<h2 style="text-align: justify;"><strong>Ph&aacute;t hiện chế độ tối</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">Kiểm tra thiết bị của người d&ugrave;ng đang ở chế độ tối hay kh&ocirc;ng bằng m&atilde; sau:</span></p>
<pre class="language-python"><code>const isDarkMode = window.matchMedia &amp;&amp; window.matchMedia('(prefers-color-scheme: dark)').matches

console.log(isDarkMode) // Result: True or False</code></pre>
<p style="text-align: justify;"><span style="font-weight: 400;">Hy vọng bạn đ&atilde; c&oacute; được những th&ocirc;ng tin hữu &iacute;ch trong b&agrave;i viết n&agrave;y. H&atilde;y tiếp tục cố gắng v&agrave; ph&aacute;t huy nh&eacute;!</span></p>

Admin

Những đoạn mã JavaScript one-liners cực hiệu quả bạn nên biết

Cùng tác giả

Admin

Có liên quan