11 JavaScript Tricks bạn sẽ khó tìm được ở các Tutorials

Thứ Hai, 09/11/2020

Tram Ho

1. Unique các giá trị trong một mảng

Set object type đã xuất hiện ở phiên bản ES6, cùng với toán tử ‘spread’ (...), chúng ta có thể tạo nên một array với các giá trị là unique.

<span class="token keyword">const</span> array <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">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">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> uniqueArray <span class="token operator">=</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>array<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>uniqueArray<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: [1, 2, 3, 5]</span>

const array = [1, 1, 2, 3, 5, 5, 1]

const uniqueArray = [...new Set(array)];

Việc này sẽ phức tạp hơn với các phiên bản trước ES6, chắc chắn chúng ta sẽ phải dùng đến vòng lặp cùng với các logic phúc tạp hơn
Thủ thuật này hoạt động đối với các mảng có chứa các kiểu nguyên thủy: undefined, null, boolean, string và number. (Nếu bạn có một mảng chứa các object, function hoặc additional array, bạn cần một cách tiếp cận khác!)

2. Short-Circuit Evaluation

Toán tử ba ngôi là một cách nhanh chóng để viết các câu lệnh điều kiện đơn giản (và đôi khi không đơn giản), như sau:

x <span class="token operator">&gt;</span> <span class="token number">100</span> <span class="token operator">?</span> <span class="token string">'Above 100'</span> <span class="token operator">:</span> <span class="token string">'Below 100'</span><span class="token punctuation">;</span>
x <span class="token operator">&gt;</span> <span class="token number">100</span> <span class="token operator">?</span> <span class="token punctuation">(</span>x <span class="token operator">&gt;</span> <span class="token number">200</span> <span class="token operator">?</span> <span class="token string">'Above 200'</span> <span class="token operator">:</span> <span class="token string">'Between 100-200'</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token string">'Below 100'</span><span class="token punctuation">;</span>

x > 100 ? 'Above 100' : 'Below 100';

x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

Đôi khi bạn code với cả toán tử ba ngôi cũng phức tạp hơn mức cần thiết thì thay vào đó, nên sử dụng ‘và’ && và ‘hoặc’ || toán tử logic để đánh giá các biểu thức nhất định theo cách ngắn gọn, mạch lạc hơn.
Đây thường được gọi là ‘short-circuiting’ hoặc ‘short-circuit evaluation’.

Nó hoạt động như thế nào
Giả sử tôi muốn return một trong hai hoặc nhiều option

Sử dụng ‘&&’ sẽ trả về giá trị đầu tiên false hoặc ‘falsy’ value. Nếu mọi toán hạng evaluate là true, biểu thức evaluated cuối cùng sẽ được trả về.

<span class="token keyword">let</span> one <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> two <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">,</span> three <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>one <span class="token operator">&amp;&amp;</span> two <span class="token operator">&amp;&amp;</span> three<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: 3</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: 0</span>

let one = 1, two = 2, three = 3;

Sử dụng || sẽ trả về giá trị true hoặc ‘truthy’ đầu tiên. Nếu mọi toán hạng đánh giá là false, biểu thức evaluated cuối cùng sẽ được trả về.

<span class="token keyword">let</span> one <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> two <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">,</span> three <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>one <span class="token operator">||</span> two <span class="token operator">||</span> three<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: 1</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0</span> <span class="token operator">||</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: null</span>

Ví dụ 1:
Giả sử tôi muốn trả về độ dài của một biến, nhưng chúng tôi không loại biến. Chúng ta có thể sử dụng câu lệnh if / else để kiểm tra xem foo có phải là kiểu được chấp nhận hay không, nhưng điều này có thể làm code khá dài. Đánh giá ngắn mạch cho phép chúng tôi thực hiện việc này thay thế:

<span class="token keyword">return</span> <span class="token punctuation">(</span>foo <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>

return (foo || []).length;

Nếu biến foo là truthy, nó sẽ được trả về. Nếu không, độ dài của mảng trống sẽ được trả về: 0.

Ví dụ 2:
Bạn đã bao giờ gặp sự cố khi truy cập thuộc tính đối tượng lồng nhau chưa? Bạn có thể không biết liệu đối tượng hoặc một trong các thuộc tính phụ có tồn tại hay không và điều này có thể gây ra lỗi.

Giả sử chúng tôi muốn truy cập thuộc tính có tên là data trong this.state, nhưng dữ liệu là undefined cho đến khi đoạn code này của chúng ta có dữ liệu được truyền vào.

Tùy thuộc vào nơi chúng ta sử dụng nó, việc gọi this.state.data có thể gây lỗi. Để giải quyết vấn đề này, chúng ta có thể đặt nó trong một điều kiện:

<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token string">'Fetching Data'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

if (this.state.data) {

return this.state.data;

} else {

return 'Fetching Data';

}

Vậy có cách này để viết ngắn gọn đỡ dài dòng hơn không. Câu trả lời là có và rất đơn giản nhé

<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data <span class="token operator">||</span> <span class="token string">'Fetching Data'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

return (this.state.data || 'Fetching Data');

Chúng tôi refactor code ở trên để sử dụng &&. Câu lệnh ‘Fetching Data’ && this.state.data sẽ trả về this.state.data cho dù nó undefined hay không. Điều này là do ‘Fetching Data’ là ‘truethy’ và vì vậy && sẽ luôn vượt qua nó khi nó đặt ở đầu.

3. Convert to Boolean

Bên cạnh các giá trị boolean thông thường true và false, JavaScript cũng coi tất cả các giá trị khác là ‘truthy’ hoặc ‘falsy’. Trong Javascript các giá trị sau sẽ được tính là ‘falsy’ : 0, "", null',NaN, undefined. Và còn lại sẽ được tính là truethy. Chúng ta có thể dễ dàng chuyển đổi giữa true và false bằng cách sử dụng toán tử phủ định !, cũng sẽ chuyển đổi kiểu thành “boolean”.

<span class="token keyword">const</span> isTrue  <span class="token operator">=</span> <span class="token operator">!</span><span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> isFalse <span class="token operator">=</span> <span class="token operator">!</span><span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> alsoFalse <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token number">0</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>isTrue<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: "boolean"</span>

const isTrue = !0;

const isFalse = !1;

const alsoFalse = !!0;

console.log(isTrue); // Result: true

console.log(typeof true); // Result: "boolean"

4. Convert to String

Để nhanh chóng chuyển đổi một số thành một chuỗi, chúng ta có thể sử dụng toán tử nối + theo sau bởi một tập hợp rỗng của dấu ngoặc kép “”.

<span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token number">1</span> <span class="token operator">+</span> <span class="token string">""</span><span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: "1"</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: "string"</span>

const val = 1 + "";

5. Convert to Number

Điều ngược lại có thể đạt được nhanh chóng bằng cách sử dụng toán tử cộng +.

<span class="token keyword">let</span> int <span class="token operator">=</span> <span class="token string">"15"</span><span class="token punctuation">;</span>
int <span class="token operator">=</span> <span class="token operator">+</span>int<span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>int<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: 15</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> int<span class="token punctuation">)</span><span class="token punctuation">;</span> Result<span class="token operator">:</span> <span class="token string">"number"</span>

let int = "15";

int = +int;

Điều này cũng có thể được sử dụng để chuyển đổi boolean thành số, như sau:

<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">+</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// Return: 1</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">+</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Return: 0</span>

Có thể có những ngữ cảnh nào đó + sẽ được hiểu là toán tử nối hơn là toán tử cộng. Khi điều đó xảy ra (và bạn muốn trả về một số nguyên, không phải một số thực), thì bạn có thể sử dụng hai dấu ngã: ~~.
Dấu ngã, được gọi là ‘toán tử NOT bitwise’, là một toán tử tương đương vớ i -n - 1. Vì vậy, ví dụ, ~ 15 bằng -16.
Sử dụng hai dấu ngã liên tiếp sẽ phủ nhận thao tác một cách hiệu quả, bởi vì — ( — n — 1) — 1 = n + 1 — 1 = n . Nói cách khác,
~ — 16 = 15.

<span class="token keyword">const</span> int <span class="token operator">=</span> <span class="token operator">~</span><span class="token operator">~</span><span class="token string">"15"</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>int<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: 15</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> int<span class="token punctuation">)</span><span class="token punctuation">;</span> Result<span class="token operator">:</span> <span class="token string">"number"</span>

