JavaScript

Métodos JavaScript para manipular String, Array, Number entre outros

0

Métodos Nativos do JavaScript

jQuery é mais usado que JavaScript, claro que isso é uma piada! Neste post irei tratar sobre métodos nativos do JavaScript. O JavaScript tem uma variedade de métodos para cada tipo de dados que ele oferece suporte, então, o tipo number tem algum métodos para te ajudar com números, e assim há métodos pra te ajudar com Strings, Arrays, Regexp que são os que irei abordar neste post.

Sumário

Como este post terá vários tópicos, linquei com âncora os links abaixo pra ficar mais fácil de você ler o que precisa saber.


Array/Vetores/Matrizes

voltar

O JavaScript trás alguns métodos que nos auxiliam quando precisamos manipular um Array, são eles:


voltar

array.concat(item…)

Este método cria uma nova matriz adicionando alguns outros item passados como parâmetro, veja o exemplo:

a = ['a', 'b', 'c'];
b = ['d', 'e', 'f'];
c = a.concat(b, 'g', true, 'h');
// c será ['a', 'b', 'c', 'd', 'e', 'f', 'g', true, 'h'];

Espero que só este exemplo seja o suficiente.


voltar

array.join(separador)

Este método cria uma sequência de caracteres separados por uma vírgula a partir de um Array, podemos usar como parâmetro um separador que vai estar entre um item e outro do Array, veja o exemplo:

a = ['a', 'b', 'c'];
b = a.join();
// b será 'a,b,c';

a = ['a', 'b', 'c'];
b = a.join('');
// b será 'abc';

a = ['a', 'b', 'c'];
b = a.join(' > ');
// b será 'a > b > c';

Espero que só este exemplo seja o suficiente.


voltar

array.pop()

O método pop() remove o último item de um array e o retorna, veja o exemplo:

a = ['a', 'b', 'c'];
b = a.pop();
// b sera 'c'
// a será ['a', 'b']

Espero que só este exemplo seja o suficiente.


voltar

array.push(item…)

Este método adiciona item ao final de uma Array, diferente do concat(), ele modifica o Array adicionando outros Arrays também, ele retorna o novo tamanho do Array, veja o exemplo:

a = ['a', 'b', 'c'];
b = ['d', 'e', 'f'];
c = a.push(b, 'tutsmais', true);
// c sera 6 // ele retorna o novo tamanho do array
// a sera ["a", "b", "c", ["d", "e", "f"], "tutsmais", true]

Espero que só este exemplo seja o suficiente.


voltar

array.reverse()

O método reverse() modifica o Array invertendo a sua ordem. Ele transforma o Array exatamente para ordem invertida, veja o exemplo:

a = ['a', 'b', 'c'];
b = a.reverse();
// b sera ["c", "b", "a"]
// a sera ["c", "b", "a"]

Espero que só este exemplo seja o suficiente.


voltar

array.shift()

Este método é o contrário de pop(), ele remove o primeiro item de um Array e o retorna, este método costuma ser bem mais lento que o método pop(), veja o exemplo:

a = ['a', 'b', 'c'];
b = a.shift();
// b sera "a"
// a sera ["b", "c"]

Espero que só este exemplo seja o suficiente.


voltar

array.slice(start, end)

O método slice() faz uma cópia de uma parte de um Array, recebe dois parâmetros: o primeiro é em que posição do Array ele deve começar e o segundo define até onde ele deve copiar. O segundo parâmetro é opcional, então se você quer copiar até o final basta não definir o segundo parâmetro. Veja o exemplo:

a = ['a','b','c','d','e','f','g','h','i','j'];
b = a.slice(1,5);
c = a.slice(6);
// b sera ["b", "c", "d", "e"]
// c sera ["g", "h", "i", "j"]
// a continua inalterada

Espero que só este exemplo seja o suficiente.


voltar

array.sort(fnComparação)

Este método ordena conteúdos de um Array, ele altera a variável atual e a retorna, veja este exemplo:

a = ['b','a','f','j','i','c','h','g','e','d'];
a.sort()
// a sera ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"]

