Adaptação do fork: (https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff)
Ao tentar explicar como o Javascript usa seu métodos para arrays, acabei reunindo esses conceitos. Espero que Seja util. Ficarei feliz com qualquer sugestão.
O Objet Array no Javascript tem muitos métodos construidos no seu prototype. Alguns deles modificam o proprio array passado. Felizmente, a maioria não, eles retonar um novo array inteiramente distinto. Uma vez que arrays são conceitualmente uma lista de itens, ajuda na clareza do código e sua manutenção a ponto de ser capas de operar de uma forma mais "funcional" . (Eu insisto em refrenciar um array como uma "Lista" - embora em algumas linguaguens de programação, Lista
é um tipo de dado nativo, mais em JS e nesse POST, estou me referindo ao conceito. Em todos os lugares que eu usar a palavra "lista" você pode assumir que eu estou falando de JS Array) Isso siginifica, para a execução de uma simples operação na Lista como um todo ("automagicamente"), ira retornar uma nova lista - Dessa forma fica muito mais simples de pensar tanto na antiga lista como na nova, o que elas contem, e o que aconteceu durante a operação.
Abaixo estão alguns desses métodos de iterate (iteração) - em outras palavras, que operam em toda a lista, um item de cada vez. quando eles são invocados, fornecem um callback function (função de retorno) - uma unica função que opera em um item de cada vez. Com base no método de Array que você escolhe, os callback obtém argumentos especificos, e pode ser esperado para retorno um certo tipo de valor - e (exceto para o forEach
) o valor retornado determina o valor final que sera retornado que abrange a operação de array. Embora a maioria dos métodos garantem a execução para cada item no array - para todos eles - alguns desses métodos podem parar a operação parcialmente; quando aplicável, isto é indicado abaixo.
Todos os métodos de array iteram no que é tradicionalmente chamado de "left to right"(esquerda pra direita) - mais precisamente (e menos etnocentricamente) a partir do index 0
, para index length - 1
- também chamado "start" to "end"(Inicio para o Fim). reduceRight
é uma execeção, porque ele intera no sentido reverso - partir do end
to start
(Fim para o Inicio).
forEach
:
- comportamento do callback: aqui esta um item. aqui você pode fazer qualquer coisa com ele, não importa o quê.
- argumentos recebidos:
item
,index
,list
- valor retornado: nada - em outras palavras,
undefined
- exemplo de uso:
[1, 2, 3].forEach(function (item, index) {
console.log(item, index);
});
map
:
- comportamento do callback: aqui esta um item. o que devo colocar na nova lista em seu lugar?
- argumentos recebidos:
item
,index
,list
- valor retornado: lista de novos itens
- exemplo de uso:
const three = [1, 2, 3];
const doubled = three.map(function (item) {
return item * 2;
});
console.log(three === doubled, doubled); // false, [2, 4, 6]
filter
:
- callback imperativo - O seu retorno sempre representa um valor verdadeiro ou falso
- comportamento do callback: Devo manter esse item?
- argumentos recebidos:
item
,index
,list
- valor retornado: lista de itens mantidos
- exemplo de uso:
const ints = [1, 2, 3];
const evens = ints.filter(function (item) {
return item % 2 === 0;
});
console.log(ints === evens, evens); // false, [2]
reduce
:
- comportamento do callback: Aqui esta o resultado da interação anterior. O que devo passar para a proxima interação?
- argumentos recebidos:
result
,item
,index
,list
- valor retornado: resultado da ultima iteração
- exemplo de uso:
// NOTA: `reduce` e `reduceRight` tem como argumento opcional o "initialValue" (Valor inicial), passado depois da função de callback do reducer.
// se omitido, ele ira usar o primeiro item como valor inicial.
const sum = [1, 2, 3].reduce(function (result, item) {
return result + item;
}, 0); // se o `0` for omitido, `1` será o primeiro `result`, and `2` será o primeiro `item`
reduceRight
: (igual ao reduce
, porem em ordem inversa: fim-para-inicio)
some
:
- callback imperativo - O seu retorno sempre representa um valor verdadeiro ou falso
- comportamento do callback: Este item atende ao seu criterio?
- argumentos recebidos:
item
,index
,list
- valor retornado:
true
após o primeiro item atender ao seu criterio, senãofalse
- nota: Para a iteração, uma véz que o valor do seu callback for verdadeiro.
- exemplo de uso:
const hasNegativeNumbers = [1, 2, 3, -1, 4].some(function (item) {
return item < 0;
});
console.log(hasNegativeNumbers); // true
every
:
- callback imperativo - O seu retorno sempre representa um valor verdadeiro ou falso
- comportamento do callback: Este item atende ao seu criterio?
- argumentos recebidos:
item
,index
,list
- valor retornado:
false
após o primeiro item NÃO atender ao seu criterio, senãotrue
- nota: Para a iteração, uma véz que o valor do seu callback for Falso.
- exemplo de uso:
const allPositiveNumbers = [1, 2, 3].every(function (item) {
return item > 0;
});
console.log(allPositiveNumbers); // true
find
:
- callback imperativo - O seu retorno sempre representa um valor verdadeiro ou falso
- comportamento do callback: Este é o item que voê esta procurando?
- argumentos recebidos:
item
,index
,list
- valor retornado: O item que você esta procurando, ou
undefined
- nota: Para a iteração, uma véz que o valor do seu callback for verdadeiro.
- exemplo de uso:
const objects = [{ id: 'a' }, { id: 'b' }, { id: 'c' }];
const found = objects.find(function (item) {
return item.id === 'b';
});
console.log(found === objects[1]); // true
findIndex
:
- callback imperativo - O seu retorno sempre representa um valor verdadeiro ou falso
- comportamento do callback: Este é o item que voê esta procurando?
- argumentos recebidos:
item
,index
,list
- valor retornado: O index(posição do item na lista) do item que você esta procurando, ou
-1
- nota: Para a iteração, uma véz que o valor do seu callback for verdadeiro.
- exemplo de uso:
const objects = [{ id: 'a' }, { id: 'b' }, { id: 'c' }];
const foundIndex = objects.findIndex(function (item) {
return item.id === 'b';
});
console.log(foundIndex === 1); // true