JavaScript ES5

Wat is 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()
  • Eigenschap getters en setters
  • Nieuwe objecteigenschappen en methoden

ECMAScript 5 语法更改

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

"use strict" 指令

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

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

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

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

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

String.trim()

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

Voorbeeld

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

Probeer het zelf

Graag in: JS-stringsmethoden 中阅读更多内容。

Array.isArray()

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

Voorbeeld

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

Probeer het zelf

Graag in: JS 数组 中阅读更多内容。

Array.forEach()

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

Voorbeeld

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

Probeer het zelf

Graag in: JS array iteratiemethoden Meer leren.

Array.map()

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

Voorbeeld

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

Probeer het zelf

Graag in: JS array iteratiemethoden Meer leren.

Array.filter()

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

Voorbeeld

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

Probeer het zelf

Graag in: JS array iteratiemethoden Meer leren.

Array.reduce()

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

Voorbeeld

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

Probeer het zelf

Graag in: JS array iteratiemethoden Meer leren.

Array.reduceRight()

Deze voorbeeld is dezelfde als het bepalen van de som van alle getallen in de array：

Voorbeeld

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

Probeer het zelf

Graag in: JS array iteratiemethoden Meer leren.

Array.every()

Deze voorbeeld controleert of alle waarden hoger zijn dan 18：

Voorbeeld

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

Probeer het zelf

Graag in: JS array iteratiemethoden Meer leren.

Array.some()

Deze voorbeeld controleert of sommige waarden hoger zijn dan 18：

Voorbeeld

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

Probeer het zelf

Graag in: JS array iteratiemethoden Meer leren.

Array.indexOf()

Zoek naar een elementwaarde in de array en retourneer zijn positie：

Voorbeeld

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

Probeer het zelf

Graag in: JS array iteratiemethodenMeer leren.

Array.lastIndexOf()

Array.lastIndexOf() en Array.indexOf() Soortgelijk, maar begint aan de einde van de array te zoeken.

Voorbeeld

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

Probeer het zelf

Graag in: JS array iteratiemethoden Meer leren.

JSON.parse()

Een veelvoorkomende toepassing van JSON is het ontvangen van gegevens van een webserver.

Stel je voor dat je deze tekststring van een webserver ontvangt：

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

Functies in JavaScript JSON.parse() Gebruikt om tekst te converteren naar een JavaScript-object：

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

Probeer het zelf

Raadpleeg onze JSON handleiding Meer leren.

JSON.stringify()

Een veelvoorkomende toepassing van JSON is het sturen van gegevens naar een webserver.

Wanneer je gegevens naar een webserver stuurt, moeten deze gegevens een string zijn.

Stel je voor dat we in JavaScript deze object hebben：

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

Gebruik de JavaScript-functie JSON.stringify() om het te converteren naar een string.

var myJSON = JSON.stringify(obj);

Het resultaat zal een string zijn die volgt aan de JSON-representatie.

myJSON is nu een string, klaar om naar de server te worden verzonden：

Voorbeeld

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

Probeer het zelf

Raadpleeg onze JSON handleiding Meer leren.

Date.now()

Date.now() retourneert het aantal milliseconden sinds de datum (1 januari 1970 00:00:00:00).

Voorbeeld

var timInMSs = Date.now();

Probeer het zelf

Date.now() heeft dezelfde returnwaarde als het uitvoeren van getTime() op een Date-object.

Graag in: JS datum leer meer.

Eigenschap getters en setters

ES5 staat je toe om objectmethoden te definiëren met een syntaxis vergelijkbaar met het ophalen of instellen van eigenschappen.

Deze voorbeeld maakt een eigenschap voor fullName aan: getter:

Voorbeeld

// Maak een object aan:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Gebruik een getter om gegevens van het object weer te geven:
document.getElementById("demo").innerHTML = person.fullName;

Probeer het zelf

Deze voorbeeld maakt een setter en een getter:

Voorbeeld

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// Gebruik een setter om objecteigenschappen in te stellen:
person.lang = "en";
// Gebruik een getter om gegevens van het object weer te geven:
document.getElementById("demo").innerHTML = person.lang;

Probeer het zelf

Deze voorbeeld gebruikt een setter om ervoor te zorgen dat de taalhoogte bijgewerkt wordt:

Voorbeeld

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Gebruik een setter om objecteigenschappen in te stellen:
person.lang = "en";
// Toon gegevens van het object:
document.getElementById("demo").innerHTML = person.language;

Probeer het zelf

Graag in: JS object accessors leer meer over getters en setters.

Nieuwe objecteigenschappen en methoden

Object.defineProperty() is een nieuwe objectmethode in ES5.

Het staat je toe om objecteigenschappen te definiëren en/or de waarde en/or metadata van eigenschappen te wijzigen.

Voorbeeld

// Maak een object aan:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO", 
});
// Verander eigenschap:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable: true;
  configurable : true
});
// Enumereer eigenschappen
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Probeer het zelf

De volgende voorbeeld is hetzelfde code, maar het verbergt de eigenschap van de taal in de enumeratie:}

Voorbeeld

// Maak een object aan:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO", 
});
// Verander eigenschap:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Enumereer eigenschappen
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Probeer het zelf

Deze voorbeeld maakt een setter en getter om ervoor te zorgen dat de taal in hoofdletters wordt bijgewerkt:

Voorbeeld

// Maak een object aan:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO"
});
// Verander eigenschap:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Verander de taal
person.language = "en";
// Toon de taal
document.getElementById("demo").innerHTML = person.language;

Probeer het zelf

Nieuwe objectmethoden in ES5

ECMAScript 5 voegt veel nieuwe objectmethoden toe aan JavaScript:

// Voeg of wijzig een objecteigenschap toe
Object.defineProperty(object, property, descriptor)
// Voeg of wijzig meerdere objecteigenschappen toe
Object.defineProperties(object, descriptors)
// Bereik de eigenschap
Object.getOwnPropertyDescriptor(object, property)
// Geef alle eigenschappen terug als een array
Object.getOwnPropertyNames(object)
// Geef de enumerable eigenschappen terug als een array
Object.keys(object)
// Bereik het prototype
Object.getPrototypeOf(object)
// Voorkomt het toevoegen van eigenschappen aan het object
Object.preventExtensions(object)
// Wordt true geretourneerd als eigenschappen aan het object kunnen worden toegevoegd
Object.isExtensible(object)
// Voorkomt wijzigingen aan de eigenschappen van het object (niet de waarden)
Object.seal(object)
// Als het object gesloten is, wordt true geretourneerd
Object.isSealed(object)
// Voorkomt elke wijziging aan het object
Object.freeze(object)
// Als het object gefreeze is, wordt true geretourneerd
Object.isFrozen(object)

Graag in: Object ECMAScript5 Meer leren.

Eigenschapsbereik van strings

charAt() De methode keert de letter terug op de opgegeven index (positie):

Voorbeeld

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

Probeer het zelf

ECMAScript 5 staat eigenschapsbereik van strings toe:

Voorbeeld

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

Probeer het zelf

Het kan wat onvoorspelbaar zijn om eigenschappen van een string te bereiken.

Graag in: JS-stringsmethoden Meer leren.

Trailing komma's (Trailing Commas)

ECMAScript 5 staat trailing komma's toe in object- en arraydefinities:

Object-instantie

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

Array-instantie

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

WAARSCHUWING!!!

Internet Explorer 8 zal crashen.

JSON staat geen trailing komma's toe.

JSON-object:

// Toegestaan:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}
JSON.parse(person)
// Niet toegestaan:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}
JSON.parse(person)

JSON-array:

// Toegestaan:
points = [40, 100, 1, 5, 25, 10]
// Niet toegestaan:
points = [40, 100, 1, 5, 25, 10,]

Meerdere regels string

Voorbeeld

"Hello \",
Kitty!";

Probeer het zelf

De backslash-methode wordt mogelijk niet algemeen ondersteund.

Oudere browsers kunnen de ruimte rond het backslash-teken op verschillende manieren behandelen.

Enkele oude browsers toestaan geen spaties achter het backslash-teken.

Een veiligere manier om te splitsen stringtekst is door het gebruik van string concatenatie:

Voorbeeld

"Hello " + 
"Kitty!";

Probeer het zelf

Reservewoorden als eigenschapsnamen

ECMAScript 5 staat het gebruik van reservewoorden als eigenschapsnamen toe:

Object Voorbeeld

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

Probeer het zelf

ES5 (ECMAScript 5) Browser Ondersteuning

Chrome 23, IE 10 en Safari 6 zijn de eerste browsers die ECMAScript 5 volledig ondersteunen:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
September 2012 September 2012 April 2013 Juli 2012 Juli 2013