JavaScript ES5

¿Qué es ECMAScript 5?

ECMAScript 5 也称为 ES5 和 ECMAScript 2009。

本章介绍 ES5 的一些最重要的特性。

ECMAScript 5 特性

这些是 2009 年发布的新特性：

  • "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()
  • Getter y Setter de propiedades
  • nuevas propiedades y métodos de objeto

ECMAScript 5 语法更改

  • 对字符串的属性访问 [ ]
  • 数组和对象字面量中的尾随逗号
  • 多行字符串字面量
  • 作为属性名称的保留字

"use strict" 指令

"use strict" 定义 JavaScript 代码应该以“严格模式”执行。

例如，使用严格模式，不能使用未声明的变量。

您可以在所有程序中使用严格模式。它可以帮助您编写更清晰的代码，例如阻止您使用未声明的变量。

"use strict” 只是一个字符串表达式。旧浏览器如果不理解它们就不会抛出错误。

请阅读 JS 严格模式 中的更多内容。

String.trim()

String.trim() 删除字符串两端的空白字符。

Ejemplo

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

Prueba por tu cuenta

请在 JS 字符串方法 在此处阅读更多内容。

Array.isArray()

isArray() 该方法检查对象是否为数组。

Ejemplo

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

Prueba por tu cuenta

请在 JS 数组 在此处阅读更多内容。

Array.forEach()

forEach() 该方法为每个数组元素调用一次函数。

Ejemplo

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

Prueba por tu cuenta

请在 Métodos de iteración de arrays en JS 中学习更多内容。

Array.map()

此示例给每个数组值乘以 2：

Ejemplo

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

Prueba por tu cuenta

请在 Métodos de iteración de arrays en JS 中学习更多内容。

Array.filter()

此示例用值大于 18 的元素创建一个新数组：

Ejemplo

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

Prueba por tu cuenta

请在 Métodos de iteración de arrays en JS 中学习更多内容。

Array.reduce()

此示例确定数组中所有数的总和：

Ejemplo

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

Prueba por tu cuenta

请在 Métodos de iteración de arrays en JS 中学习更多内容。

Array.reduceRight()

Este ejemplo también es para determinar la suma total de todos los números en el array：

Ejemplo

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

Prueba por tu cuenta

请在 Métodos de iteración de arrays en JS 中学习更多内容。

Array.every()

Este ejemplo verifica si todos los valores son mayores que 18：

Ejemplo

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

Prueba por tu cuenta

请在 Métodos de iteración de arrays en JS 中学习更多内容。

Array.some()

Este ejemplo verifica si algunos valores son mayores que 18：

Ejemplo

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

Prueba por tu cuenta

请在 Métodos de iteración de arrays en JS 中学习更多内容。

Array.indexOf()

Busca un valor específico en el array y devuelve su posición：

Ejemplo

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

Prueba por tu cuenta

请在 Métodos de iteración de arrays en JS中学习更多内容。

Array.lastIndexOf()

Array.lastIndexOf() Con Array.indexOf() Similar, pero comienza a buscar desde el final del array。

Ejemplo

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

Prueba por tu cuenta

请在 Métodos de iteración de arrays en JS 中学习更多内容。

JSON.parse()

Un uso común de JSON es recibir datos desde el servidor web。

Imaginemos que recibimos esta cadena de texto desde el servidor web：

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

Funciones de JavaScript JSON.parse() Se utiliza para convertir texto en un objeto JavaScript：

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

Prueba por tu cuenta

Por favor, consulte nuestra Tutorial JSON 中学习更多内容。

JSON.stringify()

Un uso común de JSON es enviar datos a un servidor web。

Cuando enviamos datos a un servidor web, los datos deben ser una cadena。

Imaginemos, tenemos este objeto en JavaScript：

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

Por favor, use la función JavaScript JSON.stringify() para convertirla en una cadena。

var myJSON = JSON.stringify(obj);

El resultado será una cadena que sigue la representación JSON。

myJSON ahora es una cadena, lista para enviar al servidor：

Ejemplo

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

Prueba por tu cuenta

Por favor, consulte nuestra Tutorial JSON 中学习更多内容。

Date.now()

Date.now() devuelve el número de milisegundos transcurridos desde la fecha cero (1 de enero de 1970 a las 00:00:00:00).

Ejemplo

var timInMSs = Date.now();

Prueba por tu cuenta

Date.now() devuelve el mismo resultado que ejecutar getTime() en el objeto Date.

请在 JS Fecha para aprender más.

Getter y Setter de propiedades

ES5 le permite definir métodos de objeto utilizando una sintaxis similar a obtener o establecer propiedades.

