Avançada JavaScript artigos de funções de ordem superior
Descrição: Bem-vindo ao woo front end Yeshui; trazer para você hoje é avançado conhecimento de JavaScript, a próxima série são estabelecidos em todo o JavaScript avançada; antes de tudo estamos a falar de funções o primeiro artigo de ordem superior.
função de ordem é definida: funções de ordem superior são funções da função operacional, geralmente são dois casos no processo de desenvolvimento do projeto
- Função pode ser passados como parâmetros para executar outra função
- Função pode ser executada como uma saída valor de retorno
Vamos usar um diagrama para descrever funções de ordem superior
Estes são os requisitos de funções de ordem superior. Nós usamos a função JavaScript no desenvolvimento de funções de ordem significativamente maiores cumprir os requisitos; que escrever o código pode ser utilizado durante a função de ordem superior da função básica foi selada lógica de negócios, ou como um callback. Em seguida, começou a me esclarecer sobre como as empresas geralmente usam funções de ordem superior; como empacotar funções de ordem superior? ,
O primeiro modo: como um argumento
Frequentemente encontrados no Código de negócios dois funções lógicas substancialmente nas mesmas condições mas sem a lógica de negócios, podemos colocar dois pacote de lógica idêntica em uma função de ordem superior, assim escrito em uma função lógica diferente dentro passado como um parâmetro para o empacotado dentro de uma função. Isso permite que a lógica de negócios algumas mudanças em alguns da mesma cena, este é o nosso cenário mais comum; referido como a função de retorno.
Vamos explicar aqui como exemplo
Exemplo 1:
1 // duas funções diferentes, mas a lógica é a mesma parte da variável parte
2 função A () {
3 a CONSOLE.LOG ( "I é uma função". );
. 4 o CONSOLE.LOG ( "I é uma função " );
. 5 } . 6 . 7 . 8 função b () { 9 a console.log (." I é uma função " ); o console.log 10 (" I b função " ) 11 } 12 13 / * 14 ou mais é a dois têm funções básicas, foram realizadas duas funções separadamente * 15/16 17. Um (18); B é ()
Este é o resultado da execução do exposto, podemos descobrir que há duas funções ao mesmo ponto. Então, nós estamos indo para lidar com as duas funções seguintes
função c (fn) {
o console.log ( "I é uma função" )
fn ()
}
// o mesmo pacote lógica em uma função C como transmissoras lógico diferentes parâmetros da função fn go executar
c (função () { Console log ( "Eu era uma função" ) }) c (função () {console.log ( "Eu sou a função b" )}) // Isso nos mostra o que nós queremos alcançar a apresentação e, em seguida, nós olhamos implementação dos resultados é uma espécie de como
Este é o resultado de nossa última execução, com os resultados do acima é o mesmo, mostrando que as funções de ordem superior torna o código mais variabilidade, mais conciso, fácil de entender, este é o nosso cenário comum habitual.
Exemplo 2:
Na verdade, temos um cenário em que mais freqüentemente encontradas no projeto. Muitas vezes usamos na solicitação ajax projeto ou solicitações, etc. Alguns usam Axios solicitações assíncronas; que muitas vezes não se preocupam com o processo de solicitação geral (procedimento de pedido é o mesmo), o resultado de um pedido só quer lidar com lógica de negócios diferente. Nós podemos usar as funções de ordem superior para solicitar um pacote unificado, também chamado de um interceptor pedido
httpsAjax função = var (obj, o callback) {
var {URL, dados, escreva} = obj;
$ .ajax ({
URL: URL,
tipo: tipo || 'POST' ,
de dados: Dara || {}, Sucesso: function (RES) { // typeof determinado usando tipo de dados, se for aprovada em uma função, nós executamos função de retorno de IF (typeof o callback === 'função' ) {a chamada de retorno (RES)}}})} httpsAjax (URL { : "XXX / GET / User" , digite: "GET" , Data: {}}, função (RES) {// certa lógica serviço de operação console.log (res)})
O primeiro Resumo do modelo: A descrição acima é a utilização do nosso comum mais básico funções de ordem superior, e geralmente nós passado como um parâmetro para outra função com um interior argumento, em seguida, outro parâmetro passado na execução da função, criando uma função de retorno (high função de ordem)
O segundo modo: a saída como um valor de retorno
Há muitos em comparação com a função de transferência como um parâmetro, em função do valor dos cenários de retorno de saída. Deixe função continua a devolver uma função executável, isto significa que a operação é uma continuação do processo, tal como se utilizam frequentemente para classificar a matriz Array.sort (método)
Aqui está o método de determinação do conjunto Object.prototype.toString tipo de dados de funções exemplo isType:
var isString = função (obj) {
retorno object.prototype.toString.call (obj) === '[objeto String]'
}
var IsArray = função (obj) {
return object.prototype.toString.call (obj) == = '[objeto array]' }
var ISNUMBER = função (obj) { rturn object.prototype.toString.call (obj) === '[objeto Number]' } isString ( "我是一个数组串" ); // verdadeiro IsArray ([ "1", "2" ]); // verdadeiro ISNUMBER (1) // verdadeiro
Nota: Nós achamos que os três métodos acima tem lógica em grande parte idêntica object.prototype.toString.call (obj), exceto que o resultado do processamento de lógica retorna a cadeia, a fim de evitar código redundante, que encapsula como uma função do is_tipo ();
var is_tipo = função (obj, tipo) {
retorno object.prototype.toString.call (obj) == '[objecto' + Tipo + ']'
}
console.log (is_tipo (11, 'N')); // verdadeira
console.log (is_tipo ([ 'a', 'b'], "matriz"); // true
NOTA: O acima é o pacote que maneira, então podemos encontrar extraído, menos código muito mais claro, mas vamos descobrir que precisamos passar dois parâmetros, mas o significado dos dois parâmetros para os onze pares, ou Depois que o código está no negócio que fizemos de errado na correspondência, podemos escrever a lógica de que não haverá erro. Então, vamos olhar para o pacote novamente este método, o tipo de distinguir o tipo de parâmetros de efeitos passados em usar funções de ordem mais elevada tenha guardado como uma variável, um retorno de função, o tipo de análise no final, quando passamos obj.
isType função = var (tipo) {
// passar um primeiro tipo como o tipo de dados de parâmetros, característico da função de ordem superior salvou variáveis, uma função que retorna para continuar a executar a
função de retorno (obj) {
retorno object.prototype.toStirng.call (obj) === '[Object' do tipo + + ']'
}
}
// primeira dividido a cada tipo, para que possamos saber exatamente o que o tipo específico de chamadas de método
var isString = isType ( "string" );
var = isType o IsArray ( "array" );
var = ISNUMBER isType ( "Número a");
o console.log (a IsArray ([l, 2,3])) // a verdadeira
O segundo modelo Resumo: O texto acima é um exemplo de nosso segundo modelo. Claramente, podemos ver e usar este modelo para fazer uma função que retorna outra função, de modo que a continuação da função de operações, que é o segundo modelo como uma saída valor de retorno
Estes são o entendimento básico e demonstração de funções de ordem superior dos dois modos. Eu acredito que você tem um monte de ajuda nos projetos de desenvolvimento normais; Observe também que nem todos os métodos de projetos de desenvolvimento geralmente tem que usar as funções de ordem superior, funções de ordem superior utilizam os dois acima cenários é. Caso contrário ele irá levar a um exagero. funções de ordem superior mapear (Next olharmos em termos de JavaScript frequentemente utilizados em) / quatro métodos reduzir (), filter (), sort ().
- mapa () Método
- Definições: mapa () retorna uma nova matriz para atravessar a matriz original, o valor do elemento da matriz após a chamada para os elementos originais de matriz de transformação de função, os elementos de matriz na ordem original de elementos de processamento.
- Nota: Não detecção de array vazio, retorna a nova matriz não muda a matriz original
- sintaxe:
newArray.map (função (item) {
// item newArray travessia é elemento newArray; semelhante newArray [I]
retorno item
// deve retornar, de qualquer maneira, não vai produzir uma nova matriz
})
Mapa () método foi definido no JavaScript Array, temos que chamar o mapa Array, me passando o que eles querem ter uma função, temos que esperar até que uma nova matriz como resultado de:
Exemplos:
função POW (x) {
return x * x
}
var arr = [1,2,3,4,5 ];
console.log (arr.map (POW)); // [1,4,9,16,25]
Esta é uma maneira simples de obter chamadas mapa, passando a funções definidas pelo prisioneiro de guerra, cada elemento da exponenciação matriz original, obter uma nova matriz
Outro exemplo que geralmente muitas vezes encontramos isso, precisamos tomar um atributo matriz de objeto é usado para fazer uma matriz de matrizes
Exemplos:
ARR = var [
{ name: "Joe Smith" ,
digite: 2 }, { name: "John Doe" , tipo :. 3 }] // obter o atributos requeridos novo tipo de matriz formulação convencional // loop for var new_arr = [] para (var i = 0; I <arr.Length; i ++ ) {var obj = ARR [I] para (var chave no obj) {SE (chave == 'tipo' ) {new_arr.push (obj [ key])}}} // mapear new_arr = arr.map redação var (função (item) {return item.type})
Pode ser visto a partir do acima é escrito para um ciclo de escrita, um mapa de uma escrita; Embora os resultados obtidos são os mesmos [2,3] duas, no entanto, o valor do código é, por redundância cíclica também, mapa simples conveniente. Então, depois de experimentar um cenário como esse você pode usar o método de mapeamento é mais conveniente
2. a reduzir () Método
1, definir: uma função de recepção como um acumulador, um valor de cada uma matriz (esquerda para a direita) que atravessam a finalmente calculada como um valor
2. Nota: A função de retorno não será uma matriz vazia
3, sintaxe: nova Array.reduce (callback, initialValue)
Compreensão da sintaxe é:
reduzir (chamada de retorno, initialValue) vai passar duas variáveis, o primeiro parâmetro é uma função de retorno (retorno) e um segundo valor inicial (initialValue).
O primeiro argumento para a função de retorno (retorno) Há quatro parâmetros de entrada, anterior e o seguinte , índice e matriz . prev e ao lado é um deve passar parâmetros.
O valor inicial primeiro parâmetro (initialValue) a decisão de uma chamada de retorno parâmetros da função prev valores resultar quando reduzir initialValue de entrada, o valor padrão é initialValue anterior. Quando nenhuma entrada reduzir initialValue, em seguida, o valor padrão de prev o primeiro elemento é o valor dos valores originais.
A seguinte explicação
var arr = [ "alimento", "laranja" ];
//第一种没有传递initialValue的情况
função getValue () {
return arr.reduce (função (prev, ao lado) {
console.log ( "prev" , prev); console.log ( "next" , ao lado) retorno prev ;})} console.log ( "getValue", getValue ())
Os resultados podem ser vistos correndo nós não passar o initialValue, prev ficar muito arr está atravessando o primeiro valor do elemento
Em seguida, temos de olhar para o caso de transferência initialValue
var arr = [ "a", "b" ];
//传递initialValue情况时
função getValue () {
return arr.reduce (função (prev, seguinte) {
console.log ( "anterior" , anterior); console.log ( "próximo" , a seguir); prev [próxima] = 1 ; retorno prev;}, {}) // initialValue传递一个空对象} console.log ( "getValue", getValue ());
Podemos ver os resultados de prazo, quando passou initialValue tiver tempo, prev obter o valor padrão é initialValue você passar, e podemos realizar uma série de processamento de lógica de negócios usando o valor padrão passou. Queremos alcançar o efeito de
Em seguida, veremos como muitas vezes as empresas estão usando reduzir () é.
Caso 1: calcular a matriz de soma
numarray = var [1,2,3,4,5 ];
// loop for para calcular
var NUM = 0 ;
para (var i = 0; I <numArray.length; i ++ ) {
NUM NUM = + numarray [I ] }
o console.log (NUM); // 15
// reduzir método utilizando
var numArray.reduce RES = (função (PREV Próximo) { return PREV + Próximo}, 0 ) o console.log (RES); // 15
Use um loop for, devemos primeiro declarar uma variável global como padrão. Sabemos que processo de desenvolvimento, tente não usar variáveis globais, podemos reduzir o uso de evitar completamente, e mais direta. Este é simples de usar reduzir ().
Caso 2: Fusão matriz bidimensional
var arr = [[0,1], [2,3], [4,5 ]];
var res = arr.reduce (função (prev, seguinte) {
retorno prev.concat (próximo)
}, [])
console.log (res); // [0,1,2,3,4,5];
Podemos passar uma matriz vazia como o padrão, os elementos de matriz originais foram combinados em uma nova matriz.
Caso 3: Statistical uma série de repetir algumas palavras
var arr = [ "alimento", "laranja", "maçã", "laranja", "pêra", "laranja" ];
//不用reduzir时
função getWorad () {
var obj = {};
para (var i = 0; i <arr.Length; i ++ ) { var de item = arr [i]; se (obj [produto]) {obj [produto] = obj [produto] + 1 } else {obj [produto] = 1 }} retornar obj} console.log (getWorad ()); a função getWorad2 () {arr retorno. reduzir (função (prev, seguinte) {prev [próxima] = (prev [próxima] + 1) || 1 ; retorno prev;}, {})} console.log (getWorad2 ())
Os dois últimos resultados são o mesmo método, na verdade, usamos reduzir () fará com que a nossa lógica torna-se fácil de manusear. Nós, portanto, abandonar código redundante, fazer o olhar código mais claro. Eu acredito em você e, em seguida, o negócio de costume vai encontrar esse tipo de lógica de negócios.
. 3, filtro () Método
1, definir: filtro () é uma operação comum, que é usado para filtrar certos elementos de transferência de matriz, e, em seguida, retorna os elementos restantes, e um mapa de método semelhante, a matriz também recebe uma função de filtro, e o mapa () diferente o; filtro () função é passada a aplicada sequencialmente para cada elemento, com base no valor devolvido é verdadeiro ou falso é decidido para manter o elemento de perda
Coluna Caso 1: Por exemplo, em uma matriz, o mesmo suprimido, deixando apenas o número ímpar, você pode escrever:
var arr = [1,2,3,4,5 ];
var r = arr.filter (função (produto) {
retorno item% 2 == 0! ;
})
console.log (r)
Podemos ver, usamos filtro para elementos filtrantes, enquanto os elementos assumir a partir de zero, eles voltaram e zero abandonado, e, finalmente, formar uma nova matriz.
Caso 2: o arr string vazia é removida, você pode escrever:
var arr = [ 'a', 'b', '', 'c' ]
var r = arr.filter (função (produto) {
return item && item.trim ();
})
console.log (r)
Podemos usar uma matriz de cadeia de filtro filtros oco, devolve uma matriz de cadeia vazio não. Conveniente e simples, então resolvemos quais parâmetros para o método de retorno de chamada de filtro que trouxe
// olhada na sintaxe filtro
var = P & lt Array.filter (função (ELE, índice, _Isso) {
a console.log (ELE);
o console.log (índice);
o console.log (_isso);
retorno tura;
} )
/ *
visível com filtro () as funções de ordem superior, a chave é a implementação de uma função de triagem adequada
função de retorno: filtro () a função de retorno de chamada recebe, na verdade, podem ter vários parâmetros. Normalmente, utilizar apenas o primeiro parâmetro representa um elemento da matriz, a função de retorno também podem receber dois parâmetros adicionais, que indica a posição dos elementos, e a própria matriz.
* /
O serviço mais utilizado ou filtro de uso para remover elementos duplicados na matriz
var r, arr = [1,1,3,4,5,3,4 ];
r = arr.filter (função (ELE, índice, auto) {
retorno self.indexOf (ELE) === índice;
})
console.log (r)
Desta forma, seria muito rápido não há espera para um elemento de repetição da matriz. É por isso que muitas vezes encontramos a de-ênfase, também é um frequentemente solicitado para entrevista.
. 4, Ordenar () Método
1, definir: tipo () método é usado para ordenar os elementos da matriz, e retorna uma matriz.
2, a sintaxe: arrayObject.sort (SortBy);
3. Nota: O parâmetro SortBy alternativa, para uma ordem de classificação predeterminada, mas deve ser uma função.
toUpperCase (); if (x1 <
X2) {return -1 } IF (X1> X2) {return 1. } Return 0 }) // Ignorar caso de fato, a transferência de valores em letras minúsculas ou maiúsculas, e em seguida, fazer a comparação // NOTA: sort () método vontade gama diretamente na matriz original a ser modificado, os resultados de seu retorno ainda é atual matriz // muitas vezes há uma matriz de objetos vamos ver um monte no código, uma propriedade do objeto em relação à matriz para fazer esse tipo como alcançá-lo / / o seguinte é para classificar um exemplo de um conjunto de objectos var ARR = [{Nome: 'ZOPP' , Idade: 10 }, {o Nome: 'Deus' , Idade :. 1 ,}, {o Nome: 'YTT' , Idade: 18 é }] ; // simples redação; função padrão ascendente Compare (o protótipo) {função de retorno (a, B) = {var VALUE1 um [protótipo]; valor2 = var B [protótipo]; retorno VALUE1 - value2}} // nós geralmente muitas vezes, escrever uma função parâmetro função separada; alcançar claro, mutável console.log (arr.sort (compare ( "Idade ")));
/ * Finalmente, escreveu tantos exemplos, também encontrado como parte dos parâmetros variáveis da função é, na verdade, nada mais do que dois tipos, um é ascendente um é descendente. Na verdade, pode-se colocar um parâmetro variável da função em um método de embalagem utilizando o parâmetro passando maneira que estamos ascendente ou descendente a
* /
/ * matriz classificada de acordo com um objecto matriz valor da propriedade um método
* usando exemplos: newArray.sort (a sortBy (tipo, Rev, [, chave]))
* @ param tipo representativo do tipo newArray, 'número' representa a matriz de valores [1,2], 'cadeia' representa uma matriz de cadeia [ '' ABHS 'como'], 'obj ' representa um array de objetos [{}, {}], se obj é necessária, em seguida, o terceiro parâmetro
* @ param rev true indica ascendente, descendente espécie de falsa
tecla * @ param é opcional a terceira função, como é o caso se o tipo é passado como um atributo do obj
* * /
var a = function sortBy (tipo, Rev, Key) {
// não passar o segundo parâmetro é o ascendente padrão
if (! Rev) {
Rev = . 1
} else { Rev Rev. 1 = :? -1 ; } função de retorno(A, b) {// Se a string é, então vamos lidar com ele unificou seu caso IF (do tipo == 'string' ) {A = a.toUpperCase (); b = b.toUpperCase ();} // Se for, então tomarmos o obj valor de atributo correspondente IF (tipo == 'obj' ) {a = uma [chave]; B = B [chave];} if (a < B) Rev * {retorno -1 ;} IF (a> b) {return * Rev 1 ;} return 0 ;}} // esta é a última queremos um pacote unificado, podemos também realizar-se a alterá-lo, este pacote é o último a retornar um bom negócio funções anônimas, também um tipo de funções de ordem superior, vamos falar mais tarde
resumo:
- Se você deseja obter os resultados desejados, se é ordem ascendente ou descendente, precisamos fornecer uma função de comparação. Comparando a magnitude dos dois valores da função, e retorna um número para ilustrar a ordem relativa destes dois valores.
- função de comparação deve ter dois parâmetros a e b, o valor de retorno é a seguinte:
- Se um é inferior a B, isto é, a - b é inferior a zero, um valor inferior a zero é devolvida, a matriz em ordem ascendente.
- Quando a é igual a b, então 0 é retornado.
- Se um de b, que isto é um - b é maior do que zero, um valor maior do que zero é devolvida, a matriz, por ordem decrescente.