JavaScript ES5
ECMAScript 2009, ook bekend als ES5, was de eerste grote herziening van JavaScript.
Dit hoofdstuk beschrijft de belangrijkste kenmerken van ES5.
ES5-functies
- "gebruik strikt"
- String[ nummer ] toegang
- Snaren met meerdere regels
- String.trim()
- Matrix.isArray()
- Matrix voorElke()
- Matrixkaart()
- Matrixfilter()
- Array reduce()
- Array reduceRight()
- Elke() rangschikken
- Array wat()
- Matrix indexOf()
- Matrix lastIndexOf()
- JSON.parse()
- JSON.stringify()
- Datum.nu()
- Datum toISOString()
- Datum toJSON()
- Property getters en setters
- Gereserveerde woorden als eigenschapsnamen
- Objectmethoden
- Object definiërenProperty()
- Functie.bind()
- volgkomma's
Browserondersteuning
ES5 wordt volledig ondersteund in alle moderne browsers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9.0 | Yes | Yes | Yes | Yes |
De "gebruik strikte" richtlijn
"use strict" definieert dat de JavaScript-code moet worden uitgevoerd in "strikte modus".
Met de strikte modus kunt u bijvoorbeeld geen niet-gedeclareerde variabelen gebruiken.
U kunt de strikte modus in al uw programma's gebruiken. Het helpt je om schonere code te schrijven, zoals het voorkomen dat je niet-gedeclareerde variabelen gebruikt.
"use strict"is slechts een tekenreeksexpressie. Oude browsers zullen geen foutmelding geven als ze deze niet begrijpen.
Lees meer in JS Strikte modus .
Toegang tot eigendom via strings
De charAt()methode retourneert het teken op een opgegeven index (positie) in een tekenreeks:
Voorbeeld
var str = "HELLO WORLD";
str.charAt(0); // returns H
ES5 staat toegang tot eigendom toe op strings:
Voorbeeld
var str = "HELLO WORLD";
str[0]; // returns H
Property-toegang op string is misschien een beetje onvoorspelbaar.
Lees meer in JS String-methoden .
Strings over meerdere regels
ES5 staat letterlijke tekenreeksen over meerdere regels toe als ze worden geëscaped met een backslash:Voorbeeld
"Hello \
Dolly!";
De \-methode heeft mogelijk geen universele ondersteuning.
Oudere browsers kunnen de spaties rond de backslash anders behandelen.
Sommige oudere browsers staan geen spaties toe achter het teken \.
Een veiligere manier om een letterlijke tekenreeks op te splitsen, is door tekenreekstoevoeging te gebruiken:
Voorbeeld
"Hello " +
"Dolly!";
Gereserveerde woorden als eigenschapsnamen
ES5 staat gereserveerde woorden toe als eigenschapsnamen:
Objectvoorbeeld
var obj = {name: "John", new: "yes"}
String trim()
De trim()methode verwijdert witruimte aan beide zijden van een string.
Voorbeeld
var str = " Hello World! ";
alert(str.trim());
Lees meer in JS String-methoden .
Matrix.isArray()
De isArray()methode controleert of een object een array is.
Voorbeeld
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
Lees meer in JS-arrays .
Matrix voorElke()
De forEach()methode roept een functie één keer aan voor elk array-element.
Voorbeeld
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
Lees meer in JS-array-iteratiemethoden .
Matrixkaart()
In dit voorbeeld wordt elke matrixwaarde vermenigvuldigd met 2:
Voorbeeld
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Lees meer in JS-array-iteratiemethoden .
Matrixfilter()
In dit voorbeeld wordt een nieuwe array gemaakt van elementen met een waarde groter dan 18:
Voorbeeld
var numbers = [45, 4, 9, 16, 25];
var over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Lees meer in JS-array-iteratiemethoden .
Array reduce()
Dit voorbeeld vindt de som van alle getallen in een array:
Voorbeeld
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Lees meer in JS-array-iteratiemethoden .
Array reduceRight()
Dit voorbeeld vindt ook de som van alle getallen in een array:
Voorbeeld
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Lees meer in JS-array-iteratiemethoden .
Elke() rangschikken
In dit voorbeeld wordt gecontroleerd 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;
}
Lees meer in JS-array-iteratiemethoden .
Array wat()
In dit voorbeeld wordt gecontroleerd 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;
}
Lees meer in JS-array-iteratiemethoden .
Matrix indexOf()
Zoek in een array naar een elementwaarde en retourneert de positie ervan.
Voorbeeld
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
Lees meer in JS-array-iteratiemethoden .
Matrix lastIndexOf()
lastIndexOf()is hetzelfde als indexOf(), maar zoekt vanaf het einde van de array.
Voorbeeld
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
Lees meer in JS-array-iteratiemethoden .
JSON.parse()
Een veelgebruikt gebruik van JSON is het ontvangen van gegevens van een webserver.
Stel je voor dat je deze tekstreeks van een webserver hebt ontvangen:
'{"name":"John", "age":30, "city":"New York"}'
De JavaScript-functie JSON.parse()wordt gebruikt om de tekst om te zetten in een JavaScript-object:
var obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
Lees meer in onze JSON-zelfstudie .
JSON.stringify()
Een veelgebruikt gebruik van JSON is het verzenden van gegevens naar een webserver.
Wanneer gegevens naar een webserver worden verzonden, moeten de gegevens een string zijn.
Stel je voor dat we dit object in JavaScript hebben:
var obj = {name:"John", age:30, city:"New York"};
Gebruik de JavaScript-functie JSON.stringify()om het om te zetten in een string.
var myJSON = JSON.stringify(obj);
Het resultaat is een tekenreeks die de JSON-notatie volgt.
myJSON is nu een string en klaar om naar een server te worden verzonden:
Voorbeeld
var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
Lees meer in onze JSON-zelfstudie .
Datum.nu()
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,]