const int = ~~"15"

Mặc dù tôi không thể nghĩ ra nhiều trường hợp sử dụng, nhưng toán tử NOT bitwise cũng có thể được sử dụng trên boolean:
~true = -2 and ~false = -1.

6. Quick Powers

Kể từ ES7, có thể sử dụng toán tử ‘mũ’ ** như một cách viết tắt cho ‘mũ’, nhanh hơn so với viết Math.pow (2, 3). Đây là công cụ đơn giản, nhưng nó nằm trong danh sách vì không có nhiều hướng dẫn được cập nhật để bao gồm toán tử này!

<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span> <span class="token operator">**</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: 8</span>

Không nên nhầm lẫn ký hiệu này với ký hiệu ^, thường được sử dụng để biểu thị số mũ, nhưng trong JavaScript là toán tử XOR bitwise.
Ở các bản trước ES7, việc sử dụng shorthand cho tính số mũ chỉ có thể sử dụng cho 2 mũ. Vì nó có thể sử dụng toán tử dịch bit trái <<.

<span class="token comment">// The following expressions are equivalent:</span>
Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> n<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token number">2</span> <span class="token operator">&lt;&lt;</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token number">2</span><span class="token operator">**</span>n<span class="token punctuation">;</span>

// The following expressions are equivalent:

Math.pow(2, n);

2 << (n - 1);

2**n;

7. Quick Float to Integer

Nếu bạn muốn chuyển đổi một float thành một số nguyên, bạn có thể sử dụng Math.floor(), Math.ceil() hoặc Math.round(). Nhưng cũng có một cách nhanh hơn để cắt ngắn một số thực thành một số nguyên bằng cách sử dụng |, toán tử OR bitwise.