Ordenamos a lista em ordem alfabética, se for usado números irá ordenar os números, existe um jeito mais complexo de usar esse método, mas não vou me aprofundar neste post, só vou passar um exemplo. Dentro do método sort(), experimente passar uma função, nela coloque dois parâmetros (a, b), digamos que o método compara várias vezes os itens no Array e você pode fazer sua própria maneira de ordenar os itens a partir dessa função. Veja os dois exemplos:

a = ['b','a','f','j','i','c','h','g','e','d'];
a.sort(function(a, b){
   alert(a+', '+b);
});

Neste exemplo acima não será mudada a ordem dos ítens, pois trocamos o algoritmo nativo por um alert(). Já no segundo teste, ordenamos em ordem decrescente;

a = ['b','a','f','j','i','c','h','g','e','d'];
a.sort(function(a, b){
   return a < b? 1 : 0;
});
// a sera ["j", "i", "h", "g", "f", "e", "d", "c", "b", "a"]

Agora ordenamo em ordem crescente

a = ['b','a','f','j','i','c','h','g','e','d'];
a.sort(function(a, b){
   return a > b? 1 : 0;
});
// a sera ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"]

Mas se colocar uma variável fora do sort, e dentro do sort apenas incrementarmos 1, iremos ver quantas vezes o sort executa a função interna, veja o exemplo:

conta = '';
a = ['b','a','f','j','i','c','h','g','e','d'];
a.sort(function(a, b){
   conta++;
   return a > b? 1 : 0;
});
alert(conta);
// a sera ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"] 
// e conta sera 29

Ou seja foi executado 29 vezes para ordenar 10 itens, talvez esse método não seja um bom recurso pra quem precisa ordenar muitos itens, faça uns testes você mesmo.

Espero que só este exemplo já seja o suficiente.


voltar

array.splice(start, deleteCount, item…)

Este método serve para deletar itens de um array, passamos 2 parâmetros principais que o primeiro é onde o método deve começar apagando, o segundo parâmetro é até onde ele deve apagar, temos também um terceiro parâmetro opcional, que serve para adicionar itens ao array, no ponto onde foi definido para o splice começar, veja este exemplo:

a = ['b','a','f','j','i','c','h','g','e','d'];
b = a.splice(1,5);
// b sera ['a','f','j','i','c'] 
// a sera a = ['b','h','g','e','d']; 

Como você vê, ele deleta todos os itens, e retorna os itens deletados, veja este outro exemplo:

a = ['b','a','f','j','i','c','h','g','e','d'];
b = a.splice(1,5, 'item1', 'item2', 'item3');
// b sera ['a','f','j','i','c'] 
// a sera a = ['b','item1','item2','item3','h','g','e','d']; 

Assim você pode ver, que podemos especificar itens a ser inseridos no array a partir do ponto inicial do splice, bom recomendo vocês fazerem bastantes testes com esse método!

Espero que só este exemplo já seja o suficiente.


voltar

array.unshift(item…)

Este método é o contrário do push(), ele adiciona itens no inicio de um array, e retorna o novo tamanho do array, veja o exemplo:

a = ["b", "h", "g", "e", "d"];
b = a.unshift('TutsMais');
// a sera ["TutsMais","b", "h", "g", "e", "d"]
// b será 6

Você pode adicionar mais de um item por vez, como preferir.

Espero que só este exemplo já seja o suficiente.


Números

voltar
O JavaScript tem métodos nativos que nos auxiliam muito quando precisamos manipular um dado do tipo número, são eles


voltar

number.toExponential(digitos)

Este método serve para transformar um número em sua forma exponencial, possui um parâmetro opcional que controla quantas casas decimais deve ter, veja o exemplo:

a = 4
b = a.toExponential();
// b sera "4e+0"

Esse tipo de número deve ter alguma aplicação específica que eu ainda não conheço, e enquanto não conheço, esse método é inútil para mim, e talvez pra você também.
Uma outra curiosidade que vale ressaltar é este exemplo:

a = 4;
b = a.toExponential();

if(b == a){
   alert('true')
}

isso é true! é mais uma oportunidade que tenho de ressaltar a importância de usar os operadores ‘===’ e ‘!==’ para comparar, por que mesmo que tenha sido algo especificado pelo usuário, pode da um bug em todo seu script, veja o exemplo:

a = 4;
b = new String('4.00e+0');

