Recursos do ECMAScript 5

Estes são os novos recursos lançados em 2009:

参考页面：https://www.w3school.com.cn/js/js_es5.asp

Recursos do ECMAScript 5

Diretiva "use strict"
String.trim()
Array.isArray()
Array.forEach()
Array.map()
Array.filter()
Array.reduce()
Array.reduceRight()
Array.every()
Array.some()
Array.indexOf()
Array.lastIndexOf()

JSON.parse()
JSON.stringify()
Date.now()
Getters e Setters de Propriedades
Novos métodos e propriedades de objetos

Alterações de Sintaxe no ECMAScript 5

Acesso a propriedades de strings através de colchetes [ ]
Vírgulas à direita em literais de arrays e objetos
Literais de strings multilinha
Palavras reservadas como nomes de propriedades

String.trim()

O método String.trim() remove os espaços em branco das extremidades da string.

var texto = "      Olá Mundo!        ";
console.log(texto.trim());
// Saída: "Olá Mundo!"

Array.isArray()

O método isArray() verifica se um objeto é um array.

var frutas = ["Banana", "Laranja", "Maçã", "Manga"];
Array.isArray(frutas)
// Saída: true

Array.forEach()

O método forEach() executa uma função para cada elemento do array.

let total = 0;
[1, 2, 3, 4, 5].forEach(item =>{
    total += item;
});
console.log(total);
// Saída: 15

Array.map()

O método map() cria um novo array executando uma função em cada elemento.

O método map() não executa a função para elementos sem valor.

O método map() não altera o array original.

map(valor, indice, array) possui três parâmetros: valor do item, índice do item, próprio array

[45, 4, 9, 16, 25].map((valor, indice, array) => {
    return valor * 2;
});
// Saída: [90, 8, 18, 32, 50]

Diferenças entre forEach e map()

Semelhanças:

1.Ambos iteram sobre cada elemento do array

2.Cada execução da função anônima aceita três parâmetros: item (elemento atual), índice, array original

3.O this dentro da função anônima aponta para window

4.Só podem iterar sobre arrays

Diferenças:

1.map() aloca memória para armazenar e retornar um novo array, forEach() não retorna dados.

2.forEach() permite que o calblack modifique os elementos do array original. map() retorna um novo array.

forEach() executa a função fornecida para cada elemento, modificando o array original.

Uso: quando você não pretende alterar os dados, mas apenas fazer algo com eles, como salvar no banco de dados ou imprimir.

var numeros = [0, 2, 4, 6, 8];
var resultado = numeros.forEach(function(item, indice, numeros){
  console.log(this);
  console.log(numeros);
  numeros[indice] = item / 2;
}, this);
console.log(numeros);
console.log(resultado);

map() não altera o array original, retorna um novo array com os valores processados pela função.

Uso: map() é adequado quando você precisa transformar os valores dos dados. Não apenas por ser mais rápido, mas também por retornar um novo array.

var dados = [0, 2, 4, 6, 8];
var transformado = dados.map(function(item, indice, dados){
    console.log(this);
    console.log(dados);
    return item / 2;
}, this);
console.log(transformado);

Array.filter()

O método filter() cria um novo array com todos os elementos que passam no teste.``` [45, 4, 9, 16, 25].filter((valor, indice, array) => { return valor > 18; }); // Saída: [45, 25]


### Array.reduce()

arr.reduce(function(anterior, atual, indice, arr){
...
}, inicial);Utiliza o valor inicial ou o valor retornado da iteração anterior junto com o item atual para executar a operação e retornar o resultado.Onde:
**arr** representa o array original;
**anterior** representa o valor retornado na chamada anterior do callback, ou o valor inicial;
**atual** representa o elemento do array sendo processado atualmente;
**indice** representa o índice do elemento atual; se o valor inicial for fornecido, começa em 0, caso contrário começa em 1;
**inicial** representa o valor inicial. reduce() é um método de **redução** do array, assim como forEach(), map(), filter() e outros métodos de **iteração** que percorrem cada elemento do array, porém reduce() pode realizar operações entre o resultado acumulado das iterações anteriores e o elemento atual, algo que os outros métodos de iteração não conseguem fazer.var lista = [3, 9, 4, 3, 6, 0, 9];
var soma = lista.reduce(function (anterior, atual) {
return anterior + atual;
}, 0);

// Resultado: 34

O método every() verifica se todos os elementos do array passam no teste. Equivalente à operação lógica AND (&&). Retorna true apenas se todos passarem, caso contrário retorna false.

Observe que esta função aceita 3 parâmetros:

Valor do item
Índice do item
Array completo

Se o callback utilizar apenas o primeiro parâmetro (valor), os outros podem ser omitidos:

// Resultado da função: false


Array.some()
------------

O método some() verifica se alguns elementos do array passam no teste. Equivalente à operação lógica OR (||). Retorna true se pelo menos um passar, false apenas se nenhum passar.

var numeros = [45, 4, 9, 16, 25]; var algumMaior18 = numeros.some(minhaFuncao);

function minhaFuncao(valor, indice, array) { return valor > 18; } // Resultado: true


Array.indexOf()
---------------

array.indexOf(item, start);
item: obrigatório, o item a ser procurado;
start: opcional, a posição inicial da busca. Valores negativos iniciam a busca a partir do final.

**Se o item aparecer múltiplas vezes, retorna a posição da primeira ocorrência. Se o item não for encontrado, Array.indexOf() retorna -1.**
O método indexOf() busca um valor no array e retorna sua posição.
Nota: A primeira posição é 0, a segunda é 1, e assim por diante.

Array.lastIndexOf()
-------------------

Array.lastIndexOf() funciona como Array.indexOf(), mas a busca começa do final do array.

Array.find()
------------

O método find() retorna o valor do primeiro elemento que passa na função de teste.

Array.findIndex()
-----------------

O método findIndex() retorna o índice do primeiro elemento que passa na função de teste.

Publicado em 6-18 18:44

Doido Dev

Recursos do ECMAScript 5