JavaScript ES5

Co to jest ECMAScript 5?

ECMAScript 5 również nazywa się ES5 i ECMAScript 2009.

Ten rozdział przedstawia niektóre z najważniejszych funkcji ES5.

Funkcje ECMAScript 5

Oto nowe funkcje wydane w 2009 roku:

  • "use strict" polecenie
  • 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()
  • Atrybuty Getter i Setter
  • Nowe atrybuty i metody obiektu

Zmiany składni ECMAScript 5

  • Dostęp do właściwości stringa [ ]
  • Ostatnie przecinki w literałach tablic i obiektów
  • Literała wieloliniowa
  • Zachowane słowa kluczowe jako nazwy atrybutów

"use strict" polecenie

"use strict"Definiuje, że kod JavaScript powinien być wykonywany w trybie rygorystycznym."

Na przykład, w trybie rygorystycznym nie można używać niezadeklarowanych zmiennych.

Możesz używać trybu rygorystycznego we wszystkich programach. Pomaga to pisać bardziej przejrzysty kod, np. blokuje użycie niezadeklarowanych zmiennych.

"use strict"To tylko wyrażenie stringowe. Stare przeglądarki, które ich nie rozumieją, nie rzucają błędów."

Proszę przeczytać JS tryb rygorystyczny Więcej informacji znajdziesz w

String.trim()

String.trim() Usuwa białe znaki z boków ciągu.

Przykład

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

Spróbuj sam

Proszę, odwiedź Metody string JS Więcej informacji znajdziesz w

Array.isArray()

isArray() Metoda 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);
}

Spróbuj sam

Proszę, odwiedź JS tablice Więcej informacji znajdziesz w

Array.forEach()

forEach() Metoda wywołuje funkcję 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>"; 
}

Spróbuj sam

Proszę, odwiedź Metody iteracyjne tablic JS Dowiedz się więcej.

Array.map()

Ten przykład mnoży każdą wartość w tablicy przez 2:

Przykład

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

Spróbuj sam

Proszę, odwiedź Metody iteracyjne tablic JS Dowiedz się więcej.

Array.filter()

Ten przykład tworzy nową tablicę z elementami o wartościach większych niż 18:

Przykład

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

Spróbuj sam

Proszę, odwiedź Metody iteracyjne tablic JS Dowiedz się więcej.

Array.reduce()

Ten przykład określa 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;
}

Spróbuj sam

Proszę, odwiedź Metody iteracyjne tablic JS Dowiedz się więcej.

Array.reduceRight()

Ten przykład również sprawdza sumę 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;
}

Spróbuj sam

Proszę, odwiedź Metody iteracyjne tablic JS Dowiedz się więcej.

Array.every()

Ten przykład sprawdza, czy wszystkie wartości są większe niż 18:

Przykład

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

Spróbuj sam

Proszę, odwiedź Metody iteracyjne tablic JS Dowiedz się więcej.

Array.some()

Ten przykład sprawdza, czy pewne 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;
}

Spróbuj sam

Proszę, odwiedź Metody iteracyjne tablic JS Dowiedz się więcej.

Array.indexOf()

Wyszukiwanie wartości elementu w tablicy i zwracanie jej pozycji:

Przykład

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

Spróbuj sam

Proszę, odwiedź Metody iteracyjne tablic JSDowiedz się więcej.

Array.lastIndexOf()

Array.lastIndexOf() z Array.indexOf() Podobnie, ale zaczynając od końca tablicy.

Przykład

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

Spróbuj sam

Proszę, odwiedź Metody iteracyjne tablic JS Dowiedz się więcej.

JSON.parse()

Jednym z najczęstszych zastosowań JSON jest odbieranie danych z serwera Web.

Wyobraź sobie, że otrzymujesz ten ciąg znaków z serwera Web:

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

Funkcje JavaScript JSON.parse() Używa się jej do przekształcenia tekstu w obiekt JavaScript:

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

Spróbuj sam

Zapraszamy do naszej Tutorial JSON Dowiedz się więcej.

JSON.stringify()

Jednym z najczęstszych zastosowań JSON jest wysyłanie danych do serwera Web.

Dane wysyłane do serwera Web muszą być ciągami znaków.

Wyobraź sobie, że w JavaScript mamy ten obiekt:

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

Użyj funkcji JavaScript JSON.stringify() do przekształcenia go w ciąg znaków.

var myJSON = JSON.stringify(obj);

Wynik będzie ciągłem znaków zgodnym z formatem JSON.

myJSON teraz jest ciągłem znaków, gotowym do wysłania na serwer:

Przykład

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

Spróbuj sam

Zapraszamy do naszej Tutorial JSON Dowiedz się więcej.

Date.now()

Date.now() zwraca liczbę milisekund od daty zero (1 stycznia 1970 roku 00:00:00:00).

Przykład

var timInMSs = Date.now();

Spróbuj sam

Date.now() zwraca to samo jak wynik wywołania getTime() na obiekcie Date.

Proszę, odwiedź Data JS Dowiedz się więcej.

Atrybuty Getter i Setter

ES5 pozwala na definiowanie metod obiektu za pomocą gramatyki podobnej do uzyskiwania lub ustawiania atrybutów.

Ten przykład tworzy getter dla atrybutu o nazwie fullName: getter:

