20 mẹo JavaScript hữu ích để cải thiện hiệu quả phát triển

Thứ Tư, 11/01/2023

Tram Ho

Là một nhà phát triển, bạn luôn tìm cách cải thiện kỹ năng và tăng hiệu quả của mình. Trong bài viết này, chúng tôi sẽ chia sẻ 20 thủ thuật JavaScript hữu ích có thể giúp bạn làm điều đó. Từ những cách đơn giản để cải thiện khả năng đọc đến các kỹ thuật nâng cao hơn, những mẹo này chắc chắn sẽ hữu ích trong các dự án của bạn.

1. Dấu tách số

Khi làm việc với số lượng lớn, có thể khó đọc và hiểu chúng trong nháy mắt. Một cách đơn giản để cải thiện khả năng đọc của chúng là sử dụng dấu gạch dưới làm dấu phân cách.

<span class="token keyword">const</span> largeNumber <span class="token operator">=</span> <span class="token number">1_000_000_000</span> <span class="token punctuation">;</span>

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> largeNumber <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 1000000000</span>

const largeNumber = 1_000_000_000 ;

console . log ( largeNumber ) ; // 1000000000

2. Trình xử lý sự kiện chỉ chạy một lần

Đôi khi bạn có thể muốn thêm một trình lắng nghe sự kiện vào một phần tử, nhưng bạn chỉ muốn nó chạy một lần. Bạn có thể sử dụng tùy chọn once để thực hiện việc này:

element <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">'click'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'I run only once'</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span>
    once <span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

element . addEventListener ( 'click' , ( ) => console . log ( 'I run only once' ) , {

once : true

} ) ;

3. Trình bao bọc biến Console.log

Khi sử dụng console.log(), bạn có thể đặt các đối số trong dấu ngoặc nhọn để xem cả tên biến và giá trị biến. Điều này có thể hữu ích để gỡ lỗi và hiểu mã của bạn tốt hơn.

<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">"Maxwell"</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const name = "Maxwell" ;

4. Kiểm tra xem Caps Lock có đang bật không

Bạn có thể sử dụng phương thức KeyboardEvent.getModifierState() để phát hiện xem Caps Lock có đang bật hay không. Điều này có thể hữu ích nếu bạn đang làm việc trên biểu mẫu đăng nhập hoặc ứng dụng khác mà trường hợp chữ cái quan trọng.

<span class="token keyword">const</span> passwordInput <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'password'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

