JavaScript ES5
ECMAScript 2009, ook bekend as ES5, was die eerste groot hersiening van JavaScript.
Hierdie hoofstuk beskryf die belangrikste kenmerke van ES5.
ES5 kenmerke
- "gebruik streng"
- String[ nommer ] toegang
- Meerlyn snare
- String.trim()
- Array.isArray()
- Skikking vir Elke()
- Skikkingskaart()
- Skikking filter()
- Skikking verminder()
- Skikking reduceRight()
- Skikking elke ()
- Rangskik sommige ()
- Skikking indeksOf()
- Skikking lastIndexOf()
- JSON.parse()
- JSON.stringify()
- Datum.nou()
- Datum na ISOString()
- Datum naJSON()
- Eiendom getters en setters
- Gereserveerde woorde as eiendomsname
- Objekmetodes
- Object defineProperty()
- Function.bind()
- Volgende kommas
Blaaierondersteuning
ES5word ten volle ondersteun in alle moderne blaaiers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9.0 | Yes | Yes | Yes | Yes |
Die "gebruik streng" richtlijn
"use strict"definieer dat die JavaScript-kode in "streng modus" uitgevoer moet word.
Met streng modus kan jy byvoorbeeld nie onverklaarde veranderlikes gebruik nie.
Jy kan streng modus in al jou programme gebruik. Dit help jou om skoner kode te skryf, soos om te verhoed dat jy onverklaarde veranderlikes gebruik.
"use strict"is net 'n string uitdrukking. Ou blaaiers sal nie 'n fout gooi as hulle dit nie verstaan nie.
Lees meer in JS Streng Mode .
Eiendomstoegang op snare
Die charAt()metode gee die karakter terug by 'n gespesifiseerde indeks (posisie) in 'n string:
Voorbeeld
var str = "HELLO WORLD";
str.charAt(0); // returns H
ES5 laat eiendomtoegang op stringe toe:
Voorbeeld
var str = "HELLO WORLD";
str[0]; // returns H
Eiendomtoegang op string kan 'n bietjie onvoorspelbaar wees.
Lees meer in JS String Methods .
Snare oor veelvuldige reëls
ES5 laat snaarletters oor veelvuldige reëls toe as dit met 'n terugskuinsstreep ontsnap word:Voorbeeld
"Hello \
Dolly!";
Die \ metode het dalk nie universele ondersteuning nie.
Ouer blaaiers kan die spasies rondom die skuinsstreep anders hanteer.
Sommige ouer blaaiers laat nie spasies agter die \ karakter toe nie.
'n Veiliger manier om 'n string letterlik op te breek, is om stringoptelling te gebruik:
Voorbeeld
"Hello " +
"Dolly!";
Gereserveerde woorde as eiendomsname
ES5 laat gereserveerde woorde as eiendomsname toe:
Voorwerp Voorbeeld
var obj = {name: "John", new: "yes"}
String trim()
Die trim()metode verwyder witspasie van beide kante van 'n string.
Voorbeeld
var str = " Hello World! ";
alert(str.trim());
Lees meer in JS String Methods .
Array.isArray()
Die isArray()metode kontroleer of 'n voorwerp 'n skikking 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 .
Skikking vir Elke()
Die forEach()metode roep 'n funksie een keer vir elke skikkingselement.
Voorbeeld
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
Kom meer te wete in JS Array Iteration Methods .
Skikkingskaart()
Hierdie voorbeeld vermenigvuldig elke skikkingwaarde met 2:
Voorbeeld
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Kom meer te wete in JS Array Iteration Methods .
Skikking filter()
Hierdie voorbeeld skep 'n nuwe skikking van elemente met 'n waarde groter as 18:
Voorbeeld
var numbers = [45, 4, 9, 16, 25];
var over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Kom meer te wete in JS Array Iteration Methods .
Skikking verminder()
Hierdie voorbeeld vind die som van alle getalle in 'n skikking:
Voorbeeld
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Kom meer te wete in JS Array Iteration Methods .
Skikking reduceRight()
Hierdie voorbeeld vind ook die som van alle getalle in 'n skikking:
Voorbeeld
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Kom meer te wete in JS Array Iteration Methods .
Skikking elke ()
Hierdie voorbeeld kyk of alle waardes oor 18 is:
Voorbeeld
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
Kom meer te wete in JS Array Iteration Methods .
Rangskik sommige ()
Hierdie voorbeeld kyk of sommige waardes oor 18 is:
Voorbeeld
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.some(myFunction);
function myFunction(value) {
return
value > 18;
}
Kom meer te wete in JS Array Iteration Methods .
Skikking indeksOf()
Soek 'n skikking vir 'n elementwaarde en gee sy posisie terug.
Voorbeeld
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
Kom meer te wete in JS Array Iteration Methods .
Skikking lastIndexOf()
lastIndexOf()is dieselfde as indexOf(), maar soek vanaf die einde van die skikking.
Voorbeeld
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
Kom meer te wete in JS Array Iteration Methods .
JSON.parse()
'n Algemene gebruik van JSON is om data vanaf 'n webbediener te ontvang.
Stel jou voor dat jy hierdie teksstring van 'n webbediener ontvang het:
'{"name":"John", "age":30, "city":"New York"}'
Die JavaScript-funksie JSON.parse()word gebruik om die teks in 'n JavaScript-objek om te skakel:
var obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
Lees meer in ons JSON-tutoriaal .
JSON.stringify()
'n Algemene gebruik van JSON is om data na 'n webbediener te stuur.
Wanneer data na 'n webbediener gestuur word, moet die data 'n string wees.
Stel jou voor ons het hierdie voorwerp in JavaScript:
var obj = {name:"John", age:30, city:"New York"};
Gebruik die JavaScript-funksie JSON.stringify()om dit in 'n string om te skakel.
var myJSON = JSON.stringify(obj);
Die resultaat sal 'n string wees wat die JSON-notasie volg.
myJSON is nou 'n string en gereed om na 'n bediener gestuur te word:
Voorbeeld
var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
Lees meer in ons JSON-tutoriaal .
Datum.nou()
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,]