ES5 JavaScript

O que é o ECMAScript 5?

ECMAScript 5 também é conhecido como ES5 e ECMAScript 2009.

Este capítulo introduz algumas das funcionalidades mais importantes do ES5.

Características do ECMAScript 5

Essas são as novas funcionalidades lançadas em 2009:

  • "use strict" instrução
  • 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()
  • Atributos Getter e Setter
  • Novos atributos e métodos de objeto

Alterações na sintaxe do ECMAScript 5

  • Acesso a propriedades de strings [ ]
  • Virgulas ao final de literais de arrays e objetos
  • Literais de strings em multi-linhas
  • Palavras reservadas como nomes de propriedade

"use strict" instrução

"use strict"Define que o código JavaScript deve ser executado em modo estrito."

Por exemplo, ao usar o modo estrito, não é possível usar variáveis não declaradas.

Você pode usar o modo estrito em todos os programas. Isso pode ajudar a escrever código mais claro, por exemplo, impedindo o uso de variáveis não declaradas.

"use strict"Apenas uma expressão de string. Se os navegadores antigos não entenderem, não lançarão erros."

Por favor, leia Modo estrito do JS Mais informações aqui.

String.trim()

String.trim() Remove os caracteres de espaço em branco nos extremos da string.

Exemplo

var str = "       Hello World!        ";
alert(str.trim());

Experimente você mesmo

Por favor, consulte Métodos de string JS Leia mais aqui.

Array.isArray()

isArray() A função verifica se o objeto é um array.

Exemplo

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

Experimente você mesmo

Por favor, consulte JS Array Leia mais aqui.

Array.forEach()

forEach() A função é chamada uma vez para cada elemento do array.

Exemplo

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Experimente você mesmo

Por favor, consulte Métodos de iteração de arrays JS Aprenda mais sobre isso.

Array.map()

Neste exemplo, multiplica-se cada valor do array por 2:

Exemplo

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

Experimente você mesmo

Por favor, consulte Métodos de iteração de arrays JS Aprenda mais sobre isso.

Array.filter()

Neste exemplo, cria-se um novo array com elementos cujo valor é maior que 18:

Exemplo

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

Experimente você mesmo

Por favor, consulte Métodos de iteração de arrays JS Aprenda mais sobre isso.

Array.reduce()

Este exemplo determina a soma total de todos os números do array:

Exemplo

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

Experimente você mesmo

Por favor, consulte Métodos de iteração de arrays JS Aprenda mais sobre isso.

Array.reduceRight()

Este exemplo também é para determinar a soma de todos os números no array：

Exemplo

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

Experimente você mesmo

Por favor, consulte Métodos de iteração de arrays JS Aprenda mais sobre isso.

Array.every()

Este exemplo verifica se todos os valores são maiores que 18：

Exemplo

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

Experimente você mesmo

Por favor, consulte Métodos de iteração de arrays JS Aprenda mais sobre isso.

Array.some()

Este exemplo verifica se alguns valores são maiores que 18：

Exemplo

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
function myFunction(value) {
  return value > 18;
}

Experimente você mesmo

Por favor, consulte Métodos de iteração de arrays JS Aprenda mais sobre isso.

Array.indexOf()

Procurar um valor específico no array e retornar sua posição：

Exemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Experimente você mesmo

Por favor, consulte Métodos de iteração de arrays JSAprenda mais sobre isso.

Array.lastIndexOf()

Array.lastIndexOf() com Array.indexOf() Similar, mas começa a busca do final do array.

Exemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Experimente você mesmo

Por favor, consulte Métodos de iteração de arrays JS Aprenda mais sobre isso.

JSON.parse()

Um uso comum do JSON é receber dados do servidor Web。

Imaginemos que você recebeu esta string de texto do servidor Web：

'{"name":"Bill", "age":62, "city":"Seatle"}'

Função do JavaScript JSON.parse() Usada para converter texto em objeto JavaScript：

var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');

Experimente você mesmo

Por favor, consulte nossa Tutorial JSON Aprenda mais sobre isso.

JSON.stringify()

Um uso comum do JSON é enviar dados para o servidor Web。

Quando enviarmos dados para o servidor Web, os dados devem ser uma string。

Imaginemos que temos este objeto no JavaScript：

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

Use a função JavaScript JSON.stringify() para convertê-lo em string。

var myJSON = JSON.stringify(obj);

O resultado será uma string que segue a representação JSON。

myJSON agora é uma string, pronta para ser enviada para o servidor：

Exemplo

var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

Experimente você mesmo

Por favor, consulte nossa Tutorial JSON Aprenda mais sobre isso.

Date.now()

Date.now() retorna o número de milissegundos desde a data zero (1 de janeiro de 1970, 00:00:00:00).

Exemplo

var timInMSs = Date.now();

Experimente você mesmo

Date.now() retorna o mesmo resultado que o getTime() executado no objeto Date.

Por favor, consulte JS Data aprenda mais.

Atributos Getter e Setter

O ES5 permite que você defina métodos de objeto usando uma sintaxe semelhante à de obter ou definir atributos.

Este exemplo cria um atributo chamado fullName: getter:

Exemplo

// Criar objeto:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Usa getter para exibir dados do objeto:
document.getElementById("demo").innerHTML = person.fullName;

Experimente você mesmo

Este exemplo cria um setter e um getter:

Exemplo

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  ,
  set lang(value) {
    this.language = value;
  }
});
// Usa setter para definir atributo do objeto:
person.lang = "en";
// Usa getter para exibir dados do objeto:
document.getElementById("demo").innerHTML = person.lang;

Experimente você mesmo

Este exemplo usa setter para garantir que a atualização do idioma seja em maiúsculas:

Exemplo

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Usa setter para definir atributo do objeto:
person.lang = "en";
// Exibe dados do objeto:
document.getElementById("demo").innerHTML = person.language;

Experimente você mesmo

Por favor, consulte Acessores de objeto JS aprenda mais sobre getters e setters.

Novos atributos e métodos de objeto

Object.defineProperty() É um novo método de objeto no ES5.

Permite que você defina atributos do objeto e/ou altere os valores e/ou metadados dos atributos.

Exemplo

// Criar objeto:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Mudar propriedade:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable: true,
  configurable : true
});
// Enumerar propriedades
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Experimente você mesmo

O próximo exemplo é o mesmo código, mas esconde a propriedade de linguagem na enumeração:

Exemplo

// Criar objeto:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Mudar propriedade:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Enumerar propriedades
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Experimente você mesmo

Este exemplo cria um setter e getter para garantir a atualização em maiúsculo da linguagem:

Exemplo

// Criar objeto:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO"
});
// Mudar propriedade:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Mudar a linguagem
person.language = "en";
// Exibir a linguagem
document.getElementById("demo").innerHTML = person.language;

Experimente você mesmo

Novos métodos de objetos ES5

ECMAScript 5 adicionou muitos novos métodos de objetos ao JavaScript:

// Adicionar ou alterar propriedades de objetos
Object.defineProperty(object, property, descriptor)
// Adicionar ou alterar várias propriedades de objetos
Object.defineProperties(object, descriptors)
// Acessar a propriedade
Object.getOwnPropertyDescriptor(object, property)
// Retornar todas as propriedades como um array
Object.getOwnPropertyNames(object)
// Retornar as propriedades enumeráveis como um array
Object.keys(object)
// Acessar o原型
Object.getPrototypeOf(object)
// Impede a adição de propriedades ao objeto
Object.preventExtensions(object)
// Se puder adicionar propriedades ao objeto, retorna true
Object.isExtensible(object)
// Impede alterações nas propriedades do objeto (não nos valores)
Object.seal(object)
// Se o objeto estiver selado, retorna true
Object.isSealed(object)
// Impede qualquer alteração no objeto
Object.freeze(object)
// Se o objeto estiver congelado, retorna true
Object.isFrozen(object)

Por favor, consulte Objeto ECMAScript5 Aprenda mais sobre isso.

Acesso a propriedades de string

charAt() O método retorna o caractere especificado no índice (posição) da string:

Exemplo

var str = "HELLO WORLD";
str.charAt(0);            // Retorna H

Experimente você mesmo

O ECMAScript 5 permite acesso a propriedades de strings:

Exemplo

var str = "HELLO WORLD";
str[0];                   // Retorna H

Experimente você mesmo

O acesso a propriedades de string pode ser um pouco imprevisível.

Por favor, consulte Métodos de string JS Aprenda mais sobre isso.

Vírgulas trailing (Trailing Commas)

O ECMAScript 5 permite vírgulas trailing em definições de objetos e arrays:

Instância Object

person = {
  firstName: "Bill",
  lastName: " Gates",
  age: 62,
}

Instância Array

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

Aviso!!!

O Internet Explorer 8 vai falhar.

O JSON não permite vírgulas trailing.

Objeto JSON:

// Permitido:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}
JSON.parse(person)
// Não permitido:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}
JSON.parse(person)

Array JSON:

// Permitido:
points = [40, 100, 1, 5, 25, 10]
// Não permitido:
points = [40, 100, 1, 5, 25, 10,]

Strings de várias linhas

Se o caractere de escape for usado, ECMAScript 5 permite strings literais de várias linhas:

Exemplo

"Hello \
Kitty!";

Experimente você mesmo

O método de escape pode não ser amplamente suportado.

Navegadores mais antigos podem lidar de diferentes maneiras com espaços ao redor do caractere de escape.

Alguns navegadores antigos não permitem espaços após o caractere \.

Uma maneira mais segura de dividir uma string literal é usar a adição de strings:

Exemplo

"Hello " + 
"Kitty!";

Experimente você mesmo

Palavras reservadas como nomes de propriedades

ECMAScript 5 permite que palavras reservadas sejam usadas como nomes de propriedades:

Exemplo de Objeto

var obj = {name: "Bill", new: "yes"}

Experimente você mesmo

Suporte do Navegador para ES5 (ECMAScript 5)

Chrome 23, IE 10 e Safari 6 são os primeiros navegadores a suportar completamente ECMAScript 5:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
Setembro de 2012 Setembro de 2012 Abril de 2013 Julho de 2012 Julho de 2013