diff options
Diffstat (limited to 'files/ru/web/javascript/reference/global_objects/array/flatmap')
| -rw-r--r-- | files/ru/web/javascript/reference/global_objects/array/flatmap/index.html | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/files/ru/web/javascript/reference/global_objects/array/flatmap/index.html b/files/ru/web/javascript/reference/global_objects/array/flatmap/index.html new file mode 100644 index 0000000000..4465a92711 --- /dev/null +++ b/files/ru/web/javascript/reference/global_objects/array/flatmap/index.html @@ -0,0 +1,126 @@ +--- +title: Array.prototype.flatMap() +slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap +--- +<div>{{JSRef}}</div> + +<p><code><font face="Verdana, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Метод </span></font><strong>flatMap()</strong></code> сначала применяет функцию к каждому элементу, а затем преобразует полученый результат в плоскую структуру и помещает в новый массив. Это идентично <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> функции, с последующим применением функции <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a> с параметром depth ( глубина ) равным 1, но <code>flatMap</code> часто бывает полезным, так как работает немного более эффективно.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p> + +<p class="hidden">Исходный код данного примера расположен в GitHub репозитории. Если вы хотите улучшить этот пример, вам нужно склонировать <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> внести в него измения и отправить их нам через PR ( pull request ).</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) { + // возращает элемент для new_array +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функция которая производит элементы нового массива, принимает три аргумента: + <dl> + <dt></dt> + <dt><code>currentValue</code></dt> + <dd>Текущий обрабатываемый элемент массива.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Индекс обрабатываемого элемента в массиве.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Массив по которому осуществляется обход.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Значение используемое в качестве <code>this</code> при вызове функции <code>callback</code>.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>Новый массив, каждый элемент которого является результатом выполнения функции callback и "поднят" на уровень 1.</p> + +<h2 id="Описание">Описание</h2> + +<p>Смотрите {{jsxref("Array.prototype.map()")}} для детального описания callback функции. Метод <code>flatMap</code> идентичен методу<span style="letter-spacing: -0.00333rem;"> </span><code style="letter-spacing: -0.00333rem;"><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code><span style="letter-spacing: -0.00333rem;"> с последующим вызовом</span><span style="letter-spacing: -0.00333rem;"> </span><code style="letter-spacing: -0.00333rem;"><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code><span style="letter-spacing: -0.00333rem;"> с параметром depth 1.</span></p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="map_и_flatMap"><code>map</code> и <code>flatMap</code></h3> + +<pre class="brush: js">let arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4]; + +arr1.map(</span></span></span></span></span>x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span> +// [[2], [4], [6], [8]] + +arr1.flatMap(x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>); +// [2, 4, 6, 8]</span></span></span></span></span> + +// выравнивается только один уровень +arr1.flatMap(x => [[x * 2]]); +// [[2], [4], [6], [8]] +</pre> + +<p>Хотя результат полученый в примере выше можно было получить используя просто map, ниже мы рассмотрим пример где <code>flatMap</code> является более эффективным.</p> + +<p>Давайте сгенерируем список слов из списка предложений.</p> + +<pre class="brush: js">let arr1 = ["it's Sunny in", "", "California"]; + +arr1.map(x => x.split(" ")); +// [["it's","Sunny","in"],[""],["California"]] + +arr1.flatMap(x => x.split(" ")<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>); +// ["it's","Sunny","in", "", "California"]</span></span></span></span></span></pre> + +<p>Обратите внимание, длина списка вывода может отличаться от длины списка ввода.</p> + +<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div> + +<h2 id="Альтернативное_решение">Альтернативное решение</h2> + +<h3 id="reduce_and_concat"><code>reduce</code> and <code>concat</code></h3> + +<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4]; +</span></span></span></span></span> +arr1.flatMap(x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span> +// is equivalent to +arr1.reduce((acc, x) => acc.concat([x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>), []);</span></span></span></span></span> +<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>// [2, 4, 6, 8]</span></span></span></span></span> +</pre> + +<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></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>{{SpecName('ES6', '#sec-array.prototype.flatmap', 'Array.prototype.flatMap')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div> +<div class="hidden">Таблица поддержки браузерами сгенерированна из представленных данных. Если вы хотите улучшить эти данные, пожалуйста преверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и пришлите на PR ( pull request ) с исправлениями.</div> + +<p>{{Compat("javascript.builtins.Array.flatMap")}}</p> +</div> + +<h2 id="См_так_же">См так же:</h2> + +<ul> + <li>{{jsxref("Array.prototype.flat()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> |