diff options
| -rw-r--r-- | files/ru/web/javascript/reference/global_objects/array/filter/index.html | 300 | ||||
| -rw-r--r-- | files/ru/web/javascript/reference/global_objects/array/filter/index.md | 241 |
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 >= 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 <= 1) - return false; - else if (num === 2) - return true; - else { - for (let i = 2; i < 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 && typeof(obj) === 'number' && !isNaN(obj); -} - -function filterByID(item) { - if (isNumber(item.id) && 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()) > -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) => { - return fruits.filter((el) => - el.toLowerCase().indexOf(query.toLowerCase()) > -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) => { - 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']</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 >>> 0; - if (typeof fun !== 'function') { - throw new TypeError(); - } - - var res = []; - var thisArg = arguments.length >= 2 ? arguments[1] : void 0; - for (var i = 0; i < 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()")}} |