diff options
Diffstat (limited to 'files/uk/web/javascript/reference/global_objects/array/flat')
| -rw-r--r-- | files/uk/web/javascript/reference/global_objects/array/flat/index.html | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/global_objects/array/flat/index.html b/files/uk/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..ff20a8d058 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,150 @@ +--- +title: Array.prototype.flat() +slug: Web/JavaScript/Reference/Global_Objects/Array/flat +tags: + - Array + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>flat()</strong></code> створює новий масив який містить всі елементи вкладених масивів до вказаної глибини.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p> + + + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<em>[</em><var>depth]</var>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>depth</code> {{optional_inline}}</dt> + <dd>Глибина, що вказує до якого рівня вкладеності масивів має відбуватись вирівнювання. За замовчуванням 1.</dd> +</dl> + +<h3 id="Вихідне_значення">Вихідне значення</h3> + +<p>Новий масив, що містить елементи вкладених масивів.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Вирівнювання_вкладених_масивів">Вирівнювання вкладених масивів</h3> + +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); +// [1, 2, 3, 4] + +var arr2 = [1, 2, [3, 4, [5, 6]]]; +arr2.flat(); +// [1, 2, 3, 4, [5, 6]] + +var arr3 = [1, 2, [3, 4, [5, 6]]]; +arr3.flat(2); +// [1, 2, 3, 4, 5, 6] +</pre> + +<h3 id="Вирівнювання_і_прогалини_в_масиві">Вирівнювання і прогалини в масиві</h3> + +<p>Метод <code>flat</code> видаляє порожні елементи масивів:</p> + +<pre class="brush: js">var arr4 = [1, 2, , 4, 5]; +arr4.flat(); +// [1, 2, 4, 5] +</pre> + +<h2 id="Альтернатива">Альтернатива</h2> + +<h3 id="reduce_і_concat"><code>reduce</code> і <code>concat</code></h3> + +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); + +//вирівняти один рівень масиву +arr1.reduce((acc, val) => acc.concat(val), []); // [1, 2, 3, 4] + +//або +const flatSingle = arr => [].concat(...arr);</pre> + +<pre class="brush: js">//щоб здійснити глибоке вирівнювання, використовуйте рекурсію з reduce і concat +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; + +function flattenDeep(arr1) { + return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); +} +flattenDeep(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] +</pre> + +<pre class="brush: js">//глибоке вирівнювання без рекурсії, використовуючи stack +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; +function flatten(input) { + const stack = [...input]; + const res = []; + while (stack.length) { + // викидаємо значення зі стеку + const next = stack.pop(); + if (Array.isArray(next)) { + // додаємо елементи масиву, не змінюючи вхідного масиву + stack.push(...next); + } else { + res.push(next); + } + } + //перевертаємо масив, щоб порядок сортування відповідав вхідному + return res.reverse(); +} +flatten(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]</pre> + +<pre class="brush: js">//глибоке вирівнювання з рекурсією +function flatten(array) { + var flattend = []; + (function flat(array) { + array.forEach(function(el) { + if (Array.isArray(el)) flat(el); + else flattend.push(el); + }); + })(array); + return flattend; +}</pre> + +<div class="hidden"> +<p>Будь ласка, не додавайте поліфіли в цю статтю. За довідкою дивіться: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></td> + <td>Finished (4)</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flat")}}</p> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Array.prototype.flatMap()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> |