Hello mọi người, bài viết lần này mình xin chia sẻ chút kiến thức về cách làm phẳng
arraytrongjavascript. Hy vọng sẽ giúp được gì đó cho những ai đang cần tìm hiểu. Mình bắt đầu nhé.
Giả sử mình có data trả về như sau:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">const</span> array <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Trần"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Nữ"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Như"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Quỳnh"</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> |
Và yêu cầu bây giờ là muốn nhận được kết quả như dưới:
1 2 3 4 5 6 7 | <span class="token keyword">const</span> array <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Trần"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Nữ"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Như"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Quỳnh"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span> |
Vậy giờ mình sẽ phải làm như thế nào ?
Câu trả lời là hãy đọc hết bài viết này xem có những cách xử lý nào hay ho không nhé.
1. Sử dụng flat() ES6
Flat()sẽ trả về một array mới với các phần tử của mảng con nằm trong nó.
Cú pháp:
1 2 | <span class="token keyword">var</span> newArray <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">[</span>depth<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// depth: mức độ mà bạn muốn làm phẳng và mặc định của phương thức này là 1</span> |
VD1:
1 2 | <span class="token keyword">const</span> newArray <span class="token operator">=</span> array<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> |
Kết quả trả về:
Như vậy vẫn chưa thể đáp ứng được yêu cầu đầu bài viết của mình. Vì array gốc của chúng ta có 2 mảng con, vậy hãy thử đổi 1 chút như dưới xem nhé:
VD2:
1 2 | <span class="token keyword">const</span> newArray <span class="token operator">=</span> array<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> |
Okay, thế là đã đúng như mình mong muốn, nhưng với những data chưa biết chắc có bao nhiêu mảng con bên trong như array trên thì thật khó để xử lý đúng không nào? Đừng lo vì ES6 cũng đã cung cấp cho chúng ta một tham số đó là Infinity (không dưới hạn):
VD3:
1 2 | <span class="token keyword">const</span> newArray <span class="token operator">=</span> array<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">Infinity</span><span class="token punctuation">)</span> <span class="token comment">// kết qủa sẽ trả về tương tự như ví dụ thứ 2 nhé</span> |
2. Sử dụng thuật toán đệ quy
Nhắc đến thuật toán đệ quy là bản thân mình lại nhớ về những ngày đầu nhập môn tin học của năm 1 đại học, chắc hẳn những bạn nào học ngành CNTT thì không còn xa lạ gì đúng không nào. Cùng mình ôn lại chút qua demo bên dưới nhé:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token keyword">const</span> <span class="token function-variable function">getFlatten</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">getFlatten</span><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> result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">return</span> result <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">getFlatten</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span><span class="token punctuation">)</span> |
Kết quả trả về:
Không quá khó đúng không nào. Chúng ta cùng đi tiếp cách khác xem như nào nhé.
3. Sử dụng reduce javascript
Reduce có thế làm được rất nhiều điều, các bạn có thể tìm hiểu tại link này. Trong phạm vi bài viết này thì mình xin chia sẻ về cách làm phẳng array của reduce thôi nhé.
1 2 3 4 5 6 7 | <span class="token keyword">const</span> <span class="token function-variable function">getFlatten</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result<span class="token punctuation">,</span> value<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> result<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">getFlatten</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">:</span> value<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 punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">getFlatten</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span><span class="token punctuation">)</span> |
Kết quả trả về:
4. Tổng kết
Trên đây là những chia sẻ mình tìm hiểu được, qua những cách làm trên hy vọng bạn có thể chọn được cách làm mà bạn cảm thấy phù hợp với dự án của mình nhé.
Và nếu bạn có cách làm khác hãy chia sẻ bên dưới comment để mọi người cùng tham khảo nhé. Cảm ơn mọi người đã bớt chút thời gian để đọc những chia sẻ của mình.