Este ejemplo crea un getter:

Ejemplo

// Crear objeto:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Usar getter para mostrar datos provenientes del objeto:
document.getElementById("demo").innerHTML = person.fullName;

Prueba por tu cuenta

Este ejemplo crea un setter y un getter:

Ejemplo

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  get lang() {
    return this.language;
  ,
  set lang(value) {
    this.language = value;
  }
});
// Usar setter para establecer propiedades del objeto:
person.lang = "en";
// Usar getter para mostrar datos provenientes del objeto:
document.getElementById("demo").innerHTML = person.lang;

Prueba por tu cuenta

Este ejemplo utiliza setter para asegurar que la actualización de la capitalización del idioma sea correcta:

Ejemplo

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Usar setter para establecer propiedades del objeto:
person.lang = "en";
// Mostrar datos provenientes del objeto:
document.getElementById("demo").innerHTML = person.language;

Prueba por tu cuenta

请在 Accesores de objeto JS para aprender más sobre getters y setters.

nuevas propiedades y métodos de objeto

Object.defineProperty() es un nuevo método de objeto en ES5.

permite que defina propiedades de objeto y / o cambie valores y / o metadatos de propiedades.

Ejemplo

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

Prueba por tu cuenta

El siguiente ejemplo es el mismo código, pero oculta la propiedad de idioma en la enumeración:}

Ejemplo

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

Prueba por tu cuenta

Este ejemplo crea un setter y un getter para asegurar la actualización en mayúsculas del idioma:

Ejemplo

// Crear objeto:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO"
});
// Cambiar propiedad:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Cambiar el idioma
person.language = "en";
// Mostrar el idioma
document.getElementById("demo").innerHTML = person.language;

Prueba por tu cuenta

Nuevos métodos de objeto en ES5

ECMAScript 5 añadió muchos nuevos métodos de objeto a JavaScript:

// Añadir o cambiar una propiedad de un objeto
Object.defineProperty(object, property, descriptor)
// Añadir o cambiar múltiples propiedades de un objeto
Object.defineProperties(object, descriptors)
// Acceder a la propiedad
Object.getOwnPropertyDescriptor(object, property)
// Devuelve todas las propiedades como un array
Object.getOwnPropertyNames(object)
// Devuelve las propiedades enumerables como un array
Object.keys(object)
// Acceder al prototipo
Object.getPrototypeOf(object)
// 防止向对象添加属性
Object.preventExtensions(object)
// 如果可以将属性添加到对象，则返回 true
Object.isExtensible(object)
// 防止更改对象属性（而不是值）
Object.seal(object)
// 如果对象被密封，则返回 true
Object.isSealed(object)
// 防止对对象进行任何更改
Object.freeze(object)
// 如果对象被冻结，则返回 true
Object.isFrozen(object)

请在 对象 ECMAScript5 中学习更多内容。

对字符串的属性访问

charAt() 方法返回字符串中指定索引（位置）的字符：

Ejemplo

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

Prueba por tu cuenta

ECMAScript 5 允许对字符串进行属性访问：

Ejemplo

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

Prueba por tu cuenta

对字符串的属性访问可能有点不可预测。

请在 JS 字符串方法 中学习更多内容。

尾随逗号(Trailing Commas)

ECMAScript 5 允许在对象和数组定义中使用尾随逗号：

Object 实例

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

Array 实例

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

警告！！！

Internet Explorer 8 将崩溃。

JSON 不允许使用尾随逗号。

JSON 对象：

// 允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)
// 不允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

JSON 数组：

// 允许：
points = [40, 100, 1, 5, 25, 10]
// 不允许：
points = [40, 100, 1, 5, 25, 10,]

Texto de cadena multilínea

Ejemplo

"Hello \",
Kitty!";

Prueba por tu cuenta

El método \ puede no tener soporte general.

Los navegadores más antiguos pueden manejar de manera diferente los espacios alrededor del carácter diagonal invertida.

Algunos navegadores antiguos no permiten espacios después del carácter \.

Una manera más segura de descomponer texto de cadena es usar concatenación de cadenas:

Ejemplo

"Hello " + 
"Kitty!";

Prueba por tu cuenta

Palabras reservadas como nombres de propiedades

ECMAScript 5 permite usar palabras reservadas como nombres de propiedades:

Ejemplo de objeto

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

Prueba por tu cuenta

Soporte de navegador para ES5 (ECMAScript 5)

Chrome 23, IE 10 y Safari 6 son los primeros navegadores que completamente soportan ECMAScript 5:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
Septiembre de 2012 Septiembre de 2012 Abril de 2013 Julio de 2012 Julio de 2013