JavaScript ES5
ECMAScript 2009, também conhecido como ES5, foi a primeira grande revisão do JavaScript.
Este capítulo descreve os recursos mais importantes do ES5.
Recursos do ES5
- "usar rigoroso"
- String [ número ] acesso
- Strings de várias linhas
- String.trim()
- Array.isArray()
- Matriz para Cada()
- Mapa de matriz()
- Filtro de matriz()
- Redução de matriz()
- Matriz reduzDireita()
- Matriz cada()
- Matriz alguns()
- Matriz indexOf()
- Matriz lastIndexOf()
- JSON.parse()
- JSON.stringify()
- Data.agora()
- Data paraISOString()
- Data para JSON()
- Getters e setters de propriedade
- Palavras reservadas como nomes de propriedade
- Métodos de objeto
- Objeto defineProperty()
- Function.bind()
- Vírgulas à direita
Suporte ao navegador
ES5 é totalmente suportado em todos os navegadores modernos:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9.0 | Yes | Yes | Yes | Yes |
A diretiva "usar estrita"
"use strict" define que o código JavaScript deve ser executado em "modo estrito".
Com o modo estrito você pode, por exemplo, não usar variáveis não declaradas.
Você pode usar o modo estrito em todos os seus programas. Ele ajuda você a escrever um código mais limpo, como impedir que você use variáveis não declaradas.
"use strict"é apenas uma expressão de string. Os navegadores antigos não apresentarão um erro se não o entenderem.
Leia mais em JS Strict Mode .
Acesso à propriedade em strings
O charAt()método retorna o caractere em um índice especificado (posição) em uma string:
Exemplo
var str = "HELLO WORLD";
str.charAt(0); // returns H
ES5 permite acesso de propriedade em strings:
Exemplo
var str = "HELLO WORLD";
str[0]; // returns H
O acesso à propriedade na string pode ser um pouco imprevisível.
Leia mais em Métodos de String JS .
Strings em várias linhas
O ES5 permite literais de string em várias linhas se escapou com uma barra invertida:Exemplo
"Hello \
Dolly!";
O método \ pode não ter suporte universal.
Os navegadores mais antigos podem tratar os espaços ao redor da barra invertida de maneira diferente.
Alguns navegadores mais antigos não permitem espaços atrás do caractere \.
Uma maneira mais segura de quebrar um literal de string é usar a adição de string:
Exemplo
"Hello " +
"Dolly!";
Palavras reservadas como nomes de propriedade
O ES5 permite palavras reservadas como nomes de propriedade:
Exemplo de objeto
var obj = {name: "John", new: "yes"}
Corte de string()
O trim()método remove espaços em branco de ambos os lados de uma string.
Exemplo
var str = " Hello World! ";
alert(str.trim());
Leia mais em Métodos de String JS .
Array.isArray()
O isArray()método verifica se um objeto é um array.
Exemplo
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
Leia mais em JS Arrays .
Matriz para Cada()
O forEach()método chama uma função uma vez para cada elemento da matriz.
Exemplo
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
Saiba mais em Métodos de iteração de matriz JS .
Mapa de matriz()
Este exemplo multiplica cada valor de matriz por 2:
Exemplo
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Saiba mais em Métodos de iteração de matriz JS .
Filtro de matriz()
Este exemplo cria uma nova matriz de elementos com um valor maior que 18:
Exemplo
var numbers = [45, 4, 9, 16, 25];
var over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Saiba mais em Métodos de iteração de matriz JS .
Redução de matriz()
Este exemplo encontra a soma de todos os números em uma matriz:
Exemplo
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Saiba mais em Métodos de iteração de matriz JS .
Matriz reduzDireita()
Este exemplo também encontra a soma de todos os números em uma matriz:
Exemplo
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Saiba mais em Métodos de iteração de matriz JS .
Matriz cada()
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;
}
Saiba mais em Métodos de iteração de matriz JS .
Matriz alguns()
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;
}
Saiba mais em Métodos de iteração de matriz JS .
Matriz indexOf()
Pesquisa um array por um valor de elemento e retorna sua posição.
Exemplo
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
Saiba mais em Métodos de iteração de matriz JS .
Matriz lastIndexOf()
lastIndexOf()é o mesmo que indexOf(), mas pesquisa a partir do final da matriz.
Exemplo
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
Saiba mais em Métodos de iteração de matriz JS .
JSON.parse()
Um uso comum do JSON é receber dados de um servidor web.
Imagine que você recebeu esta string de texto de um servidor web:
'{"name":"John", "age":30, "city":"New York"}'
A função JavaScript JSON.parse()é usada para converter o texto em um objeto JavaScript:
var obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
Leia mais em nosso tutorial JSON .
JSON.stringify()
Um uso comum do JSON é enviar dados para um servidor web.
Ao enviar dados para um servidor web, os dados devem ser uma string.
Imagine que temos este objeto em JavaScript:
var obj = {name:"John", age:30, city:"New York"};
Use a função JavaScript JSON.stringify()para convertê-lo em uma string.
var myJSON = JSON.stringify(obj);
O resultado será uma string seguindo a notação JSON.
myJSON agora é uma string e está pronto para ser enviado para um servidor:
Exemplo
var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
Leia mais em nosso tutorial JSON .
Data.agora()
Date.now() returns the number of milliseconds since zero date (January 1.
1970 00:00:00 UTC).
Example
var timInMSs = Date.now();
Date.now() returns the same as getTime() performed on a Date object.
Learn more in JS Dates.
Date toISOString()
The toISOString() method converts a Date object to a string, using the ISO standard format:
Example
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
Date toJSON()
toJSON() converts a Date object into a string, formatted as a JSON date.
JSON dates have the same format as the ISO-8601 standard: YYYY-MM-DDTHH:mm:ss.sssZ:
Example
d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();
Property Getters and Setters
ES5 lets you define object methods with a syntax that looks like getting or setting a property.
This example creates a getter for a property called fullName:
Example
// Create an object:
var person = {
firstName:
"John",
lastName : "Doe",
get
fullName() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.fullName;
This example creates a setter and a getter for the language property:
Example
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
get lang() {
return this.language;
},
set lang(value) {
this.language = value;
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.lang;
This example uses a setter to secure upper case updates of language:
Example
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
set lang(value) {
this.language = value.toUpperCase();
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the
object:
document.getElementById("demo").innerHTML =
person.language;
Learn more about Gettes and Setters in JS Object Accessors
Object.defineProperty()
Object.defineProperty() is a new Object method in ES5.
It lets you define an object property and/or change a property's value and/or metadata.
Example
// Create an Object:
var person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
//
Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
Next example is the same code, except it hides the language property from enumeration:
Example
// Create an Object:
var person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : false,
configurable : true
});
//
Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
This example creates a setter and a getter to secure upper case updates of language:
Example
/// Create an Object:
var person = {
firstName: "John",
lastName :
"Doe",
language : "NO"
};
// Change a Property:
Object.defineProperty(person, "language", {
get : function() { return
language },
set : function(value) { language = value.toUpperCase()}
});
// Change Language
person.language = "en";
// Display Language
document.getElementById("demo").innerHTML = person.language;
E5 Object Methods
ES5 added a lot of new Object Methods to JavaScript:
Managing Objects
// Create object with an existing object as prototype
Object.create(parent, donor)
// Adding or changing an object property
Object.defineProperty(object, property, descriptor)
// Adding or changing object properties
Object.defineProperties(object, descriptors)
// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)
// Returns all properties as an array
Object.getOwnPropertyNames(object)
// Accessing the prototype
Object.getPrototypeOf(object)
// Returns enumerable properties as an array
Object.keys(object)
Protecting Objects
// Prevents adding properties to an object
Object.preventExtensions(object)
// Returns true if properties can be added to an object
Object.isExtensible(object)
// Prevents changes of object properties (not values)
Object.seal(object)
// Returns true if object is sealed
Object.isSealed(object)
// Prevents any changes to an object
Object.freeze(object)
// Returns true if object is frozen
Object.isFrozen(object)
Learn more in Object ECMAScript5.
Trailing Commas
ES5 allows trailing commas in object and array definitions:
Object Example
person = {
firstName: "John",
lastName: "
Doe",
age: 46,
}
Array Example
points = [
1,
5,
10,
25,
40,
100,
];
WARNING !!!
JSON does not allow trailing commas.
JSON Objects:
//
Allowed:
var person = '{"firstName":"John", "lastName":"Doe",
"age":46}'
JSON.parse(person)
// Not allowed:
var person = '{"firstName":"John",
"lastName":"Doe", "age":46,}'
JSON.parse(person)
JSON Arrays:
//
Allowed:
points = [40, 100, 1, 5, 25, 10]
// Not allowed:
points =
[40, 100, 1, 5, 25, 10,]