Như các bạn đã biết, chúng ta có thể convert một object
thành 1 array
bằng cách xử dụng Object.entries()
hoặc Object.values()
. Tuy nhiên rất ít bạn để ý rằng js cung cấp sẵn cho chúng ta phương thức để convert array → object, Object.fromEntries()
Cú pháp của Object.fromEntries()
khá là đơn giản.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | <span class="token keyword">const</span> keyValuePair <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token string">'cow'</span><span class="token punctuation">,</span> <span class="token string">'🐮'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'pig'</span><span class="token punctuation">,</span> <span class="token string">'🐷'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> Object<span class="token punctuation">.</span><span class="token function">fromEntries</span><span class="token punctuation">(</span>keyValuePair<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { cow: '🐮', pig: '🐷' }</span> ## Object<span class="token punctuation">.</span>fromEntries Như các bạn đã biết<span class="token punctuation">,</span> <span class="token number">1</span> object sẽ chứa các cặp <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">key</span><span class="token template-punctuation string">`</span></span> <span class="token operator">-</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">value</span><span class="token template-punctuation string">`</span></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">js const object = { key: 'value', }; Vậy nên, để convert một kiểu giá trị thành một object, bạn cần truyền vào một giá trị có </span><span class="token template-punctuation string">`</span></span>format<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> tương đương với </span><span class="token template-punctuation string">`</span></span>key<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> - </span><span class="token template-punctuation string">`</span></span>value<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> Đáp ứng với kiểu format </span><span class="token template-punctuation string">`</span></span>key<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> - </span><span class="token template-punctuation string">`</span></span>value<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">, chúng ta có 2 kiểu dữ liệu đáp ứng được: - </span><span class="token template-punctuation string">`</span></span>Nested Array<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> với các cặp </span><span class="token template-punctuation string">`</span></span>key<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> - </span><span class="token template-punctuation string">`</span></span>value<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> - Map objects ## Array → Object Dưới đây là ví dụ về convert </span><span class="token template-punctuation string">`</span></span>Nested Array<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> với các cặp </span><span class="token template-punctuation string">`</span></span>key<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> - </span><span class="token template-punctuation string">`</span></span>value<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> thành </span><span class="token template-punctuation string">`</span></span>Object<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> </span><span class="token template-punctuation string">`</span></span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span>js <span class="token keyword">let</span> nestedArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token string">'key 1'</span><span class="token punctuation">,</span> <span class="token string">'value 1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'key 2'</span><span class="token punctuation">,</span> <span class="token string">'value 2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> Object<span class="token punctuation">.</span><span class="token function">fromEntries</span><span class="token punctuation">(</span>nestedArray<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { key 1: "value 1", key 2: "value 2"}</span> <span class="token comment">// Thừa dữ liệu</span> <span class="token keyword">let</span> nestedArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token string">'key 1'</span><span class="token punctuation">,</span> <span class="token string">'value 1'</span><span class="token punctuation">,</span> <span class="token string">'ext'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'key 2'</span><span class="token punctuation">,</span> <span class="token string">'value 2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> Object<span class="token punctuation">.</span><span class="token function">fromEntries</span><span class="token punctuation">(</span>nestedArray<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { key 1: "value 1", key 2: "value 2"}</span> <span class="token comment">// Thiếu dữ liệu</span> <span class="token keyword">let</span> nestedArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token string">'key 1'</span><span class="token punctuation">,</span> <span class="token string">'value 1'</span><span class="token punctuation">,</span> <span class="token string">'ext'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'key 2'</span><span class="token punctuation">,</span> <span class="token string">'value 2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'key'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> Object<span class="token punctuation">.</span><span class="token function">fromEntries</span><span class="token punctuation">(</span>nestedArray<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {key 1: "value 1", key 2: "value 2", key: undefined}</span> ## Map → Object <span class="token constant">T</span>ừ version <span class="token constant">ES6</span><span class="token punctuation">,</span> chúng ta có thêm <span class="token number">1</span> kiểu dữ liệu gọi là <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">map</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> nó <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">rất tương tự</span><span class="token template-punctuation string">`</span></span> với object <span class="token operator">></span> <span class="token constant">TC39</span><span class="token operator">:</span> Map objects are collections <span class="token keyword">of</span> key<span class="token operator">/</span>value pairs where both the keys and values may be arbitrary ECMAScript language values<span class="token punctuation">.</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">js // Using the constructor const map = new Map([ ['key 1', 'value 1'], ['key 2', 'value 2'], ]); // OR we can use the instance method, "set" const map = new Map(); map.set('key 1', 'value 1'); map.set('key 2', 'value 2'); // RESULT // Map(2) {"key 1" => "value 1", "key 2" => "value 2"} Object.fromEntries(map); // { key 1: "value 1", key 2: "value 2"} ## TypeError for Object.fromEntries Khi bạn truyền một kiểu giá trị không có </span><span class="token template-punctuation string">`</span></span>format<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> key-value thì nó sẽ trả về 1 error </span><span class="token template-punctuation string">`</span></span>❌ Uncaught TypeError<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> | Type | | |---|---| | Null | Object.fromEntries(null) | | Boolean | Object.fromEntries(true) | | Number | Object.fromEntries(100) | | String | Object.fromEntries("hi") | | Object | Object.fromEntries({key: "value"}) | | Single Value Array | Object.fromEntries([1,2,3]) | ## Object.fromEntries vs Object.entries Dự vào tên của 2 phương thức này, chúng ta cũng có thể thấy cách hoạt động của 2 thằng </span><span class="token template-punctuation string">`</span></span>Object<span class="token punctuation">.</span>fromEntries<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> và </span><span class="token template-punctuation string">`</span></span>Object<span class="token punctuation">.</span>entries<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> hoàn toàn trái ngược. </span><span class="token template-punctuation string">`</span></span>Object<span class="token punctuation">.</span>entries<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> sẽ chuyển đổi object và trả lại cho chúng ta một </span><span class="token template-punctuation string">`</span></span>nested array<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> mới với các cặp </span><span class="token template-punctuation string">`</span></span>key<span class="token operator">-</span>value<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">. Và </span><span class="token template-punctuation string">`</span></span>Object<span class="token punctuation">.</span>fromEntries<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> sẽ chuyển nó trở lại một </span><span class="token template-punctuation string">`</span></span>object<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">. </span><span class="token template-punctuation string">`</span></span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span>js <span class="token keyword">const</span> object <span class="token operator">=</span> <span class="token punctuation">{</span> key1<span class="token operator">:</span> <span class="token string">'value1'</span><span class="token punctuation">,</span> key2<span class="token operator">:</span> <span class="token string">'value2'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> array <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>object<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ ["key1", "value1"], ["key2", "value2"] ]</span> Object<span class="token punctuation">.</span><span class="token function">fromEntries</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { key1: 'value1', key2: 'value2' }</span> ## Motivating examples ### Object<span class="token operator">-</span>to<span class="token operator">-</span>object transformations <span class="token constant">N</span>ếu bạn đã quen với và muốn sử dụng các phương thức của array như <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">filter</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">map</span><span class="token template-punctuation string">`</span></span> mà đầu vào của bạn đang là <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">object</span><span class="token template-punctuation string">`</span></span> thì sao<span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">js const obj = { abc: 1, def: 2, ghij: 3 }; const res = Object.fromEntries( Object.entries(obj) .filter(([ key, val ]) => key.length === 3) .map(([ key, val ]) => [ key, val * 2 ]) ); // res is { 'abc': 2, 'def': 4 } ### Object from existing collection </span><span class="token template-punctuation string">`</span></span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span>js <span class="token keyword">const</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token punctuation">[</span> <span class="token string">'a'</span><span class="token punctuation">,</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 string">'b'</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 punctuation">[</span> <span class="token string">'c'</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 punctuation">;</span> <span class="token comment">// Map(3) {"a" => 1, "b" => 2, "c" => 3}</span> <span class="token keyword">const</span> obj <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">fromEntries</span><span class="token punctuation">(</span>map<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {a: 1, b: 2, c: 3}</span> <span class="token comment">// compare existing functionality: new Map(Object.entries(obj))</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// Map(3) {"a" => 1, "b" => 2, "c" => 3}</span> <span class="token constant">M</span>ột ứng dụng khá hay của <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Object.fromEntries</span><span class="token template-punctuation string">`</span></span> vào việc parse các param trên url <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">js const query = Object.fromEntries(new URLSearchParams('foo=bar&baz=qux')); // {foo: "bar", baz: "qux"} ## Alternative Solutions to Convert Array → Object </span><span class="token template-punctuation string">`</span></span>Object<span class="token punctuation">.</span>fromEntries<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> khá là mới, nó được được giới thiệu năm 2019. Vậy trước khi có </span><span class="token template-punctuation string">`</span></span>Object<span class="token punctuation">.</span>fromEntries<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">, các bạn convert Array → Object như thế nào? Dưới đây là 1 cách đơn giản và thường được dùng để convert </span><span class="token template-punctuation string">`</span></span>map<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">, </span><span class="token template-punctuation string">`</span></span>array<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> thành một </span><span class="token template-punctuation string">`</span></span>object<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> </span><span class="token template-punctuation string">`</span></span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span>js <span class="token keyword">const</span> array <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token string">'key1'</span><span class="token punctuation">,</span> <span class="token string">'value1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'key2'</span><span class="token punctuation">,</span> <span class="token string">'value2'</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> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token string">'key1'</span><span class="token punctuation">,</span> <span class="token string">'value1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'key2'</span><span class="token punctuation">,</span> <span class="token string">'value2'</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">function</span> <span class="token function">toObject</span><span class="token punctuation">(</span><span class="token parameter">pairs</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>pairs<span class="token punctuation">)</span><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">acc<span class="token punctuation">,</span> <span class="token punctuation">[</span>key<span class="token punctuation">,</span> value<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>acc<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key<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><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">toObject</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { key1: 'value1', key2: 'value2' }</span> <span class="token function">toObject</span><span class="token punctuation">(</span>map<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { key1: 'value1', key2: 'value2' }</span> |