Обновление Array.prototype.filter() (#2773)

* Обновление Array.prototype.filter()

* Apply suggestions from code review

Co-authored-by: Sasha Sushko <sushko@outlook.com>

Co-authored-by: Sasha Sushko <sushko@outlook.com>

2 files changed, 241 insertions, 300 deletions

diff --git a/files/ru/web/javascript/reference/global_objects/array/filter/index.html b/files/ru/web/javascript/reference/global_objects/array/filter/index.html
deleted file mode 100644
index 2ed5099007..0000000000
--- a/files/ru/web/javascript/reference/global_objects/array/filter/index.html
+++ /dev/null
@@ -1,300 +0,0 @@
----
-title: Array.prototype.filter()
-slug: Web/JavaScript/Reference/Global_Objects/Array/filter
-tags:
-  - Array
-  - ECMAScript5
-  - JavaScript
-  - Method
-  - Prototype
-  - Reference
-  - filter
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter
----
-<div>{{JSRef}}</div>
-
-<p>Метод <code><strong>filter()</strong></code> создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div>
-
-<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.</p>
-
-<h2 id="Syntax">Синтаксис</h2>
-
-<pre class="brush: js">let <var>newArray</var> = <var>arr</var>.filter(<var>callback</var>(<var>element</var>[, <var>index</var>, [<var>array</var>]])[, <var>thisArg</var>])
-</pre>
-
-<h3 id="Parameters">Параметры</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>Функция, которая будет вызвана для каждого элемента массива. Если функция возвращает <code>true</code>, то элемент остаётся в массиве, если <code>false</code>, то удаляется.</dd>
- <dd>В функцию будет передано три аргумента:</dd>
- <dd>
- <dl>
-  <dt><code>element</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>Вернётся новый массив с элементами, которые проходят тест, то есть <code>callback</code> вернёт <code>true</code>. Если ни один элемент не пройдёт тест, то будет возвращён пустой массив.</p>
-
-<h2 id="Description">Описание</h2>
-
-<p>Метод <code>filter()</code> вызывает переданную функцию <code>callback</code> один раз для каждого элемента, присутствующего в массиве, и конструирует новый массив со всеми значениями, для которых функция <code>callback</code> вернула <code>true</code> или {{Glossary('Truthy', 'значение, становящееся true при приведении в boolean')}}. Функция <code>callback</code> вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались. Элементы массива, не прошедшие проверку функцией <code>callback</code>, просто пропускаются и не включаются в новый массив.</p>
-
-<p>Функция <code>callback</code> вызывается с тремя аргументами:</p>
-
-<ol>
- <li>значение элемента;</li>
- <li>индекс элемента;</li>
- <li>массив, по которому осуществляется проход.</li>
-</ol>
-
-<p>Если в метод <code>filter()</code> был передан параметр <code>thisArg</code>, при вызове <code>callback</code> он будет использоваться в качестве значения <code>this</code>. В противном случае, в качестве значения <code>this</code> будет использоваться значение <code>{{jsxref("Global_Objects/undefined", "undefined")}}</code>. В конечном итоге, значение <code>this</code>, наблюдаемое из функции <code>callback</code>, определяется согласно {{jsxref('Operators/this', 'обычным правилам определения <code>this</code>, видимого из функции')}}.</p>
-
-<p>Метод <code>filter()</code> не изменяет массив, для которого он был вызван.</p>
-
-<p>Диапазон элементов, обрабатываемых методом <code>filter()</code>, устанавливается до первого вызова функции <code>callback</code>. Элементы, добавленные в массив после начала выполнения метода <code>filter()</code>, не будут посещены функцией <code>callback</code>. Если существующие элементы массива изменятся, значения, переданные в функцию <code>callback</code>, будут значениями на тот момент времени, когда метод <code>filter()</code> посетит их; удалённые элементы посещены не будут.</p>
-
-<h2 id="Examples">Примеры</h2>
-
-<h3 id="Filtering_out_all_small_values">Отфильтровывание всех маленьких значений</h3>
-
-<p>Следующий пример использует <code>filter()</code> для создания отфильтрованного массива, все элементы которого больше или равны 10, а все меньшие 10 удалены.</p>
-
-<pre class="brush: js">function isBigEnough(value) {
-  return value &gt;= 10;
-}
-
-let filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
-// массив filtered равен [12, 130, 44]
-</pre>
-
-<h3 id="Find_all_prime_numbers_in_an_array">Найти все простые числа в массиве</h3>
-
-<p>Следующий пример возвращает все простые числа в массиве:</p>
-
-<pre><code>let array = [4, 6, 8, 9, 12, 53, -17, 2, 5, 7, 31, 97, -1, 17];
-
-function isPrime(num) {
-    if (num &lt;= 1)
-        return false;
-    else if (num === 2)
-        return true;
-    else {
-        for (let i = 2; i &lt; num; i++)
-            if (num % i === 0)
-                return false;
-        return true;
-    }
-}
-
-console.log(array.filter(isPrime));   // [53, 2, 5, 7, 31, 97, 17]</code></pre>
-
-<h3 id="Filtering_invalid_entries_from_JSON">Фильтрация неверных записей в JSON</h3>
-
-<p>В следующем примере метод <code>filter()</code> используется для создания отфильтрованного объекта JSON, все элементы которого содержат ненулевое числовое поле <code>id</code>.</p>
-
-<pre class="brush: js">var arr = [
-    { id: 15 },
-    { id: -1 },
-    { id: 0 },
-    { id: 3 },
-    { id: 12.2 },
-    { },
-    { id: null },
-    { id: NaN },
-    { id: 'undefined' }
-];
-
-var invalidEntries = 0;
-
-function isNumber(obj) {
-    return obj!== undefined &amp;&amp; typeof(obj) === 'number' &amp;&amp; !isNaN(obj);
-}
-
-function filterByID(item) {
-    if (isNumber(item.id) &amp;&amp; item.id !== 0) {
-        return true;
-    }
-    invalidEntries++;
-    return false;
-}
-
-var arrByID = arr.filter(filterByID);
-
-console.log('Отфильтрованный массив\n', arrByID);
-// Filtered Array
-// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
-
-console.log('Количество ошибочных записей = ', invalidEntries);
-// Number of Invalid Entries = 5
-
-</pre>
-
-<h3 id="Поиск_в_массиве">Поиск в массиве</h3>
-
-<p>В следующем примере <code>filter()</code> используется для фильтрации содержимого массива на основе входных данных.</p>
-
-<pre class="brush: js">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
-
-/**
- * Элементы массива фильтруется на основе критериев поиска (query)
-*/
-function filterItems(query) {
-  return fruits.filter(function(el) {
-      return el.toLowerCase().indexOf(query.toLowerCase()) &gt; -1;
-  })
-}
-
-console.log(filterItems('ap')); // ['apple', 'grapes']
-console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre>
-
-<h3 id="ES2015_implementation">ES2015 реализация</h3>
-
-<pre class="brush: js">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
-
-/**
- * Элементы массива фильтруется на основе критериев поиска (query)
- */
-const filterItems = (query) =&gt; {
-  return fruits.filter((el) =&gt;
-    el.toLowerCase().indexOf(query.toLowerCase()) &gt; -1
-  );
-}
-
-console.log(filterItems('ap')); // ['apple', 'grapes']
-console.log(filterItems('an')); // ['banana', 'mango', 'orange']
-
-</pre>
-
-<h3 id="Affecting_Initial_Array_modifying_appending_and_deleting">Влияние на начальный массив (изменение, добавление и удаление)</h3>
-
-<p>В следующих примерах проверяется поведение метода <code>filter</code> при изменении массива.</p>
-
-<pre class="brush: js">// Изменение всех элементов
-let words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present']
-
-const modifiedWords = words.filter( (word, index, arr) =&gt; {
-  arr[index+1] +=' extra'
-  return word.length &lt; 6
-})
-
-console.log(modifiedWords)
-// Обратите внимание, что есть три слова длиной менее 6, но так как они были изменены,
-// возвращается одно слово ['spray']
-
-// Добавление новых элементов
-words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present']
-const appendedWords = words.filter( (word, index, arr) =&gt; {
-  arr.push('new')
-  return word.length &lt; 6
-})
-
-console.log(appendedWords)
-// Только три слова удовлетворяют условию, хотя `words` теперь имеет куда больше слов,
-// длинной меньше 6 символов: ['spray', 'limit', 'elite']
-
-// Удаление элементов
-words = ['spray', 'limit', 'exuberant', 'destruction', 'elite', 'present']
-const deleteWords = words.filter( (word, index, arr) =&gt; {
-  arr.pop()
-  return word.length &lt; 6
-})
-
-console.log(deleteWords)
-// Заметьте, что 'elite' не получено, так как удалено из `words` до того,
-// как filter смог получить его: ['spray', 'limit']</pre>
-
-<h2 id="Polyfill">Полифил</h2>
-
-<p>Метод <code>filter()</code> был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать <code>filter()</code> в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 5-го издания; он предполагает, что <code>fn.call</code> вычисляется в оригинальное значение {{jsxref("Function.prototype.call()")}} и что {{jsxref("Array.prototype.push()")}} содержит своё оригинальное значение.</p>
-
-<pre class="brush: js">if (!Array.prototype.filter) {
-  Array.prototype.filter = function(fun/*, thisArg*/) {
-    'use strict';
-
-    if (this === void 0 || this === null) {
-      throw new TypeError();
-    }
-
-    var t = Object(this);
-    var len = t.length &gt;&gt;&gt; 0;
-    if (typeof fun !== 'function') {
-      throw new TypeError();
-    }
-
-    var res = [];
-    var thisArg = arguments.length &gt;= 2 ? arguments[1] : void 0;
-    for (var i = 0; i &lt; len; i++) {
-      if (i in t) {
-        var val = t[i];
-
-        // ПРИМЕЧАНИЕ: Технически, здесь должен быть Object.defineProperty на
-        //             следующий индекс, поскольку push может зависеть от
-        //             свойств на Object.prototype и Array.prototype.
-        //             Но этот метод новый и коллизии должны быть редкими,
-        //             так что используем более совместимую альтернативу.
-        if (fun.call(thisArg, val, i, t)) {
-          res.push(val);
-        }
-      }
-    }
-
-    return res;
-  };
-}
-</pre>
-
-<h2 id="Specifications">Спецификации</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Спецификация</th>
-   <th scope="col">Статус</th>
-   <th scope="col">Комментарии</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Изначальное определение. Реализована в JavaScript 1.6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Совместимость с браузерами</h2>
-
-<div>
-<p>{{Compat("javascript.builtins.Array.filter")}}</p>
-</div>
-
-<h2 id="See_also">Смотрите также</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
- <li>{{jsxref("Array.prototype.every()")}}</li>
- <li>{{jsxref("Array.prototype.some()")}}</li>
- <li>{{jsxref("Array.prototype.reduce()")}}</li>
-</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/filter/index.md b/files/ru/web/javascript/reference/global_objects/array/filter/index.md
new file mode 100644
index 0000000000..94bc6b25cf
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/filter/index.md
@@ -0,0 +1,241 @@
+---
+title: Array.prototype.filter()
+slug: Web/JavaScript/Reference/Global_Objects/Array/filter
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter
+---
+{{JSRef}}
+
+Метод **`filter()`** **создаёт новый массив со всеми элементами**, прошедшими проверку, задаваемую в передаваемой функции.
+
+{{EmbedInteractiveExample("pages/js/array-filter.html")}}
+
+## Синтаксис
+
+```js
+// Стрелочная функция
+filter((element) => { ... } )
+filter((element, index) => { ... } )
+filter((element, index, array) => { ... } )
+
+// Колбэк-функция
+filter(callbackFn)
+filter(callbackFn, thisArg)
+
+// Встроенная колбэк-функция
+filter(function callbackFn(element) { ... })
+filter(function callbackFn(element, index) { ... })
+filter(function callbackFn(element, index, array){ ... })
+filter(function callbackFn(element, index, array) { ... }, thisArg)
+```
+
+### Параметры
+
+- `callbackFn`
+
+  - : Функция-предикат, которая будет вызвана для проверки каждого элемента массива. Если функция возвращает `true`, то элемент остаётся в массиве, если `false`, то удаляется.
+
+    Принимает три аргумента
+
+    - `element`
+      - : Текущий обрабатываемый элемент в массиве.
+    - `index`{{optional_inline}}
+      - : Индекс текущего обрабатываемого элемента в массиве.
+    - `array`{{optional_inline}}
+      - : Обрабатываемый массив, на котором был вызван метод `filter()`.
+
+- `thisArg`{{optional_inline}}
+  - : Значение, используемое в качестве `this` при вызове колбэк-функции `callbackFn`.
+
+### Возвращаемое значение
+
+Вернётся новый массив с элементами, которые прошли проверку. Если ни один элемент не прошёл проверку, то будет возвращён пустой массив.
+
+## Описание
+
+Метод `filter()` вызывает переданную функцию `callback` один раз для каждого элемента, присутствующего в массиве, и создаёт новый массив со всеми значениями, для которых функция `callback` вернула [значение, которое может приведено к `true`](/ru/docs/Glossary/Truthy). Функция `callback` вызывается только для индексов массива с уже определёнными значениями; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались. Элементы массива, не прошедшие проверку функцией `callback`, просто пропускаются и не включаются в новый массив.
+
+Функция `callback` вызывается с тремя аргументами:
+
+1.  значение элемента;
+2.  индекс элемента;
+3.  массив, по которому осуществляется проход.
+
+Если в метод `filter()` был передан параметр `thisArg`, при вызове `callback` он будет использоваться в качестве значения `this`. В противном случае в качестве значения `this` будет использоваться значение `undefined`. В конечном итоге, значение `this`, наблюдаемое из функции `callback`, определяется согласно [обычным правилам определения `this`](/en-US/docs/Web/JavaScript/Reference/Operators/this).
+
+Метод `filter()` не изменяет массив, для которого он был вызван.
+
+Элементы массива, обрабатываемые методом `filter()`, устанавливается до первого вызова функции `callback`. Элементы, добавленные в массив после начала выполнения метода `filter()`, либо изменённые в процессе выполнения, не будут обработаны функцией `callback`. Соответствующим образом, если существующие элементы удаляются из массива, они также не будут обработаны
+
+**Предупреждение:** одновременное изменение элементов, описанное в предыдущем параграфе, часто приводит к труднопонимаемому коду, поэтому не рекомендуется делать это (за исключением особых случаев).
+
+## Примеры
+
+### Фильтрация всех маленьких значений
+
+Следующий пример использует `filter()` для создания отфильтрованного массива, все элементы которого больше или равны 10, а все меньшие 10 удалены.
+
+```js
+function isBigEnough(value) {
+  return value >= 10;
+}
+
+let filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// массив filtered теперь содержит [12, 130, 44]
+```
+
+### Найти все простые числа в массиве
+
+Следующий пример возвращает все простые числа в массиве:
+
+```js
+const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
+
+function isPrime(num) {
+  for (let i = 2; num > i; i++) {
+    if (num % i == 0) {
+      return false;
+    }
+  }
+  return num > 1;
+}
+
+console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]
+```
+
+### Фильтрация неверных записей в JSON
+
+В следующем примере метод `filter()` используется для создания отфильтрованного JSON-объекта, все элементы которого содержат ненулевое числовое поле `id`.
+
+```js
+let arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+]
+
+let invalidEntries = 0
+
+function filterByID(item) {
+  if (Number.isFinite(item.id) && item.id !== 0) {
+    return true
+  }
+  invalidEntries++
+  return false;
+}
+
+let arrByID = arr.filter(filterByID)
+
+console.log('Отфильтрованный массив\n', arrByID)
+// Отфильтрованный массив
+// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Количество некорректных элементов = ', invalidEntries)
+// Количество некорректных элементов = 5
+```
+
+### Поиск в массиве
+
+В следующем примере `filter()` используется для фильтрации содержимого массива на основе входных данных.
+
+```js
+var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Элементы массива фильтруется на основе критериев поиска (query)
+*/
+function filterItems(query) {
+  return fruits.filter(function(el) {
+      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
+  })
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']
+```
+
+#### Реализация с использованием ES2015
+
+```js
+const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Элементы массива фильтруется на основе критериев поиска (query)
+ */
+const filterItems = (arr, query) => {
+  return arr.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) !== -1)
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']
+```
+
+### Модификация изначального массива (изменение, добавление и удаление)
+
+В следующих примерах проверяется поведение метода `filter` при изменении массива.
+
+```js
+// Изменение всех элементов
+let words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present']
+
+const modifiedWords = words.filter( (word, index, arr) => {
+  arr[index+1] +=' extra'
+  return word.length < 6
+})
+
+console.log(modifiedWords)
+// Обратите внимание, что есть три слова длиной менее 6, но так как они были изменены,
+// возвращается одно слово ['spray']
+
+// Добавление новых элементов
+words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present']
+const appendedWords = words.filter( (word, index, arr) => {
+  arr.push('new')
+  return word.length < 6
+})
+
+console.log(appendedWords)
+// Только три слова удовлетворяют условию, хотя `words` теперь имеет куда больше слов,
+// длинной меньше 6 символов: ['spray', 'limit', 'elite']
+
+// Удаление элементов
+words = ['spray', 'limit', 'exuberant', 'destruction', 'elite', 'present']
+const deleteWords = words.filter( (word, index, arr) => {
+  arr.pop()
+  return word.length < 6
+})
+
+console.log(deleteWords)
+// Заметьте, что 'elite' не получено, так как удалено из `words` до того,
+// как filter смог получить его: ['spray', 'limit']
+```
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- Полифил `Array.prototype.filter` в библиотеке [`core-js`](https://github.com/zloirock/core-js#ecmascript-array)
+- {{jsxref("Array.prototype.forEach()")}}
+- {{jsxref("Array.prototype.every()")}}
+- {{jsxref("Array.prototype.some()")}}
+- {{jsxref("Array.prototype.reduce()")}}
+- {{jsxref("Array.prototype.find()")}}