if(b == a){
   alert('true')
}

isso é true! isso talvez pode ser um problema, por isso aconselho usar os operados ‘===’ e ‘!==’ que no caso acima, seria a solução!

Espero que só este exemplo já seja o suficiente.


voltar

number.toFixed(digitos)

Este método controla a quantidade de casas decimais um número deve ter, aceita um parâmetro opcional que é a quantidade de casas decimais ele deve ter, veja o exemplo:

a = 10/1.345; // 7.434944237918216
b = a.toFixed();
c = a.toFixed();
d = a.toFixed();

// b sera "7"
// c sera "7.43"
// d sera "7.4349"

Espero que só este exemplo já seja o suficiente.


voltar

number.toPrecision(precisão)

Este método serve para definir quantas casas números um número vai ter, recebe um parâmetro obrigatório que defini as casas, veja o exemplo:

a = 10/1.345; // 7.434944237918216
b = a.toPrecision(1);
c = a.toPrecision(3);

// b sera "7"
// c sera "7.43"

Espero que só este exemplo já seja o suficiente.


voltar

number.toString()

Este método simplesmente converte um número para uma string, existe um parâmetro opcional, que não entendo muito bem, mas que raramente você precisara usar, veja o exemplo:

a = 7
b = a.toString();

// b sera "7"

Existe várias vantagens em transformar um número em string, uma delas e a principal pra mim, é que transformando um número em string, podemos usar todos os métodos nativos de Strings para manipular números, e isso no meu ponto de vista é bem interessante.
Espero que só este exemplo já seja o suficiente.


voltar

String/Textos

O JavaScript Possui dois métodos interessantes para se trabalhar com Expressões Regulares, são eles.


voltar

string.charAt(pos)

Este método retorna o caractere que esta na posição passada como parâmetro, você passa uma posição e ele retorna o caractere, se a posição for igual ou maior que a propriedade length ele vai retornar uma string vazia, veja o exemplo:

a = 'TutsMais';
b = a.charAt(0);
c = a.charAt(1);
d = a.charAt(2);
// b sera "T"
// c sera "u"
// d sera "t"

Espero que só este exemplo já seja o suficiente.


voltar

string.charCodeAt(pos)

Este método é semelhante ao charAt, porém em vez de retornar o caractere, ele retorna um número que representa a letra no teclado do computador, veja o exemplo:

a = 'TutsMais';
b = a.charCodeAt(0);
c = a.charCodeAt(1);
d = a.charCodeAt(2);
// b sera "84"
// c sera "117"
// d sera "116"

Para você entender melhor este método, acesse este exemplo do jQuery API, quando você digita algo no input de texto, procure abaixo a informação charCode, e lá terá o mesmo número representando a tecla, que o charCodeAt retorna.
Espero que só este exemplo já seja o suficiente.


voltar

string.concat(string…)

Este método serve para concatenar strings, bem diferente do array.concat, este método é usado da seguinte forma:

a = 'Blog';
b = 'TutsMais';
c = '';
c = a.concat(' ', b);

Neste exemplo a variável c fica com valor “Blog TutsMais” e as variáveis a, b continuam com o mesmo valor, este método é pouco usado, por que é mais fácil fazer a mesmo coisa usando o operar +
Espero que só este exemplo já seja o suficiente.


voltar

string.indexOf(searchString, pos)

Este método é usado para saber se uma string possui um determinado fragmento de texto, é usado um parâmetro que é o fragmento de texto que queremos saber se tem na string, se o método retornar -1 significa que não tem aquele fragmento, mas se o método encontrar o fragmento de texto ele ira retornar a posição em que começa o fragmento, veja o exemplo;

a = 'Blog TutsMais';
b = a.indexOf('Mais');
c = a.indexOf('mais');

neste exemplo a variável b será 9 por que existe um parte ‘Mais’ na string e começa na posição 9, já a variável b sera -1 por que não existe ‘mais’ na string, isso é case sensitive.

A mais um parâmetro opcional, que é uma posição em que queremos começar a busca, recomendo fazer testes, veja o exemplo:

a = 'Blog TutsMais';
b = a.indexOf('Mais', 10);
c = a.indexOf('Mais', 4);
// b sera -1
// c sera 9

