JavaScript ES5
ECMAScript 2009, auch bekannt als ES5, war die erste größere Überarbeitung von JavaScript.
Dieses Kapitel beschreibt die wichtigsten Funktionen von ES5.
ES5-Funktionen
- "streng verwenden"
- String[ Zahl ] Zugriff
- Mehrzeilige Zeichenfolgen
- String.trim()
- Array.isArray()
- Array forEach()
- Array-Map()
- Array-Filter()
- Array reduzieren ()
- Array ReduceRight()
- Array alle ()
- Array einige ()
- Array indexOf()
- Array lastIndexOf()
- JSON.parse()
- JSON.stringify()
- Datum.jetzt()
- Datum zuISOString()
- Datum zu JSON()
- Eigenschafts-Getter und -Setter
- Reservierte Wörter als Eigenschaftsnamen
- Objektmethoden
- Objekt defineProperty()
- Funktion.bind()
- Nachgestellte Kommas
Browser-Unterstützung
ES5 wird in allen modernen Browsern vollständig unterstützt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9.0 | Yes | Yes | Yes | Yes |
Die „Use Strict“-Richtlinie
"use strict" definiert, dass der JavaScript-Code im "strikten Modus" ausgeführt werden soll.
Im strikten Modus können Sie beispielsweise keine nicht deklarierten Variablen verwenden.
Sie können den strikten Modus in allen Ihren Programmen verwenden. Es hilft Ihnen, saubereren Code zu schreiben und Sie daran zu hindern, nicht deklarierte Variablen zu verwenden.
"use strict"ist nur ein String-Ausdruck. Alte Browser werfen keinen Fehler, wenn sie ihn nicht verstehen.
Lesen Sie mehr in JS Strict Mode .
Eigenschaftszugriff auf Zeichenfolgen
Die charAt()Methode gibt das Zeichen an einem angegebenen Index (Position) in einer Zeichenfolge zurück:
Beispiel
var str = "HELLO WORLD";
str.charAt(0); // returns H
ES5 ermöglicht den Eigenschaftszugriff auf Zeichenfolgen:
Beispiel
var str = "HELLO WORLD";
str[0]; // returns H
Der Eigenschaftszugriff auf Zeichenfolgen ist möglicherweise etwas unvorhersehbar.
Lesen Sie mehr in JS-String-Methoden .
Zeichenfolgen über mehrere Zeilen
ES5 erlaubt Zeichenfolgenliterale über mehrere Zeilen, wenn sie mit einem Backslash maskiert werden:Beispiel
"Hello \
Dolly!";
Die \-Methode hat möglicherweise keine universelle Unterstützung.
Ältere Browser behandeln die Leerzeichen um den umgekehrten Schrägstrich möglicherweise anders.
Einige ältere Browser erlauben keine Leerzeichen hinter dem \-Zeichen.
Eine sicherere Möglichkeit, ein Zeichenfolgenliteral aufzulösen, ist die Verwendung einer Zeichenfolgenaddition:
Beispiel
"Hello " +
"Dolly!";
Reservierte Wörter als Eigenschaftsnamen
ES5 erlaubt reservierte Wörter als Eigenschaftsnamen:
Objektbeispiel
var obj = {name: "John", new: "yes"}
Saiten trimmen ()
Die trim()Methode entfernt Leerzeichen von beiden Seiten einer Zeichenfolge.
Beispiel
var str = " Hello World! ";
alert(str.trim());
Lesen Sie mehr in JS-String-Methoden .
Array.isArray()
Die isArray()Methode prüft, ob ein Objekt ein Array ist.
Beispiel
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
Lesen Sie mehr in JS-Arrays .
Array forEach()
Die forEach()Methode ruft für jedes Array-Element einmal eine Funktion auf.
Beispiel
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
Erfahren Sie mehr in JS-Array-Iterationsmethoden .
Array-Map()
Dieses Beispiel multipliziert jeden Array-Wert mit 2:
Beispiel
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Erfahren Sie mehr in JS-Array-Iterationsmethoden .
Array-Filter()
Dieses Beispiel erstellt ein neues Array aus Elementen mit einem Wert größer als 18:
Beispiel
var numbers = [45, 4, 9, 16, 25];
var over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Erfahren Sie mehr in JS-Array-Iterationsmethoden .
Array reduzieren ()
Dieses Beispiel findet die Summe aller Zahlen in einem Array:
Beispiel
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Erfahren Sie mehr in JS-Array-Iterationsmethoden .
Array ReduceRight()
Dieses Beispiel findet auch die Summe aller Zahlen in einem Array:
Beispiel
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Erfahren Sie mehr in JS-Array-Iterationsmethoden .
Array alle ()
Dieses Beispiel prüft, ob alle Werte über 18 liegen:
Beispiel
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
Erfahren Sie mehr in JS-Array-Iterationsmethoden .
Array einige ()
Dieses Beispiel prüft, ob einige Werte über 18 liegen:
Beispiel
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.some(myFunction);
function myFunction(value) {
return
value > 18;
}
Erfahren Sie mehr in JS-Array-Iterationsmethoden .
Array indexOf()
Durchsucht ein Array nach einem Elementwert und gibt seine Position zurück.
Beispiel
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
Erfahren Sie mehr in JS-Array-Iterationsmethoden .
Array lastIndexOf()
lastIndexOf()ist dasselbe wie indexOf(), sucht aber am Ende des Arrays.
Beispiel
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
Erfahren Sie mehr in JS-Array-Iterationsmethoden .
JSON.parse()
Eine häufige Verwendung von JSON ist das Empfangen von Daten von einem Webserver.
Stellen Sie sich vor, Sie haben diese Textzeichenfolge von einem Webserver erhalten:
'{"name":"John", "age":30, "city":"New York"}'
Die JavaScript-Funktion JSON.parse()wird verwendet, um den Text in ein JavaScript-Objekt umzuwandeln:
var obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
Lesen Sie mehr in unserem JSON-Tutorial .
JSON.stringify()
Eine häufige Verwendung von JSON ist das Senden von Daten an einen Webserver.
Beim Senden von Daten an einen Webserver müssen die Daten eine Zeichenfolge sein.
Stellen Sie sich vor, wir haben dieses Objekt in JavaScript:
var obj = {name:"John", age:30, city:"New York"};
Verwenden Sie die JavaScript-Funktion JSON.stringify(), um es in einen String umzuwandeln.
var myJSON = JSON.stringify(obj);
Das Ergebnis ist ein String nach der JSON-Notation.
myJSON ist jetzt eine Zeichenfolge und kann an einen Server gesendet werden:
Beispiel
var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
Lesen Sie mehr in unserem JSON-Tutorial .
Datum.jetzt()
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,]