JavaScript ES5
ECMAScript 2009, znany również jako ES5, był pierwszą poważną wersją JavaScript.
Ten rozdział opisuje najważniejsze cechy ES5.
Funkcje ES5
- „użyj ścisłego”
- String[ liczba ] dostęp
- Ciągi wielowierszowe
- String.trim()
- Array.isArray()
- Tablica dla każdego()
- Mapa tablicy()
- Filtr tablicowy()
- Zmniejszenie tablicy()
- Zmniejszenie tablicyPrawo()
- Tablica co ()
- Tablica niektóre()
- Indeks tablicy()
- Tablica lastIndexOf()
- JSON.parse()
- JSON.stringify()
- Data.teraz()
- Data do ISOString()
- Data do JSON()
- Pozyskiwacze i ustawiacze nieruchomości
- Zarezerwowane słowa jako nazwy właściwości
- Metody obiektowe
- Zdefiniuj obiektProperty()
- funkcja.bind()
- Przecinki końcowe
Obsługa przeglądarki
ES5jest w pełni obsługiwany we wszystkich nowoczesnych przeglądarkach:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9.0 | Yes | Yes | Yes | Yes |
Dyrektywa „ścisłe stosowanie”
"use strict"określa, że kod JavaScript powinien być wykonywany w „trybie ścisłym”.
W trybie ścisłym możesz na przykład nie używać niezadeklarowanych zmiennych.
Możesz używać trybu ścisłego we wszystkich swoich programach. Pomaga pisać czystszy kod, na przykład uniemożliwiając używanie niezadeklarowanych zmiennych.
"use strict"to tylko wyrażenie tekstowe. Stare przeglądarki nie zgłoszą błędu, jeśli go nie zrozumieją.
Przeczytaj więcej w JS Strict Mode .
Dostęp do właściwości na ciągach
Metoda charAt()zwraca znak o określonym indeksie (pozycji) w ciągu znaków:
Przykład
var str = "HELLO WORLD";
str.charAt(0); // returns H
ES5 umożliwia dostęp do właściwości w ciągach:
Przykład
var str = "HELLO WORLD";
str[0]; // returns H
Dostęp do właściwości na łańcuchu może być trochę nieprzewidywalny.
Przeczytaj więcej w Metodach JS String .
Ciągi na wielu liniach
ES5 zezwala na literały ciągów w wielu wierszach, jeśli są one poprzedzane ukośnikiem odwrotnym:Przykład
"Hello \
Dolly!";
Metoda \ może nie mieć uniwersalnego wsparcia.
Starsze przeglądarki mogą inaczej traktować spacje wokół ukośnika odwrotnego.
Niektóre starsze przeglądarki nie zezwalają na spacje za znakiem \.
Bezpieczniejszym sposobem na rozbicie literału napisowego jest użycie dodawania napisów:
Przykład
"Hello " +
"Dolly!";
Słowa zastrzeżone jako nazwy własności
ES5 dopuszcza słowa zastrzeżone jako nazwy właściwości:
Przykład obiektu
var obj = {name: "John", new: "yes"}
Przycinanie ciągów()
Metoda trim()usuwa białe znaki z obu stron ciągu.
Przykład
var str = " Hello World! ";
alert(str.trim());
Przeczytaj więcej w Metodach JS String .
Array.isArray()
Metoda isArray()sprawdza, czy obiekt jest tablicą.
Przykład
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
Przeczytaj więcej w Tablice JS .
Tablica dla każdego()
Metoda forEach()wywołuje funkcję raz dla każdego elementu tablicy.
Przykład
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
Dowiedz się więcej w Metodach iteracji tablicy JS .
Mapa tablicy()
W tym przykładzie każda wartość tablicy mnoży się przez 2:
Przykład
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Dowiedz się więcej w Metodach iteracji tablicy JS .
Filtr tablicowy()
Ten przykład tworzy nową tablicę z elementów o wartości większej niż 18:
Przykład
var numbers = [45, 4, 9, 16, 25];
var over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Dowiedz się więcej w Metodach iteracji tablicy JS .
Zmniejszenie tablicy()
Ten przykład znajduje sumę wszystkich liczb w tablicy:
Przykład
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Dowiedz się więcej w Metodach iteracji tablicy JS .
Zmniejszenie tablicyPrawo()
W tym przykładzie znajduje się również suma wszystkich liczb w tablicy:
Przykład
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Dowiedz się więcej w Metodach iteracji tablicy JS .
Tablica co ()
Ten przykład sprawdza, czy wszystkie wartości przekraczają 18:
Przykład
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
Dowiedz się więcej w Metodach iteracji tablicy JS .
Tablica niektóre()
Ten przykład sprawdza, czy niektóre wartości są większe niż 18:
Przykład
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.some(myFunction);
function myFunction(value) {
return
value > 18;
}
Dowiedz się więcej w Metodach iteracji tablicy JS .
Indeks tablicy()
Wyszukaj w tablicy wartość elementu i zwróć jego pozycję.
Przykład
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
Dowiedz się więcej w Metodach iteracji tablicy JS .
Tablica lastIndexOf()
lastIndexOf()to to samo co indexOf(), ale przeszukuje od końca tablicy.
Przykład
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
Dowiedz się więcej w Metodach iteracji tablicy JS .
JSON.parse()
Powszechnym zastosowaniem JSON jest odbieranie danych z serwera WWW.
Wyobraź sobie, że otrzymałeś ten ciąg tekstowy z serwera WWW:
'{"name":"John", "age":30, "city":"New York"}'
Funkcja JavaScript JSON.parse()służy do konwersji tekstu na obiekt JavaScript:
var obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
Przeczytaj więcej w naszym samouczku JSON .
JSON.stringify()
Powszechnym zastosowaniem JSON jest wysyłanie danych na serwer WWW.
Wysyłając dane na serwer WWW, dane muszą być ciągiem.
Wyobraź sobie, że mamy ten obiekt w JavaScript:
var obj = {name:"John", age:30, city:"New York"};
Użyj funkcji JavaScript, JSON.stringify()aby przekonwertować go na ciąg.
var myJSON = JSON.stringify(obj);
Wynikiem będzie ciąg znaków zgodny z notacją JSON.
myJSON jest teraz ciągiem i jest gotowy do wysłania na serwer:
Przykład
var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
Przeczytaj więcej w naszym samouczku JSON .
Data.teraz()
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,]