ES5 JavaScript

Qu'est-ce que 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 et setter des propriétés
  • Nouvelles propriétés et méthodes d'objet

ECMAScript 5 语法更改

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

"use strict" 指令

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

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

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

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

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

String.trim()

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

Exemple

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

Essayez-le vous-même

Veuillez Méthodes de chaîne JS 中阅读更多内容。

Array.isArray()

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

Exemple

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

Essayez-le vous-même

Veuillez JS 数组 中阅读更多内容。

Array.forEach()

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

Exemple

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

Essayez-le vous-même

Veuillez Méthodes d'itération de tableau JS Pour en savoir plus, consultez

Array.map()

这个例子给每个数组值乘以 2：

Exemple

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

Essayez-le vous-même

Veuillez Méthodes d'itération de tableau JS Pour en savoir plus, consultez

Array.filter()

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

Exemple

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

Essayez-le vous-même

Veuillez Méthodes d'itération de tableau JS Pour en savoir plus, consultez

Array.reduce()

这个例子确定数组中所有数的总和：

Exemple

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

Essayez-le vous-même

Veuillez Méthodes d'itération de tableau JS Pour en savoir plus, consultez

Array.reduceRight()

Cet exemple est également pour déterminer la somme de tous les nombres dans le tableau :

Exemple

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

Essayez-le vous-même

Veuillez Méthodes d'itération de tableau JS Pour en savoir plus, consultez

Array.every()

Cet exemple vérifie si toutes les valeurs sont supérieures à 18 :

Exemple

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

Essayez-le vous-même

Veuillez Méthodes d'itération de tableau JS Pour en savoir plus, consultez

Array.some()

Cet exemple vérifie si certains valeurs sont supérieures à 18 :

Exemple

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

Essayez-le vous-même

Veuillez Méthodes d'itération de tableau JS Pour en savoir plus, consultez

Array.indexOf()

Recherche de la valeur d'un élément dans le tableau et retour de sa position :

Exemple

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

Essayez-le vous-même

Veuillez Méthodes d'itération de tableau JSPour en savoir plus, consultez

Array.lastIndexOf()

Array.lastIndexOf() et Array.indexOf() De même, mais en commençant par la fin du tableau.

Exemple

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

Essayez-le vous-même

Veuillez Méthodes d'itération de tableau JS Pour en savoir plus, consultez

JSON.parse()

Une utilisation courante du JSON est de recevoir des données d'un serveur Web.

Imaginez que vous recevez cette chaîne de texte du serveur Web :

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

Fonctions JavaScript JSON.parse() Utilisée pour convertir du texte en objet JavaScript :

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

Essayez-le vous-même

Veuillez consulter notre Tutoriel JSON Pour en savoir plus, consultez

JSON.stringify()

Une utilisation courante du JSON est d'envoyer des données à un serveur Web.

Lorsque vous envoyez des données à un serveur Web, les données doivent être sous forme de chaîne.

Imaginez, nous avons cet objet en JavaScript :

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

Veuillez utiliser la fonction JavaScript JSON.stringify() pour la convertir en chaîne.

var myJSON = JSON.stringify(obj);

Le résultat sera une chaîne suivant la syntaxe JSON.

myJSON est maintenant une chaîne, prête à être envoyée au serveur :

Exemple

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

Essayez-le vous-même

Veuillez consulter notre Tutoriel JSON Pour en savoir plus, consultez

Date.now()

Date.now() renvoie le nombre de millisecondes écoulées depuis la date zéro (1er janvier 1970 00:00:00:00).

Exemple

var timInMSs = Date.now();

Essayez-le vous-même

Date.now() renvoie le même résultat que l'exécution de getTime() sur un objet Date.

Veuillez JS Date Pour en savoir plus.

Getter et setter des propriétés

ES5 vous permet de définir des méthodes d'objet en utilisant une syntaxe similaire à celle de la récupération ou de la définition des propriétés.

Cet exemple crée une propriété nommée fullName getter:

Exemple

// Créer un objet :
var person = {
  firstName: "Bill",
  lastName : "Gates"
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Utilisez un getter pour afficher les données provenant de l'objet :
document.getElementById("demo").innerHTML = person.fullName;

Essayez-le vous-même

Cet exemple crée un setter et getter:

Exemple

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// Utilisez un setter pour définir une propriété de l'objet :
person.lang = "en";
// Utilisez un getter pour afficher les données provenant de l'objet :
document.getElementById("demo").innerHTML = person.lang;

Essayez-le vous-même

Cet exemple utilise un setter pour s'assurer que la mise à jour de la langue est en majuscules :

Exemple

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Utilisez un setter pour définir une propriété de l'objet :
person.lang = "en";
// Affichez les données provenant de l'objet :
document.getElementById("demo").innerHTML = person.language;

Essayez-le vous-même

Veuillez Accesseurs d'objet JS Pour en savoir plus sur les getters et les setters, consultez.

Nouvelles propriétés et méthodes d'objet

Object.defineProperty() C'est une nouvelle méthode d'objet dans ES5.

Cela vous permet de définir les propriétés de l'objet et/ou de modifier les valeurs et/ou les métadonnées des propriétés.

Exemple

// Créer un objet :
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO", 
});
// Changer la propriété :
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// Enumérer les propriétés
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Essayez-le vous-même

Dans l'exemple suivant, le code est le même, mais l'attribut de langue est caché dans l'enumeration :

Exemple

// Créer un objet :
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO", 
});
// Changer la propriété :
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Enumérer les propriétés
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Essayez-le vous-même

Cet exemple crée un setter et un getter pour s'assurer que la mise à jour de la langue est en majuscules :

Exemple

// Créer un objet :
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO"
});
// Changer la propriété :
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Changer la langue
person.language = "en";
// Afficher la langue
document.getElementById("demo").innerHTML = person.language;

Essayez-le vous-même

Nouvelles méthodes d'objet ES5

ECMAScript 5 a ajouté de nombreux nouveaux méthodes d'objet pour JavaScript :

// Ajouter ou modifier une propriété d'objet
Object.defineProperty(object, property, descriptor)
// Ajouter ou modifier plusieurs propriétés d'objet
Object.defineProperties(object, descriptors)
// Accéder à la propriété
Object.getOwnPropertyDescriptor(object, property)
// Retourner toutes les propriétés sous forme d'array
Object.getOwnPropertyNames(object)
// Retourner les propriétés enumerables sous forme d'array
Object.keys(object)
// Accéder à l'original
Object.getPrototypeOf(object)
// 防止向对象添加属性
Object.preventExtensions(object)
// 如果可以将属性添加到对象，则返回 true
// Empêche l'ajout de propriétés à l'objet
// Si l'objet peut avoir des propriétés ajoutées, retourne true
// Empêche l'ajout de propriétés à l'objet
// Empêche l'ajout de propriétés à l'objet
// Empêche la modification des propriétés de l'objet (et non des valeurs)
// Si l'objet est scellé, retourne true
// Empêche toute modification de l'objet
// Si l'objet est gelé, retourne true
Object.isFrozen(object)

Veuillez Objet ECMAScript5 Pour en savoir plus, consultez

L'accès aux propriétés des chaînes

charAt() La méthode retourne le caractère à l'indice (position) spécifié dans la chaîne :

Exemple

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

Essayez-le vous-même

ECMAScript 5 permet l'accès aux propriétés des chaînes :

Exemple

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

Essayez-le vous-même

L'accès aux propriétés des chaînes peut être un peu imprévisible.

Veuillez Méthodes de chaîne JS Pour en savoir plus, consultez

Virgules en fin de ligne (Trailing Commas)

ECMAScript 5 permet l'utilisation des virgules en fin de ligne dans les définitions d'objets et d'arrays :

Instance d'Object

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

Instance d'Array

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

Attention !!

Internet Explorer 8 va planter.

JSON n'autorise pas les virgules en fin de ligne.

Objet JSON :

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

Tableau de JSON :

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

Chaînes de caractères multilignes

Si vous utilisez des的反斜杠 pour échapper, ECMAScript 5 permet des chaînes de caractères multilignes (littéraux) :

Exemple

"Hello \
Kitty!";

Essayez-le vous-même

La méthode \ peut ne pas être supportée universellement.

Les navigateurs plus anciens peuvent traiter différemment les espaces autour des的反斜杠.

Certains navigateurs anciens ne permettent pas d'espaces après le caractères \ .

Une méthode plus sécurisée pour décomposer une chaîne de caractères est d'utiliser l'ajout de chaînes :

Exemple

"Hello " + 
"Kitty!";

Essayez-le vous-même

Mots réservés en tant que noms d'attribut

ECMAScript 5 permet d'utiliser des mots réservés comme noms d'attribut :

Exemple d'objet

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

Essayez-le vous-même

Support du navigateur pour ES5 (ECMAScript 5)

Chrome 23, IE 10 et Safari 6 sont les premiers navigateurs à prendre en charge pleinement ECMAScript 5 :

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
Septembre 2012 Septembre 2012 Avril 2013 Juillet 2012 Juillet 2013