<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">23.9</span> <span class="token operator">|</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// Result: 23</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">23.9</span> <span class="token operator">|</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: -23</span>

Hành vi của | khác nhau tùy thuộc vào việc bạn đang xử lý số dương hay số âm, vì vậy tốt nhất chỉ nên sử dụng shortcut này nếu bạn chắc chắn. Nói một cách chính xác, thao tác này loại bỏ bất cứ thứ gì đứng sau dấu thập phân, cắt bớt một số thực thành một số nguyên.

Xóa các chữ số cuối cùng
Toán tử OR bitwise cũng có thể được sử dụng để loại bỏ bất kỳ số lượng chữ số nào ở cuối một số nguyên. Điều này có nghĩa là chúng tôi không phải sử dụng mã như thế này để chuyển đổi giữa các loại:

<span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">"1553"</span><span class="token punctuation">;</span> 
<span class="token function">Number</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> str<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

let str = "1553";

Number(str.substring(0, str.length - 1))

Thay vào đó, toán tử OR bitwise cho phép chúng ta viết:

<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1553</span> <span class="token operator">/</span> <span class="token number">10</span>   <span class="token operator">|</span> <span class="token number">0</span><span class="token punctuation">)</span>  <span class="token comment">// Result: 155</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1553</span> <span class="token operator">/</span> <span class="token number">100</span>  <span class="token operator">|</span> <span class="token number">0</span><span class="token punctuation">)</span>  <span class="token comment">// Result: 15</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1553</span> <span class="token operator">/</span> <span class="token number">1000</span> <span class="token operator">|</span> <span class="token number">0</span><span class="token punctuation">)</span>  <span class="token comment">// Result: 1</span>

8. Automatic Binding in Classes

Chúng ta có thể sử dụng arrow notation ES6 trong các class methods và bằng cách làm như vậy, binding được ngụ ý. Điều này thường sẽ lưu một số code trong class constructor của tôi và tôi có thể bỏ qua các biểu thức lặp đi lặp lại như: this.myMethod = this.myMethod.bind(this)

<span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> React<span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Compononent</span> <span class="token punctuation">{</span>
  <span class="token keyword">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token function-variable function">myMethod</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// This method is bound implicitly!</span>
  <span class="token punctuation">}</span>
<span class="token function">render</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>
      <span class="token operator">&lt;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
          <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">myMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

import React, { Component } from React;

export default class App extends Compononent {

constructor(props) {

super(props);

this.state = {};

}

myMethod = () => {

// This method is bound implicitly!

}

render() {

return (

<>

<div>

{this.myMethod()}

</div>

</>

)

}

};

9. Truncate an Array

Nếu bạn muốn xóa các giá trị khỏi phần cuối của một mảng một cách triệt để, có nhiều lựa chọn thay thế nhanh hơn là sử dụng splice().
Ví dụ: nếu bạn biết kích thước của mảng ban đầu của mình, bạn có thể xác định lại thuộc tính độ dài của nó, như sau:

<span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">0</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 number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
array<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: [0, 1, 2, 3]</span>

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

array.length = 4;

Đây là một giải pháp đặc biệt ngắn gọn. Tuy nhiên, tôi thấy thời gian chạy của phương thức slice() thậm chí còn nhanh hơn. Nếu tốc độ là mục tiêu chính của bạn, hãy xem xét sử dụng một cái gì đó như sau:

<span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">0</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 number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
array <span class="token operator">=</span> array<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: [0, 1, 2, 3]</span>

array = array.slice(0, 4);

10. Get the Last Item(s) in an Array

Phương thức mảng slice() có thể nhận các số nguyên âm và nếu được cung cấp, nó sẽ nhận các giá trị từ cuối mảng chứ không phải từ đầu.

<span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">0</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 number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: [9]</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: [8, 9]</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</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">// Result: [7, 8, 9]</span>

11. Format JSON Code

Cuối cùng, bạn có thể đã sử dụng JSON.stringify trước đây, nhưng bạn có nhận ra rằng nó cũng có thể giúp thụt lề JSON cho bạn không?

Phương thức stringify() nhận hai tham số tùy chọn: một hàm thay thế, bạn có thể sử dụng để lọc JSON được hiển thị và một giá trị space.
Giá trị khoảng trắng nhận một số nguyên cho số khoảng cách bạn muốn hoặc một chuỗi (chẳng hạn như ‘ t’ để chèn tab) và nó có thể giúp đọc dữ liệu JSON dễ dàng hơn rất nhiều.

<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> alpha<span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">,</span> beta<span class="token operator">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'t'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Result:</span>
<span class="token comment">// '{</span>
<span class="token comment">//     "alpha": A,</span>
<span class="token comment">//     "beta": B</span>
<span class="token comment">// }'</span>

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));

// Result:

// '{

// "alpha": A,

// "beta": B

// }'

Kết

Bài viết trên trình bài một số trick giúp bạn làm việc với javascript dễ dàng hơn, hi vọng bạn sẽ áp dụng tốt với các dự án của mình nhé.
Bài viết tham khảo : 11 JavaScript Tricks You Won’t Find in Most Tutorials

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo