Một số khái niệm tăng kỹ năng JavaScript của bạn

Chủ Nhật, 17/11/2019

Tram Ho

Hiện nay thì JavaScript là một ngôn ngữ rất phổ biến và không thể thiếu trong các ứng dụng web. Môi trường JavaScript đã trở nên khổng lồ. Nó có hệ sinh thái của riêng nó với thư viện, frameworks, công cụ, quản lý package và các ngôn ngữ mới để biên dịch ra JavaScript như React, Vue,… Trong bài viết này mình giới thiệu một số khái niệm tăng khả năng JavaScript, sẽ giúp bạn dễ dàng làm việc với JavaScript cũng như dễ dàng tiếp cận với các thư viện, frameworks,…

Destructuring Assignment

Destructuring Assignment là cú pháp cho phép lấy dữ liệu được lưu trữ bên trong Arrays hoặc Objects và gán chúng cho các biến riêng biệt

Ví dụ Destructuring Assignment với Object

<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token string">'huynh'</span><span class="token punctuation">,</span>
    city<span class="token punctuation">:</span> <span class="token string">'Ha Noi'</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> city <span class="token punctuation">}</span> <span class="token operator">=</span> obj<span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> city<span class="token punctuation">)</span>
<span class="token comment">// output tương ứng sẽ là: huynh, Ha Noi</span>

const obj = {

city: 'Ha Noi'

}

const { name, city } = obj;

console.log(name, city)

// output tương ứng sẽ là: huynh, Ha Noi

Nếu chúng ta muốn khi lấy properties của object với tên khác, chúng ta có thể đặt lại bằng cách như sau:

<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token string">'huynh'</span><span class="token punctuation">,</span>
    city<span class="token punctuation">:</span> <span class="token string">'Ha Noi'</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> myName<span class="token punctuation">,</span> city<span class="token punctuation">:</span> myCity <span class="token punctuation">}</span> <span class="token operator">=</span> obj<span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myName<span class="token punctuation">,</span> myCity<span class="token punctuation">)</span>
<span class="token comment">// output tương ứng sẽ là: huynh, Ha Noi</span>

const obj = {

city: 'Ha Noi'

}

const { name: myName, city: myCity } = obj;

console.log(myName, myCity)

// output tương ứng sẽ là: huynh, Ha Noi

Destructuring Assignment còn được sử dụng lấy các tham số được truyền cho một hàm. Ở trong ReactJs cũng thường xuyên gặp và được sử dụng rất nhiều

<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token string">'huynh'</span><span class="token punctuation">,</span>
    city<span class="token punctuation">:</span> <span class="token string">'Ha Noi'</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token function-variable function">myInfor</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>name<span class="token punctuation">,</span> city<span class="token punctuation">}</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 string">`My information: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>city<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">myInfor</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// output: My information: huynh - Ha Noi</span>

const obj = {

city: 'Ha Noi'

}

const myInfor = ({name, city}) => {

console.log(`My information: ${name} - ${city}`);

}

myInfor(obj);

// output: My information: huynh - Ha Noi

Cú pháp Spread

Cú pháp spread đơn giản được biểu diễn bởi dấu 3 chấm: …

Cú pháp Spread cho phép duyệt qua các phần tử và truyền vào phương thức như các đối số có nghĩa là cho phép chuyển đổi một chuỗi thành nhiều argument (trong trường hợp gọi với hàm) hoặc thành nhiều phần tử (cho array)

<span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> z<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> x <span class="token operator">+</span> y <span class="token operator">+</span> z<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<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 punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</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">// output: 6</span>

function sum(x, y, z) {

return x + y + z;

}

const numbers = [1, 2, 3];

console.log(sum(...numbers));

// output: 6

Cú pháp:

Cho việc gọi hàm:

<span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token operator">...</span>iterableObj<span class="token punctuation">)</span><span class="token punctuation">;</span>

1 2	<span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token operator">...</span>iterableObj<span class="token punctuation">)</span><span class="token punctuation">;</span>

Cho array literals hoặc strings:

<span class="token punctuation">[</span><span class="token operator">...</span>iterableObj<span class="token punctuation">,</span> <span class="token string">'4'</span><span class="token punctuation">,</span> <span class="token string">'five'</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

[...iterableObj, '4', 'five', 6];

Cho object literals:

<span class="token keyword">let</span> objClone <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>obj <span class="token punctuation">}</span><span class="token punctuation">;</span>

1 2	<span class="token keyword">let</span> objClone <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>obj <span class="token punctuation">}</span><span class="token punctuation">;</span>

Cú pháp Rest

Rest cho phép chúng ta biểu diễn số lượng đối số không xác định dưới dạng một mảng.

<span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token operator">...</span>Args<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> Args<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span>previous<span class="token punctuation">,</span> current<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> previous <span class="token operator">+</span> current<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>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</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 punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// output: 6</span>

function sum(...Args) {

return Args.reduce((previous, current) => {

return previous + current;

});

}

console.log(sum(1, 2, 3));

// output: 6

Cú pháp:

<span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> <span class="token operator">...</span>Args<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

function myFunction(a, b, ...Args) {

// ...

}

Array Methods

Trong JavaScript thì để thao tác với mảng rất thuận tiện vì JavaScript đã cung cấp cho chúng ta các array methods giúp chúng ta thực hiện biến đổi dữ liệu theo cách chúng ta cần.

Trong bài viết này mình giới thiệu với các bạn một số phương thức.
Đầu tiên là: map, filter, reduce. Cả 3 phương thức này đều là những cách hữu ích để chuyển đổi một mảng hoặc trả về một giá trị và có nhiều bạn đã nhầm lẫn các phương thức này. Vậy các phương thức này hoạt động và khác nhau như thế nào

map

Tạo ra một mảng mới với kết quả được xử lý trong hàm cho mỗi phần phần tử mảng
Không thực thi hàm cho các phần tử mảng không có giá trị
Phương thức này không thay đổi mảng ban đầu

<span class="token keyword">const</span> arr <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 punctuation">;</span>

<span class="token keyword">const</span> newArr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>el <span class="token operator">=&gt;</span> el <span class="token operator">*</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>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// output: [2, 4, 6]</span>

const newArr = arr.map(el => el * 2);

console.log(newArr);

// output: [2, 4, 6]

filter

Tạo ra một mảng chứa đầy tất cả các phần tử mảng qua điều kiện kiểm tra được xử lý trong hàm
Không thực thi hàm cho các phần tử mảng không có giá trị
Phương thức này không thay đổi mảng ban đầu

<span class="token keyword">const</span> arr <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 punctuation">;</span>

<span class="token keyword">const</span> filtered <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>el <span class="token operator">=&gt;</span> el <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">||</span> el <span class="token operator">===</span> <span class="token number">3</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>filtered<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// [1, 3]</span>

const filtered = arr.filter(el => el === 1 || el === 3);

console.log(filtered);

// [1, 3]

reduce

Giảm mảng thành một giá trị duy nhất.
Thực thi một hàm được cung cấp cho mỗi giá trị của mảng (từ trái sang phải)
Giá trị trả về của hàm được lưu trữ trong bộ tích lũy
Không thực thi hàm cho các phần tử mảng không có giá trị
Phương thức này không thay đổi mảng ban đầu

<span class="token keyword">const</span> arr <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 punctuation">;</span>

<span class="token keyword">const</span> reduced <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span>total<span class="token punctuation">,</span> current<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> total <span class="token operator">+</span> current<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>reduced<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// output: 6</span>

const reduced = arr.reduce((total, current) => total + current);

console.log(reduced);

// output: 6

find

Trả về giá trị của phần tử đầu tiên trong một mảng qua điều kiện kiểm tra được xử lý trong hàm
Nếu nó tìm thấy một phần tử mảng trong đó hàm trả về một giá trị đúng, find () trả về giá trị của phần tử mảng đó (và không kiểm tra các giá trị còn lại). Nếu không, nó trả về không xác định

<span class="token keyword">const</span> arr <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 number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> found <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>el <span class="token operator">=&gt;</span> el <span class="token operator">&gt;</span> <span class="token number">3</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>found<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// output: 4</span>

const arr = [1, 2, 3, 4, 5, 6];

const found = arr.find(el => el > 3);

console.log(found);

// output: 4

findIndex

Trả về chỉ mục của phần tử đầu tiên trong một mảng qua điều kiện kiểm tra được xử lý trong hàm
Nếu nó tìm thấy một phần tử mảng trong đó hàm trả về một giá trị thực, findIndex () trả về chỉ mục của phần tử mảng đó (và không kiểm tra các giá trị còn lại). Nếu không, nó trả về -1

<span class="token keyword">const</span> arr <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">2</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>

<span class="token keyword">const</span> foundIndex <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>el <span class="token operator">=&gt;</span> el <span class="token operator">===</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>foundIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// output: 1</span>

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

const foundIndex = arr.findIndex(el => el === 2);

console.log(foundIndex);

// output: 1

indexOf

Tìm kiếm mảng trong mảng theo điều kiện được chỉ định và trả về vị trí của nó.
Tìm kiếm sẽ bắt đầu tại vị trí đã chỉ định hoặc ở đầu nếu không có vị trí bắt đầu nào được chỉ định và kết thúc tìm kiếm ở cuối mảng.
Trả về -1 nếu không tìm thấy theo điều kiện. Nếu theo điều kiện item có mặt nhiều lần, phương thức indexOf trả về vị trí xuất hiện đầu tiên

<span class="token keyword">const</span> arr <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">2</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>

<span class="token keyword">const</span> foundIndex <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">indexOf</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>foundIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// output: 1</span>

<span class="token keyword">const</span> foundIndex2 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// indexOf(giá trị muốn tìm, vị trí bắt đầu tìm)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foundIndex2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//output: 4</span>

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

const foundIndex = arr.indexOf(2);

// output: 1

const foundIndex2 = arr.indexOf(2, 2); // indexOf(giá trị muốn tìm, vị trí bắt đầu tìm)

console.log(foundIndex2);

//output: 4

push

Thêm phần tử mới vào cuối một mảng và trả về độ dài mới

<span class="token keyword">let</span> arr <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 punctuation">;</span>

<span class="token keyword">const</span> pushed <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">push</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>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// [0, 1, 2, 3, 4, 5]</span>

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

<span class="token comment">// 6</span>

let arr = [0, 1, 2, 3, 4];

const pushed = arr.push(5);

console.log(arr);

// [0, 1, 2, 3, 4, 5]

console.log(pushed);

// 6

pop

Loại bỏ phần tử cuối cùng của một mảng và trả về phần tử đó.

<span class="token keyword">let</span> arr <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 punctuation">;</span>

<span class="token keyword">const</span> popped <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">pop</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>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// [0, 1, 2, 3, 4]</span>

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

<span class="token comment">// 5</span>

const popped = arr.pop();

// [0, 1, 2, 3, 4]

console.log(popped);

// 5

shift

Loại bỏ phần tử đầu tiên của một mảng và trả về phần tử đầu tiên đó

<span class="token keyword">let</span> arr <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 punctuation">;</span>

<span class="token keyword">const</span> shifted <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">shift</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>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// [1, 2, 3, 4, 5]</span>

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

<span class="token comment">// 0</span>

const shifted = arr.shift();

// [1, 2, 3, 4, 5]

console.log(shifted);

// 0

unshift

Thêm các phần tử mới vào đầu một mảng và trả về độ dài mới.

<span class="token keyword">let</span> arr <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 punctuation">;</span>

<span class="token keyword">const</span> unshifted <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">unshift</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 punctuation">;</span>

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

<span class="token comment">// [6, 7, 0, 1, 2, 3, 4, 5]</span>

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

<span class="token comment">// 8</span>

const unshifted = arr.unshift(6, 7);

// [6, 7, 0, 1, 2, 3, 4, 5]

console.log(unshifted);

// 8

Generators

Generator là một object được trả về bởi một generator function, nó phù hợp với cả iterable protocol và iterator protocol.
Generator function là một function, có khả năng tạm ngưng thực thi trước khi hàm kết thúc, và có thể tiếp tục chạy ở 1 thời điểm khác. Giá trị của biến trong các lần gọi được lưu lại trong các lần gọi tiếp theo
Phương thức:
- Generator.prototype.next():
  Trả về giá trị yielded, được khai báo qua câu lệnh yield.
- Generator.prototype.return():
  Trả về giá trị và kết thúc generator.
- Generator.prototype.throw():
  Throw lỗi vào generator (đồng thời kết thúc generator, trừ khi được bắt lại trong generator đó).

<span class="token keyword">function</span><span class="token operator">*</span> <span class="token function">generator</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">yield</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">yield</span> <span class="token number">2</span><span class="token punctuation">;</span>
    <span class="token keyword">yield</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> gen <span class="token operator">=</span> <span class="token function">generator</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>gen<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>gen<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>gen<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>gen<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// undefined</span>

function* generator() {

yield 1;

yield 2;

yield 3;

}

const gen = generator();

console.log(gen.next().value);

// 1

// 2

// 3

// undefined

Identity Operator (===) vs Equality Operator (==)

Toán tử == sẽ thực hiện chuyển đổi kiểu dữ liệu trước khi so sánh các giá trị trong khi toán tử === sẽ không thực hiện bất kỳ chuyển đổi loại nào trước khi so sánh

console<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 string">'0'</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><span class="token number">0</span> <span class="token operator">===</span> <span class="token string">'0'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// false</span>

console.log(0 == '0');

// true

console.log(0 === '0');

// false

Callback Functions

Là một function được truyền vào một function khác dưới dạng tham số, và được gọi trong function đó.

<span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span>name<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">'Hello '</span> <span class="token operator">+</span> name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">call</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">callback</span><span class="token punctuation">(</span><span class="token string">'Huynh'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">call</span><span class="token punctuation">(</span>hello<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// output Hello Huynh</span>

function hello(name) {

console.log('Hello ' + name);

}

function call(callback) {

callback('Huynh');

}

call(hello);

// output Hello Huynh

Tài liệu tham khảo

https://developer.mozilla.org/

Kết luận

Trong bài viết này mình đã giới thiệu tới các bạn một số khái niệm có thể giúp bạn tăng khả năng JavaScript của mình. Cảm ơn các bạn đã theo dõi bài viết

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Một số khái niệm tăng kỹ năng JavaScript của bạn

Destructuring Assignment

Cú pháp Spread

Cú pháp Rest

Array Methods

map

filter

reduce

find

findIndex

indexOf

push

pop

shift

unshift

Generators

Identity Operator (===) vs Equality Operator (==)

Callback Functions

Tài liệu tham khảo

Kết luận

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