Przykład

// Tworzy obiekt:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Użyj gettera do wyświetlenia danych z obiektu:
document.getElementById("demo").innerHTML = person.fullName;

Spróbuj sam

Ten przykład tworzy getter dla atrybutu języka: setter i getter:

Przykład

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// Użyj settera do ustawienia atrybutu obiektu:
person.lang = "en";
// Użyj gettera do wyświetlenia danych z obiektu:
document.getElementById("demo").innerHTML = person.lang;

Spróbuj sam

Ten przykład używa settera, aby upewnić się, że aktualizacja języka jest pisana wielkimi literami:

Przykład

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Użyj settera do ustawienia atrybutu obiektu:
person.lang = "en";
// Wyświetl dane z obiektu:
document.getElementById("demo").innerHTML = person.language;

Spróbuj sam

Proszę, odwiedź Dostęp do obiektów JS Dowiedz się więcej o getterach i setterach.

Nowe atrybuty i metody obiektu

Object.defineProperty() To nowa metoda obiektu w ES5.

Pozwala Ci zdefiniować atrybuty obiektu i/lub zmieniać wartości atrybutów oraz metadane.

Przykład

// Tworzy obiekt:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Zmienia atrybut:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable: true;
  configurable : true
});
// Enumeruje atrybuty
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Spróbuj sam

Następny przykład to ten sam kod, ale ukrywa atrybut języka w enumeryacji:}

Przykład

// Tworzy obiekt:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Zmienia atrybut:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Enumeruje atrybuty
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Spróbuj sam

W tym przykładzie tworzy setter i getter, aby zapewnić aktualizację języka do wielkiej litery:

Przykład

// Tworzy obiekt:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO"
});
// Zmienia atrybut:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Zmienia język
person.language = "en";
// Wyświetla język
document.getElementById("demo").innerHTML = person.language;

Spróbuj sam

Nowe metody obiektów ES5

ECMAScript 5 dodał wiele nowych metod obiektów do JavaScript:

// Dodaje lub zmienia właściwość obiektu
Object.defineProperty(object, property, descriptor)
// Dodaje lub zmienia wiele właściwości obiektu
Object.defineProperties(object, descriptors)
// Dostęp do atrybutu
Object.getOwnPropertyDescriptor(object, property)
// Zwraca wszystkie atrybuty jako tablicę
Object.getOwnPropertyNames(object)
// Zwraca atrybuty jako tablicę
Object.keys(object)
// Dostęp do prototypu
Object.getPrototypeOf(object)
// Zapobiega dodawaniu atrybutów do obiektu
Object.preventExtensions(object)
// Zwraca true, jeśli można dodać atrybuty do obiektu
Object.isExtensible(object)
// Zapobiega zmianie właściwości obiektu (nie wartości)
Object.seal(object)
// Zwraca true, jeśli obiekt został zamknięty
Object.isSealed(object)
// Zapobiega jakimkolwiek zmianom w obiekcie
Object.freeze(object)
// Zwraca true, jeśli obiekt został zamarznięty
Object.isFrozen(object)

Proszę, odwiedź Obiekt ECMAScript5 Dowiedz się więcej.

Dostęp do właściwości stringa

charAt() Metoda zwraca znak o określonym indeksie (położeniu) w stringu:

Przykład

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

Spróbuj sam

ECMAScript 5 pozwala na dostęp do właściwości stringa:

Przykład

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

Spróbuj sam

Dostęp do właściwości stringa może być nieprzewidywalny.

Proszę, odwiedź Metody string JS Dowiedz się więcej.

Przecinki końcowe (Trailing Commas)

ECMAScript 5 pozwala na użycie przecinków końcowych w definicji obiektów i tablic:

Przykład obiektu

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

Przykład tablicy

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

Ostrzeżenie!!!

Internet Explorer 8 się zawiesi.

JSON nie pozwala na użycie przecinków końcowych.

JSON obiekt:

// Dozwolone:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)
// Nie dozwolone:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

JSON tablica:

// Dozwolone:
points = [40, 100, 1, 5, 25, 10]
// Nie dozwolone:
points = [40, 100, 1, 5, 25, 10,]

Wieloliniowe teksty

Jeśli używa się ukośnika odwrotnego do odwracania, ECMAScript 5 pozwala na wieloliniowe teksty (literals):

Przykład

"Hello \
Kitty!";

Spróbuj sam

Metoda \ może nie być szeroko wspierana.

Starsze przeglądarki mogą inaczej obsługiwać spację wokół ukośnika.

Niektóre stare przeglądarki nie pozwalają na spację po znaku \.

Jednym z bezpieczniejszych sposobów dzielenia tekstu na ciągi znaków jest użycie łączenia ciągów znaków:

Przykład

"Hello " + 
"Kitty!";

Spróbuj sam

Słowa kluczowe jako nazwy właściwości

ECMAScript 5 pozwala na użycie słów kluczowych jako nazw właściwości:

Przykład obiektu

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

Spróbuj sam

Wspierane przeglądarki ES5 (ECMAScript 5)

Chrome 23, IE 10 i Safari 6 są pierwszymi przeglądarkami, które w pełni wspierają ECMAScript 5:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
Wrzesień 2012 Wrzesień 2012 Kwiecień 2013 Lipiec 2012 Lipiec 2013