Espero que só este exemplo já seja o suficiente.


voltar

string.lastIndexOf(searchString, pos)

Este método é semelhante ao indexOf e retorna o mesmo tipo de dado, mas devemos entender que ele é exatamente o contrário do indexOf(), ele faz a busca do final da string para o começo, vejo o exemplo.

var str1 = 'Blog TutsMais';
var str2 = 'Blog TutsMais';
            
a = str1.indexOf('Tuts', 5); // a é igual a 5
b = str2.lastIndexOf('Tuts', 5);  // b é igual a 5

Como pode ver, os dois métodos retornaram que encontraram a string começando com index 5 no array da string, agora veja este outro exemplo:

var str1 = 'Blog TutsMais';
var str2 = 'Blog TutsMais';
            
var a = str1.indexOf('Tuts', 7); // a é igual a -1
var b = str2.lastIndexOf('Tuts', 7); // b é igual a 5

Dai que começamos a perceber a diferença entre o lastIndexOf() e indexOf(), fiz uma ilustração, que mostra exatamente (ou quase), como funciona esses dois métodos:

Exemplo 1 com indexOf(): Nós dizemos que deve procurar por ‘Tuts’ a partir do quinto caractere da string, dai ele vai até o quinto caractere e começa a busca por ali, até o final da string. Esta bem claro no exemplo que o quinto caractere é a letra ‘T’ então ele já achou o que procurava.

Exemplo 1 com lastIndexOF(): Nos dizemos que deve procurar por ‘Tuts’ começando pelo 5 caractere da string, dai ele primeiro vai até o quinto caractere, e começa a procura por ali, em direção ao primeiro caractere ca string

Basicamente a parte que o indexOf não procura, o lastIndexOf procura, as setas indicam a direção que ele percorre, lembre-se que quando eu sito o numero 5, a string começa a partir do 0, então é o sexto caractere.

Você deve ter percebido que o lastIndexOf não encontrou a palavra ‘Tuts’ completamente, mas ele encontrou o ‘T’ referendo ao fragmento ‘Tuts’ por isso que ele mostrou corretamente, isso é algo que não acontece com o indexOf, se o indexOf encontrar apenas o ‘s’ do termo ‘Tuts’ ele vai retornar -1, por que ele sempre procura pela primeira letra, talvez isso seja um bug do lastIndexOf, talvez não seja.

O exemplo 2 segue a mesma lógica, espero que estes exemplos tenham sido o suficiente.


voltar

string.localeCompare(outra)

Esse método compara duas strings e retorna -1 se o primeiro valor por maior que o segundo, retorna 0 se os dois valores forem iguais e retorna 1 se o primeiro for maior que o segundo, vendo os exemplos será mais fácil de entender:

var a = '3';
var b = '4';
var c = '3';
        
d = a.localeCompare(b);  // d é igual a -1
e = b.localeCompare(a);  // e é igual a 1
f = a.localeCompare(c);  // f é igual a 0

Creio que este método é simples de entender e não é preciso mais explicações, certo?


voltar

string.match(regexp)

Esse método é usado com expressões regulares, ele basicamente retorna o primeiro item que casa com a expressão regular usada, veja este exemplo.

var texto = 'Tenho 3 namorada, uma me liga pelo número (11) 111-111 outra pelo número (22) 222-222 e a outra pelo número (33) 333-333, mas não diga a ninguém.',
    retorno = texto.match(/\(\d{2}\)\s\d{3}-\d{3}/);
    alert(retorno);
   // console.log(retorno);

Neste exemplo acima, a variável ‘texto’ (que é fictícia) recebe uma string que contem alguns números de telefone, usando o método match, eu criei uma regex que casa com qualquer desses números, neste exemplo a variável ‘retorno’ recebe um array que contem, o valor da primeira parte da string que ele ‘casou’ ou seja, encontrou o padrão descrito.

Se usarmos o a letra ‘g’ no final da regex, teremos algo interessante, por que ele retorna um array, de todos os dados que casou com a regex, veja o exemplo:

   var texto = 'Tenho 3 namorada, uma me liga pelo número (11) 111-111 outra pelo número (22) 222-222 e a outra pelo número (33) 333-333, mas não diga a ninguém.';

   retorno = texto.match(/\(\d{2}\)\s\d{3}-\d{3}/g);

