Hello everyone, in this post, I would like to share some knowledge about how to flatten
arrayinjavascript. Hope to be of some help to those who are in need of learning. Let’s get started.
Suppose I have the following data returned:
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> |
And now the requirement is to get the following result:
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> |
So what am I going to do now? The answer is to read through this article to see if there are any good treatment.
1. Use flat () ES6
Flat() will return a new array with the elements of the array in it.
Syntax:
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> |
Results returned:
So still can not meet the requirements of the beginning of my article. Since our original array has 2 sub arrays, let’s try changing a bit like below:
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, so it was exactly as I wanted, but with the unknown data how many sub arrays like the above array , it’s hard to handle, right? Don’t worry because ES6 also gave us a parameter that’s Infinity (not under limit):
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. Use recursive algorithm
Referring to the recursive algorithm, I myself remember about the first days of computerization in college, surely those who study CNTT are no longer strangers, right. Let’s review a little through the demo below:
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> |
Results returned:
Not too difficult, right. Let’s go to another way to see how offline.
3. Use reduce javascript
Reduce can do a lot of things, you can find out at this link . In the scope of this article, I would like to share about how to flatten reduce array .
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> |
Results returned:
4. Summary
Above are the shares I have learned, through the above ways, hopefully you can choose the way that you feel suitable for your project.
And if you have another way to do it, please share it below the comment for everyone to see. Thank you everyone for taking a moment to read your comments.