passwordInput <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">'keyup'</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">event</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span> event <span class="token punctuation">.</span> <span class="token function">getModifierState</span> <span class="token punctuation">(</span> <span class="token string">'CapsLock'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// CapsLock is open</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const passwordInput = document . getElementById ( 'password' ) ;

passwordInput . addEventListener ( 'keyup' , function ( event ) {

if ( event . getModifierState ( 'CapsLock' ) ) {

// CapsLock is open

}

} ) ;

5. Nhận giá trị tối thiểu/tối đa từ một mảng

Nếu muốn tìm giá trị nhỏ nhất hoặc lớn nhất trong một mảng, bạn có thể sử dụng hàm Math.min( Math.min() hoặc Math.max() kết hợp với toán tử trải rộng (…).

<span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">9</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> Math <span class="token punctuation">.</span> <span class="token function">max</span> <span class="token punctuation">(</span> <span class="token operator">...</span> numbers <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 9</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> Math <span class="token punctuation">.</span> <span class="token function">min</span> <span class="token punctuation">(</span> <span class="token operator">...</span> numbers <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 1 </span>

const numbers = [ 5 , 7 , 1 , 4 , 9 ] ;

console . log ( Math . max ( ... numbers ) ) ; // 9

console . log ( Math . min ( ... numbers ) ) ; // 1

6. Nhận vị trí chuột

Các thuộc tính clientX và clientY của đối tượng MouseEvent có thể được sử dụng để lấy thông tin về tọa độ của vị trí chuột hiện tại.

document <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">'mousemove'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token parameter">e</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">Mouse X: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> e <span class="token punctuation">.</span> clientX <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">, Mouse Y: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> e <span class="token punctuation">.</span> clientY <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

document . addEventListener ( 'mousemove' , ( e ) => {

console . log ( ` Mouse X: ${ e . clientX } , Mouse Y: ${ e . clientY } ` ) ;

} ) ;

7. Sao chép vào Clipboard

API Clipboard có thể được sử dụng để tạo chức năng “Sao chép vào Clipboard”. Đây là một ví dụ về cách thực hiện:

<span class="token keyword">function</span> <span class="token function">copyToClipboard</span> <span class="token punctuation">(</span> <span class="token parameter">text</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
navigator <span class="token punctuation">.</span> clipboard <span class="token punctuation">.</span> <span class="token function">writeText</span> <span class="token punctuation">(</span> text <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

function copyToClipboard ( text ) {

navigator . clipboard . writeText ( text ) ;

}

8. Rút ngắn Tuyên bố Phán quyết Có điều kiện

Nếu bạn có một hàm chỉ được thực thi khi một điều kiện là đúng, bạn có thể sử dụng cách viết tắt && để viết hàm đó ngắn gọn hơn. Ví dụ:

<span class="token comment">// Common writing method</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span> condition <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">doSomething</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// Abbreviated</span>
condition <span class="token operator">&amp;&amp;</span> <span class="token function">doSomething</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

// Common writing method

if ( condition ) {

doSomething ( ) ;

}

// Abbreviated

condition && doSomething ( ) ;

9. Sử dụng `Console.table()` cho các bảng đã định dạng

Phương thức console.table() có thể được sử dụng để in dữ liệu ở định dạng bảng trong bảng điều khiển. Cú pháp là:

console <span class="token punctuation">.</span> <span class="token function">table</span> <span class="token punctuation">(</span> data <span class="token punctuation">[</span> <span class="token punctuation">,</span> columns <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

console . table ( data [ , columns ] ) ;

Đây là một ví dụ về cách sử dụng nó:

<span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span> <span class="token parameter">firstName <span class="token punctuation">,</span> lastName</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span> <span class="token punctuation">.</span> firstName <span class="token operator">=</span> firstName <span class="token punctuation">;</span>
  <span class="token keyword">this</span> <span class="token punctuation">.</span> lastName <span class="token operator">=</span> lastName <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> p1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token string">"Mark"</span> <span class="token punctuation">,</span> <span class="token string">"Smith"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> p2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token string">"Maxwell"</span> <span class="token punctuation">,</span> <span class="token string">"Siegrist"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> p3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token string">"Lucy"</span> <span class="token punctuation">,</span> <span class="token string">"Jones"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

console <span class="token punctuation">.</span> <span class="token function">table</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> p1 <span class="token punctuation">,</span> p2 <span class="token punctuation">,</span> p3 <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">"firstName"</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

function Person ( firstName , lastName ) {

this . firstName = firstName ;

this . lastName = lastName ;

}

const p1 = new Person ( "Mark" , "Smith" ) ;

const p2 = new Person ( "Maxwell" , "Siegrist" ) ;

const p3 = new Person ( "Lucy" , "Jones" ) ;

console . table ( [ p1 , p2 , p3 ] , [ "firstName" ] ) ;

10. Chuyển chuỗi thành số

Bạn có thể sử dụng toán tử cộng một ngôi ( + ) để nhanh chóng chuyển đổi một chuỗi thành một số. Ví dụ:

<span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">'508'</span> <span class="token punctuation">;</span>

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token operator">+</span> str <span class="token punctuation">)</span> <span class="token comment">// 508;</span>

const str = '508' ;

console . log ( + str ) // 508;

11. Khử trùng lặp một mảng

Bạn có thể sử dụng toán tử trải rộng và đối tượng Set để loại bỏ các bản sao khỏi một mảng. Đây là một ví dụ:

<span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token keyword">new</span> <span class="token class-name">Set</span> <span class="token punctuation">(</span> numbers <span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// [2, 3, 5]</span>

const numbers = [ 2 , 3 , 5 , 5 , 2 ] ;

console . log ( [ ... new Set ( numbers ) ] ) ; // [2, 3, 5]

12. Lọc ra các giá trị giả từ một mảng

Nếu bạn muốn lọc ra các giá trị giả (chẳng hạn như undefined , null và NaN ) khỏi một mảng, bạn có thể sử dụng phương thức filter() . Đây là một ví dụ:

<span class="token keyword">const</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token keyword">undefined</span> <span class="token punctuation">,</span> <span class="token number">NaN</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token keyword">null</span> <span class="token punctuation">,</span> <span class="token string">'@maxwell'</span> <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> <span class="token boolean">false</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> filteredArray <span class="token operator">=</span> myArray <span class="token punctuation">.</span> <span class="token function">filter</span> <span class="token punctuation">(</span> Boolean <span class="token punctuation">)</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> filteredArray <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// [1, 2, '@maxwell', true, false]</span>

const myArray = [ 1 , undefined , NaN , 2 , null , '@maxwell' , true , false ] ;

const filteredArray = myArray . filter ( Boolean ) ;

console . log ( filteredArray ) ; // [1, 2, '@maxwell', true, false]

13. Tạo chuỗi truy vấn URL

Bạn có thể sử dụng đối tượng URLSearchParams để tạo chuỗi truy vấn URL từ một đối tượng. Đây là một ví dụ:

<span class="token keyword">const</span> queryObject <span class="token operator">=</span> <span class="token punctuation">{</span>
  page <span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">,</span>
  search <span class="token operator">:</span> <span class="token string">'javascript'</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> searchParams <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URLSearchParams</span> <span class="token punctuation">(</span> queryObject <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> queryString <span class="token operator">=</span> searchParams <span class="token punctuation">.</span> <span class="token function">toString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> queryString <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// "page=2&amp;search=javascript"</span>

const queryObject = {

page : 2 ,

search : 'javascript'

} ;

const searchParams = new URLSearchParams ( queryObject ) ;

const queryString = searchParams . toString ( ) ;

console . log ( queryString ) ; // "page=2&search=javascript"

14. Kiểm tra xem một phần tử có trong Viewport không

Bạn có thể sử dụng phương thức getBoundingClientRect() và các thuộc tính window.innerWidth và window.innerHeight để kiểm tra xem một phần tử có trong chế độ xem hay không. Đây là một ví dụ:

<span class="token keyword">function</span> <span class="token function">isInViewport</span> <span class="token punctuation">(</span> <span class="token parameter">element</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> rect <span class="token operator">=</span> element <span class="token punctuation">.</span> <span class="token function">getBoundingClientRect</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    rect <span class="token punctuation">.</span> top <span class="token operator">&gt;=</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span>
    rect <span class="token punctuation">.</span> left <span class="token operator">&gt;=</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span>
    rect <span class="token punctuation">.</span> bottom <span class="token operator">&lt;=</span> window <span class="token punctuation">.</span> innerHeight <span class="token operator">&amp;&amp;</span>
    rect <span class="token punctuation">.</span> right <span class="token operator">&lt;=</span> window <span class="token punctuation">.</span> innerWidth
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

function isInViewport ( element ) {

const rect = element . getBoundingClientRect ( ) ;

return (

rect . top >= 0 &&

rect . left >= 0 &&

rect . bottom <= window . innerHeight &&

rect . right <= window . innerWidth

) ;

}

15. Tạo một chức năng điều tiết

Nếu bạn muốn giới hạn tốc độ gọi hàm, bạn có thể sử dụng phương thức setTimeout() để tạo hàm “điều chỉnh”. Đây là một ví dụ:

<span class="token keyword">function</span> <span class="token function">throttle</span> <span class="token punctuation">(</span> <span class="token parameter">callback <span class="token punctuation">,</span> delay</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> timeout <span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">;</span>
    <span class="token keyword">const</span> args <span class="token operator">=</span> arguments <span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token operator">!</span> timeout <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      timeout <span class="token operator">=</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">callback</span> <span class="token punctuation">.</span> <span class="token function">apply</span> <span class="token punctuation">(</span> context <span class="token punctuation">,</span> args <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        timeout <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token punctuation">,</span> delay <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> myThrottledFunc <span class="token operator">=</span> <span class="token function">throttle</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'I am throttled'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">1000</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token function">myThrottledFunc</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Will log "I am throttled"</span>
<span class="token function">myThrottledFunc</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Will not log</span>
<span class="token function">setTimeout</span> <span class="token punctuation">(</span> myThrottledFunc <span class="token punctuation">,</span> <span class="token number">1500</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Will log "I am throttled" after 1500ms</span>

function throttle ( callback , delay ) {

let timeout ;

return function ( ) {

const context = this ;

const args = arguments ;

if ( ! timeout ) {

timeout = setTimeout ( function ( ) {

callback . apply ( context , args ) ;

timeout = null ;

} , delay ) ;

}

} ;

}

const myThrottledFunc = throttle ( function ( ) {

console . log ( 'I am throttled' ) ;

} , 1000 ) ;

myThrottledFunc ( ) ; // Will log "I am throttled"

setTimeout ( myThrottledFunc , 1500 ) ; // Will log "I am throttled" after 1500ms

16. Sử dụng `Array.includes()` để kiểm tra tư cách thành viên nhanh chóng

Phương Array.includes() có thể được sử dụng để kiểm tra nhanh xem một phần tử có trong một mảng hay không. Nó ngắn gọn hơn là sử dụng phương thức indexOf() . Đây là một ví dụ:

<span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> numbers <span class="token punctuation">.</span> <span class="token function">includes</span> <span class="token punctuation">(</span> <span class="token number">3</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// true</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> numbers <span class="token punctuation">.</span> <span class="token function">includes</span> <span class="token punctuation">(</span> <span class="token number">6</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// false</span>

const numbers = [ 1 , 2 , 3 , 4 , 5 ] ;

console . log ( numbers . includes ( 3 ) ) ; // true

console . log ( numbers . includes ( 6 ) ) ; // false

17. Sử dụng `Array.find()` để lấy phần tử khớp đầu tiên

Phương Array.find() có thể được sử dụng để lấy phần tử đầu tiên trong một mảng khớp với một điều kiện cụ thể. Đây là một ví dụ:

<span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> evenNumber <span class="token operator">=</span> numbers <span class="token punctuation">.</span> <span class="token function">find</span> <span class="token punctuation">(</span> <span class="token parameter">number</span> <span class="token operator">=&gt;</span> number <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> evenNumber <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 2</span>

const evenNumber = numbers . find ( number => number % 2 === 0 ) ;

console . log ( evenNumber ) ; // 2

18. Sử dụng `Object.values()` để lấy mảng giá trị của đối tượng

Phương thức Object.values() có thể được sử dụng để lấy một mảng các giá trị của một đối tượng. Điều này có thể hữu ích khi bạn muốn làm việc với các giá trị của một đối tượng theo cách giống như mảng. Đây là một ví dụ:

<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
  firstName <span class="token operator">:</span> <span class="token string">'Maxwell'</span> <span class="token punctuation">,</span>
  lastName <span class="token operator">:</span> <span class="token string">'Siegrist'</span> <span class="token punctuation">,</span>
  age <span class="token operator">:</span> <span class="token number">30</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> Object <span class="token punctuation">.</span> <span class="token function">values</span> <span class="token punctuation">(</span> person <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// ['Maxwell', 'Siegrist', 30]</span>

const person = {

firstName : 'Maxwell' ,

lastName : 'Siegrist' ,

age : 30

} ;

console . log ( Object . values ( person ) ) ; // ['Maxwell', 'Siegrist', 30]

19. Sử dụng `Array.reduce()` để tính tổng các mảng

Phương thức Array.reduce() có thể được sử dụng để giảm một mảng thành một giá trị duy nhất bằng cách áp dụng một hàm cho từng phần tử. Đây là một ví dụ về cách sử dụng nó để tính tổng một mảng:

<span class="token keyword">const</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">10</span> <span class="token punctuation">,</span> <span class="token number">20</span> <span class="token punctuation">,</span> <span class="token number">30</span> <span class="token punctuation">,</span> <span class="token number">40</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">reducer</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">total <span class="token punctuation">,</span> currentValue</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> total <span class="token operator">+</span> currentValue <span class="token punctuation">;</span>

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> myArray <span class="token punctuation">.</span> <span class="token function">reduce</span> <span class="token punctuation">(</span> reducer <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 100</span>

const myArray = [ 10 , 20 , 30 , 40 ] ;

const reducer = ( total , currentValue ) => total + currentValue ;

console . log ( myArray . reduce ( reducer ) ) ; // 100

20. Thuộc tính dữ liệu tùy chỉnh của phần tử truy cập với thuộc tính tập dữ liệu

Thuộc tính dataset có thể được sử dụng để truy cập các thuộc tính dữ liệu tùy chỉnh của phần tử ( data-* ). Đây là một ví dụ:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> user <span class="token punctuation">"</span></span> <span class="token attr-name">data-name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> Maxwell <span class="token punctuation">"</span></span> <span class="token attr-name">data-age</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> 32 <span class="token punctuation">"</span></span> <span class="token attr-name">data-something</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> Some Data <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    Hello Maxwell
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> script</span> <span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">const</span> user <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'user'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> user <span class="token punctuation">.</span> dataset <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token comment">// { name: "Maxwell", age: "32", something: "Some Data" }</span>

    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> user <span class="token punctuation">.</span> dataset <span class="token punctuation">.</span> name <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// "Maxwell"</span>
    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> user <span class="token punctuation">.</span> dataset <span class="token punctuation">.</span> age <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// "32"</span>
    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> user <span class="token punctuation">.</span> dataset <span class="token punctuation">.</span> something <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// "Some Data"</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> script</span> <span class="token punctuation">&gt;</span></span>

< div id = " user " data-name = " Maxwell " data-age = " 32 " data-something = " Some Data " >

Hello Maxwell

</ div >

< script >

const user = document . getElementById ( 'user' ) ;

console . log ( user . dataset ) ;

// { name: "Maxwell", age: "32", something: "Some Data" }

</ script >

Phần kết luận

Trong bài viết này, chúng tôi đã đề cập đến 20 mẹo JavaScript hữu ích có thể giúp bạn cải thiện hiệu quả phát triển của mình. Những mẹo này bao gồm:

Sử dụng dấu gạch dưới làm dấu phân cách để cải thiện khả năng đọc số lượng lớn
Thêm trình xử lý sự kiện chỉ chạy một lần
Gói đối số console.log trong dấu ngoặc nhọn để xem cả tên và giá trị biến
Sử dụng KeyboardEvent.getModifierState() để kiểm tra xem Caps Lock đã bật chưa
Sử dụng Math.min Math.min( ) và Math.max() với toán tử trải rộng để tìm giá trị nhỏ nhất hoặc lớn nhất trong một mảng
Nhận vị trí chuột với các thuộc tính clientX và clientY của đối tượng MouseEvent
Sao chép vào khay nhớ tạm bằng API Clipboard
Rút gọn các câu phán đoán có điều kiện bằng cách viết tắt &&
In các bảng trong bảng điều khiển với console.table()
Chuyển chuỗi thành số bằng toán tử cộng một ngôi
Loại bỏ các mảng trùng lặp với toán tử trải rộng và đối tượng Set
Lọc ra các giá trị giả từ một mảng bằng phương thức filter()
Tạo chuỗi truy vấn URL với đối tượng URLSearchParams
Kiểm tra xem một phần tử có trong chế độ xem hay không bằng getBoundingClientRect() và window.innerWidth và window.innerHeight
Tạo một chức năng điều tiết với setTimeout()
Sử dụng Array.includes() để kiểm tra thành viên nhanh chóng
Sử dụng Array.find() để lấy phần tử khớp đầu tiên trong một mảng
Sử dụng Object.values() để lấy một mảng giá trị của đối tượng
Sử dụng Array.reduce() để tính tổng các mảng
Truy cập thuộc tính dữ liệu tùy chỉnh của phần tử bằng thuộc tính tập dữ liệu

Tôi hy vọng những lời khuyên này sẽ giúp bạn cải thiện hiệu quả phát triển của mình và đưa các kỹ năng của bạn lên một tầm cao mới. Chúc mừng mã hóa!

Như mọi khi, tôi hy vọng bạn thích bài viết này và học được điều gì đó mới. Xin cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo!

Nếu các bạn thích bài viết này thì hãy cho mình 1 like và subscribe để ủng hộ mình nhé. Cảm ơn bạn.

Giới thiệu

https://tuan200tokyo.blogspot.com/2023/01/blog93-15-more-useful-javascript-tips.html

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

20 mẹo JavaScript hữu ích để cải thiện hiệu quả phát triển

1. Dấu tách số

2. Trình xử lý sự kiện chỉ chạy một lần

3. Trình bao bọc biến Console.log

4. Kiểm tra xem Caps Lock có đang bật không

5. Nhận giá trị tối thiểu/tối đa từ một mảng

6. Nhận vị trí chuột

7. Sao chép vào Clipboard

8. Rút ngắn Tuyên bố Phán quyết Có điều kiện

9. Sử dụng `Console.table()` cho các bảng đã định dạng

10. Chuyển chuỗi thành số

11. Khử trùng lặp một mảng

12. Lọc ra các giá trị giả từ một mảng

13. Tạo chuỗi truy vấn URL

14. Kiểm tra xem một phần tử có trong Viewport không

15. Tạo một chức năng điều tiết

16. Sử dụng `Array.includes()` để kiểm tra tư cách thành viên nhanh chóng

17. Sử dụng `Array.find()` để lấy phần tử khớp đầu tiên

18. Sử dụng `Object.values()` để lấy mảng giá trị của đối tượng

19. Sử dụng `Array.reduce()` để tính tổng các mảng

20. Thuộc tính dữ liệu tùy chỉnh của phần tử truy cập với thuộc tính tập dữ liệu

Phần kết luận

Giới thiệu

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

1. Dấu tách số

2. Trình xử lý sự kiện chỉ chạy một lần

3. Trình bao bọc biến Console.log

4. Kiểm tra xem Caps Lock có đang bật không

5. Nhận giá trị tối thiểu/tối đa từ một mảng

6. Nhận vị trí chuột

7. Sao chép vào Clipboard

8. Rút ngắn Tuyên bố Phán quyết Có điều kiện

9. Sử dụng Console.table() cho các bảng đã định dạng

10. Chuyển chuỗi thành số

11. Khử trùng lặp một mảng

12. Lọc ra các giá trị giả từ một mảng

13. Tạo chuỗi truy vấn URL

14. Kiểm tra xem một phần tử có trong Viewport không

15. Tạo một chức năng điều tiết

16. Sử dụng Array.includes() để kiểm tra tư cách thành viên nhanh chóng

17. Sử dụng Array.find() để lấy phần tử khớp đầu tiên

18. Sử dụng Object.values() để lấy mảng giá trị của đối tượng

19. Sử dụng Array.reduce() để tính tổng các mảng

20. Thuộc tính dữ liệu tùy chỉnh của phần tử truy cập với thuộc tính tập dữ liệu

Phần kết luận

Giới thiệu

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

9. Sử dụng `Console.table()` cho các bảng đã định dạng

16. Sử dụng `Array.includes()` để kiểm tra tư cách thành viên nhanh chóng

17. Sử dụng `Array.find()` để lấy phần tử khớp đầu tiên

18. Sử dụng `Object.values()` để lấy mảng giá trị của đối tượng

19. Sử dụng `Array.reduce()` để tính tổng các mảng