Nós mudamos apenas uma letra na expressão regular, agora a variável ‘retorno’ possui um array, contendo uma copia de todos as partes em que o método encontrou o padrão descrito, isso significa que temos exatamente isso.

["(11) 111-111", "(22) 222-222", "(33) 333-333"]

Espero que estes exemplos, tenham sido esclarecedores.


voltar

string.replace(searchValue, replaceValue)

Este método consiste em procurar um determinado padrão em uma string e substituído por outra coisa, este padrão é uma expressão regular, existe duas maneiras de usar este método, ambos muito poderosas, vamos usar o mesmo exemplo usado para explicar o método match

Vou substituir o primeiro número para traços, veja:

   var texto = 'Tenho 3 namorada, uma me liga pelo número (11) 111-111 outra pelo número (22) 222-222 e a outra pelo número (33) 333-333, mas não diga a ninguém.';
   retorno = texto.replace(/\(\d{2}\)\s\d{3}-\d{3}/, '(--) --- ---');

Com isso, a variável conterá o seguinte conteúdo: “Tenho 3 namorada, uma me liga pelo número (–) — — outra pelo número (22) 222-222 e a outra pelo número (33) 333-333, mas não diga a ninguém.”

Agora, assim como no método match, se usarmos a letra ‘g’ no final da expressão regular, o replace irá percorrer toda a string, repassando o conteúdo, veja este exemplo:

   var texto = 'Tenho 3 namorada, uma me liga pelo número (11) 111-111 outra pelo número (22) 222-222 e a outra pelo número (33) 333-333, mas não diga a ninguém.';
   retorno = texto.replace(/\(\d{2}\)\s\d{3}-\d{3}/g, '(--) --- ---');

Neste exemplo a variável ‘retorno’ será igual a: “Tenho 3 namorada, uma me liga pelo número (–) — — outra pelo número (–) — — e a outra pelo número (–) — —, mas não diga a ninguém.”

São inúmeras as possibilidades de usar este método, espero que estes exemplos tenham despertado sua curiosidade.


voltar

string.search(regexp)

Este método é usado para pesquisar se existe um termo em uma string, ele retorna a posição que ele encontrou o termo passado, quando ele não encontra o termo passado ele retorna -1, nisso ele se parece muito com o método indexOf, o diferencial, é que podemos usar expressões regulares para pesquisar na string, veja o exemplo:

   var Lorem = 'Lorem ipsum dolor sit amet, 44 consectetur adipisicing elit, sed do eiusmod tempor.',
   retorno = Lorem.search(/\d{2}/);

Em nossa expressão, apenas procuramos pro um sequencia numérica de 2 dígitos, o valor da variável retorno é 28, que é justamente onde se encontra os números, caso ele não encontrasse em nenhum lugar da string este padrão ele retornaria -1.

São inúmeras as possibilidades de usar este método, espero que estes exemplos tenham despertado sua curiosidade.


voltar

string.slice(start, end)

Este cria cópias de determinadas partes de uma string, basta passarmos a posição inicial, e a posição final. Caso passamos apenas a posição inicial, ele ira criar uma cópia da string, do ponto inicial até o final. Veja os exemplos:

var Lorem = 'Lorem ipsum dolor sit amet.',
retorno1 = Lorem.slice(6,11);
retorno2 = Lorem.slice(6);
retorno3 = Lorem.slice(0,4);

Neste exemplo, a variável ‘retorno1’ recebe o valor ‘ipsum’, a variável ‘retorno2’ recebe o valor ‘ipsum dolor sit amet.’ e a variável ‘retorno3’ recebe o valo ‘Lorem’.

Este método é idêntico ao Array.slice funciona da mesma forma, porém com estes diferentes tipos de dados.

Espero que só este exemplo já seja o suficiente.


voltar

string.split(separador, limite)

Este método é semelhante com o replace, search, nós passamos uma string ou um regexp, o que ele faz é ‘quebrar’ a string nas partes em que ele encontra o padrão passado, assim formando um array.
Veja os exemplos:

var Lorem = 'Beatriz/Jessica/Graziela/Flávia',
retorno = Lorem.split('/');

