path: root/files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html

---
title: Array.prototype.filter()
slug: Web/JavaScript/Reference/Global_Objects/Array/filtro
tags:
  - Array
  - ECMAScript 5
  - JavaScript
  - Prototype
  - metodo
translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter
---
<div>{{JSRef}}</div>

<p>O método <code><strong>filter()</strong></code> cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.</p>

<pre class="brush: js">function isBigEnough(value) {
  return value &gt;= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtrado é [12, 130, 44]
</pre>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="syntaxbox"><code><var>var newArray = arr</var>.filter(<var>callback</var>[, <var>thisArg</var>])</code></pre>

<h3 id="Parâmetros">Parâmetros</h3>

<dl>
 <dt><code>callback</code></dt>
 <dd>Função é um predicado, para testar cada elemento do array. Retorna <code>true</code> para manter o elemento, <code>false</code> caso contrário, recebendo três argumentos:</dd>
 <dd>
 <dl>
  <dt><code>element</code></dt>
  <dd>
  <p>O elemento que está sendo processado no array.</p>
  </dd>
  <dt><code>index</code></dt>
  <dd>O índice do elemento atual que está sendo processado no array.</dd>
  <dt><code>array</code></dt>
  <dd>O array para qual <code>filter</code> foi chamada.</dd>
 </dl>
 </dd>
 <dt><code>thisArg {{Optional_inline}}</code></dt>
 <dd>Opcional. Valor a ser usado como <code>this</code> durante a execução do <code>callback</code>.</dd>
</dl>

<h3 id="Valor_de_retorno">Valor de retorno</h3>

<p>Um novo array com os elementos que passaram no teste.</p>

<h2 id="Descrição">Descrição</h2>

<p><code>filter()</code> chama a função callback fornecida, uma vez para cada elemento do array, e constrói um novo array com todos os valores para os quais o <code>callback</code> retornou o valor <code>true</code> ou  <a href="/en-US/docs/Glossary/Truthy">um valor que seja convertido para true</a>. O <code>callback</code> é chamado apenas para índices do array que possuem valores atribuídos; Ele não é invocado para índices que foram excluídos ou para aqueles que não tiveram valor atribuído. Elementos do array que não passaram no teste do <code>callback</code> são simplesmente ignorados, e não são incluídos no novo array.</p>

<p><code>callback</code> é invocado com estes três argumentos:</p>

<ol>
 <li>o valor do elemento</li>
 <li>o índice do elemento</li>
 <li>o objeto do array a ser preenchido</li>
</ol>

<p>Se o parâmetro <code>thisArg</code> for provido para o filter, ele será passado para o callback<code> quando invocado</code>, para ser usado como o valor do this. Caso contrário, será passado <code>undefined</code> como o valor de <code>this</code>. O valor do <code>this</code> finalmente observado pela função de <code>callback</code> é determinado de acordo com <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">a regra que define o valor do <code>this</code> geralmente visto por uma função</a>.</p>

<p><code>filter()</code> não altera o <code>array</code> a partir da qual foi invocado.</p>

<p>O intervalo de elementos processados pela função <code>filter()</code> é definido antes da invocação do primeiro callback. Elementos que forem adicionados ao array depois da invocação do <code>filter()</code> não serão visitados pelo <code>callback</code>. Se elementos existentes no array forem alterados ou deletados, os valores deles que serão passados para o callback são os que eles tiverem quando o  <code>filter()</code> visitá-los; Elementos que forem deletados não são visitados.</p>

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Exemplo_Filtrando_todos_os_valores_pequenos">Exemplo: Filtrando todos os valores pequenos</h3>

<p>Os exemplos a seguir usam <code>filter()</code> para criar um <code>array</code> filtrado em que todos os elementos com valores menores que 10 são removidos.</p>

<pre class="brush: js">function isBigEnough(value) {
  return value &gt;= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
</pre>

<h3 id="Exemplo_Filtrando_entradas_inválidas_para_JSON">Exemplo: Filtrando entradas inválidas para JSON</h3>

<p>O exemplo a seguir usa <code>filter()</code> para criar um <code>JSON</code> filtrado com todos seus elementos diferentes de zero, e <code>id</code> numérico.</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 filterByID(obj) {
  if ('id' in obj &amp;&amp; typeof(obj.id) === 'number' &amp;&amp; !isNaN(obj.id)) {
    return true;
  } else {
    invalidEntries++;
    return false;
  }
}

var arrByID = arr.filter(filterByID);

console.log('Filtered Array\n', arrByID);
// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries);
// Number of Invalid Entries = 4
</pre>

<h3 id="Procurando_em_um_array">Procurando em um array</h3>

<p>O exemplo a seguir usa <code>filter()</code> para filtrar o conteúdo de um array baseado em um critério de busca</p>

<pre class="brush: js">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (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="Implementação_ES2015">Implementação ES2015</h3>

<pre class="brush: js">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (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>

<h2 id="Polyfill">Polyfill</h2>

<p><code>filter()</code> foi adicionado ao padrão ECMA-262 na 5ª edição; assim como pode não estar presente em todas as implementações do padrão. Você pode trabalhar com isso adicionando o seguinte código no início de seus scripts, permitindo o uso do <code>filter()</code> na implementação ECMA-262 que não tem suporte nativo. Esse algoritmo é exatamente aquele especificado na 5ª edição do ECMA-262, assumindo que <code>fn.call</code> veja o valor original de {{jsxref("Function.prototype.call()")}}, e que {{jsxref("Array.prototype.push()")}} tenha seu valor original.</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];

        // NOTE: Technically this should Object.defineProperty at
        //       the next index, as push can be affected by
        //       properties on Object.prototype and Array.prototype.
        //       But that method's new, and collisions should be
        //       rare, so use the more-compatible alternative.
        if (fun.call(thisArg, val, i, t)) {
          res.push(val);
        }
      }
    }

    return res;
  };
}
</pre>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Definição inicial. Implementada no JavaScript 1.6.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>

<div>{{Compat("javascript.builtins.Array.filter")}}</div>

<h2 id="Veja_também">Veja também</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>

<div id="link64_adl_tabid" style="display: none;">24</div>