Neste exemplo a variável ‘retorno’ recebe um array com o seguinte conteúdo, [“Beatriz”, “Jessica”, “Graziela”, “Flávia”], Perceba que ele simples mente ‘quebrou’ a string em um array.

Mais um exemplo pra facilitar:

var Lorem = 'meu teste||seu teste|| nosso teste',
retorno = Lorem.split('||');

A variável retorno será igual a [“meu teste”, “seu teste”, ” nosso teste”]

Outra forma interessante e mais poderosa de se usar o método split, usando um regexp ao invés de uma string comum, veja este exemplo.

var Lorem = 'Eu tinha 1 carro de 2 olhos e 4 patas.',
retorno = Lorem.split(/\d/);

O valor da variável ‘retorno’ será exatamente [“Eu tinha “, ” carro de “, ” olhos e “, ” patas.”] por ele ter encontrado o padrão de um dígito numero na string.

O método split também possui um segundo parâmetro opcional que determina um limit de vezes que ele encontra o padrão, com isso se passarmos que o limite é 2 ele ira parar imediatamente quando ele encontrar a segunda ocorrência do padrão procurado.
Veja o exemplo:

var Lorem = '1,2,3,4,5',
retorno = Lorem.split(',',2);

O valor de ‘retorno’ será exatamente [“1”, “2”], Assim que ele encontrou a segunda virgula, ele para.

Espero que estes exemplos tenha despertado sua curiosidade.


voltar

string.substring(start, end)

Este método cria cópias de uma string, é semelhante ao método split, porém com uma grande diferença, para copiar uma parte da string basta passarmos a posição que queremos que ele comece a copiar, e a posição final até onde ele tem que copiar, se não passarmos a posição final, ele ira criar a copia, a partir da posição inicial até o final da string, veja os exemplos:

var Lorem = "Lorem ipsum.",
retorno1 = Lorem.substring(4),
retorno2 = Lorem.substring(0,5),
retorno3 = Lorem.substring(0,1);

Neste exemplo a variável ‘retorno1’ conterá o valor “m ipsum.”, a variável conterá o valor “Lorem” e a variável ‘retorno3’ conterá o valor “L”.

Este método é bem simples, e poderoso, espero que só este exemplo já seja o suficiente.


voltar

string.toLocaleLowerCase()

Este método retorna o valor da string em caixa baixa, é muito simples, veja o exemplo:

var Lorem = "TeSTE.",
retorno = Lorem.toLocaleLowerCase();

Neste exemplo a variável ‘retorno’ recebe o valor “teste” uma versão toda em caixa baixa da string anterior


voltar

string.toLocaleUpperCase()

Este método é semelhante ao toLocaleLowerCase, a diferença é que envés de retornar a string e caixa baixa, e retorna a string toda em caixa alta, veja o exemplo:

var Lorem = "Teste.",
retorno = Lorem.toLocaleUpperCase();

Neste exemplo a variável ‘retorno’ recebe o valor “TESTE” uma versão toda em caixa alta da string anterior


voltar

string.toLowerCase()

Este método tem o mesmo resultado do método toLocaleLowerCase


voltar

string.toUpperCase()

Este método tem o mesmo resultado do método toLocaleUpperCase


voltar

string.fromCharCode()

Lembra do método charCodeAt que retorna o código de identificação de um caractere? Pois bem, este método converte um número de identificação deste em seu caractere em si, veja este exemplo para melhor entender:

var texto = String.fromCharCode(97, 98, 99, 100);

A variável texto conterá exatamente “abcd” que são as letras, representadas pelos números passados a função.


Conclusão

Todos este métodos são bem conhecidos, mas achei interessante postar sobre eles, a intenção é cada vez mais, buscar aprender javaScript da forma que ele é, espero que estejam fazendo isso.

Se você ter dicas, sugestões, criticas para incrementar este post, deixe um comentário com sua sugestão =D
Até a próxima.

Rodrigues Costa
Sempre gostei muito de tecnologia e decidi levar esse gosto para todos através de um site.

URL amigável com PHP 7 e HTACCESS

Previous article

Você pode finalmente acompanhar o desempenho da sua GPU no Gerenciador de Tarefas do Windows

Next article

You may also like

Comments

Comments are closed.