JavaScript ES5
ECMAScript 2009, також відомий як ES5, був першою серйозною версією JavaScript.
В цьому розділі описані найбільш важливі функції ES5.
Особливості ES5
- "use strict"
- String[number] access
- Multiline strings
- 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()
- Date.toISOString()
- Date.toJSON()
- Property getters and setters
- Reserved words as property names
- Object methods
- Object defineProperty()
- Function.bind()
- Trailing commas
Підтримка браузерами
ES5 повністю підтримується в усіх сучасних браузерах:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9.0 | Yes | Yes | Yes | Yes |
Директива "use strict"
"use strict" визначає, що код JavaScript має виконуватися в "строгому режимі".
В строгому режимі ви можете, наприклад, не використовувати неоголошені змінні.
Вы можете використовувати строгий режим в усіх своїх програмах. Це допомагає вам писати більш чистий код, наприклад, попереджає використання неоголошених змінних.
"use strict" - це просто рядковий вираз. Старі браузеры не видадуть помилку, якщо не зрозуміють її.
Докладніше в розділі JS Строгий режим.
Доступ до властивостей по рядкам
Метод charAt() повертає символ по вказаному індексу (позиції) в рядку:
ES5 дозволяє доступ до властивостей рядків:
Доступ до властивості в рядку може бути дещо непередбачуваним.
Докладніше в розділі JS Рядкові методи.
Рядки на кількох рядках
ES5 дозволяє використовувати рядкові літерали на кількох рядках, якщо вони екрановані зворотним слешем:
Метод \ може не мати універсальної підтримки.
Старі браузери можуть по-різному обробляти пробіли навколо зворотного слешу.
Деякі старі браузери не допускають пробілів після символу \ .
Більш безпечний спосіб розбити рядковий літерал - використовувати додавання рядків:
Зарезервовані слова як назви властивостей
ES5 дозволяє використовувати зарезервовані слова як імена властивостей:
String.trim()
String.trim() видаляє пробіли з обох сторін рядка.
Докладніше в JS Рядкові методи.
Array.isArray()
Метод isArray() перевіряє, чи є об’єкт масивом.
Приклад
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
Спробуйте самі »
Докладніше в JS Масиви.
Array.forEach()
Метод forEach() викликає функцію один раз для кожного елемента масиву.
Приклад
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
Спробуйте самі »
Докладніше в JS Методи ітерації масивів.
Array.map()
В цьому прикладі кожне значення масиву множиться на 2:
Приклад
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Спробуйте самі »
Докладніше в JS Методи ітерації масивів.
Array.filter()
В цьому прикладі створюється новий масив з елементів зі значенням понад 18:
Приклад
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Спробуйте самі »
Докладніше в JS Методи ітерації масивів.
Array.reduce()
Цей приклад знаходить суму всіх чисел в масиві:
Приклад
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Спробуйте самі »
Докладніше в JS Методи ітерації масивів.
Array.reduceRight()
Цей приклад також знаходить суму всіх чисел в масиві:
Приклад
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Спробуйте самі »
Докладніше в JS Методи ітерації масивів.
Array.every()
В цьому прикладі перевіряється, чи всі значення понад 18:
Приклад
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
return value > 18;
}
Спробуйте самі »
Докладніше JS Методи ітерації масивів.
Array.some()
В цьому прикладі перевіряється, чи не перевищують деякі значення 18:
Приклад
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
function myFunction(value) {
return value > 18;
}
Спробуйте самі »
Докладніше в JS Методи ітерації масивів.
Array.indexOf()
Пошук в масиві значення елемента та повернення його позиції.
Приклад
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
Спробуйте самі »
Докладніше в JS Методи ітерації масивів.
Array.lastIndexOf()
Array.lastIndexOf() те ж саме, що й Array.indexOf(), але пошук виконується з кінця масиву.
Приклад
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
Спробуйте самі »
Докладніше в JS Методи ітерації масивів.
JSON.parse()
Зазвичай JSON використовується для отримання даних з вебсервера.
Уявіть, що ви отримали цей текстовий рядок з вебсервера:
'{"name":"John", "age":30, "city":"New York"}'
JavaScript функція JSON.parse() використовується для конвертації тексту в об’єкт JavaScript:
var obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');
Спробуйте самі »
Докладніше в JSON Підручнику.
JSON.stringify()
Зазвичай JSON використовується для відправки даних на вебсервер.
При відправці даних на вебсервер данні мають бути рядком.
Уявіть, що у нас є цей об’єкт в JavaScript:
var obj = {name:"John", age:30, city:"New York"};
Використовуйте JavaScript функцію JSON.stringify(), щоб конвертувати його в рядок.
var myJSON = JSON.stringify(obj);
Результатом буде рядок, наступний за нотацією JSON.
myJSON тепер є рядком та готовий до відправки на сервер:
Приклад
var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
Спробуйте самі »
Докладніше читайте в JSON Підручнику на нашому сайті W3Schools українською.
Date.now()
Date.now() повертає кількість мілісекунд з нульової дати (1 січня 1970 00:00:00 UTC).
Date.now() повертає те саме, що і getTime(), що виконується для об’єкту Date.
Докладніше в розділі JS Дати.
Date.toISOString()
Метод toISOString() конвертує об’єкт Date в рядок, використовуючи стандартний формат ISO:
Приклад
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
Спробуйте самі »
Date.toJSON()
Date.toJSON() конвертує об’єкт Date в рядок, відформатований як дата JSON.
Дати JSON мають той же формат, що і стандарт ISO-8601: YYYY-MM-DDTHH:mm:ss.sssZ:
Властивості Гетери та Сетери
ES5 дозволяє визначати методи об’єкту з синтаксисом, який виглядає як отримання (гетери) або встановлення (сетери) властивості.
В цьому прикладі створюється гетер для властивості з іменем fullName:
Приклад
// Створити об’єкт:
var person = {
firstName: "John",
lastName : "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
// відображення даних із об’єкта за допомогою гетера:
document.getElementById("demo").innerHTML = person.fullName;
Спробуйте самі »
В цьому прикладі створюються сетер (установщик) та гетер (отримувач) для властивостей мови:
Приклад
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
get lang() {
return this.language;
},
set lang(value) {
this.language = value;
}
};
// Встановити властивіість об’єкту за допомогою сетера:
person.lang = "en";
// Відображення даних із об’єкту за допомогою гетера:
document.getElementById("demo").innerHTML = person.lang;
Спробуйте самі »
В цьому прикладі використовується сетер для захисту оновлень мови в верхньому регістрі:
Приклад
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
set lang(value) {
this.language = value.toUpperCase();
}
};
// Встановити властивість об’єкту за допомогою установщика:
person.lang = "en";
// відображення даних від об’єкту:
document.getElementById("demo").innerHTML = person.language;
Спробуйте самі »
Дізнатись більше про гетери та сетери ви можете в розділі JS Засоби доступу до об’єктів.
Object.defineProperty()
Object.defineProperty() - це новий метод об’єкту в ES5.
Він дозволяє вам визначати властивість об’єкту та / або змінювати значення властивості та / або метадані.
Приклад
// Створити об’єкт:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
};
// Змінити властивість:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
// Перерахувати властивості
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
Спробуйте самі »
Наступний приклад - той самий код, за виключенням того, що він приховує властивість language з перерахування:
Приклад
// Створити об’єкт:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
};
// Змінити властивість:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : false,
configurable : true
});
// Перерахувати властивості
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
Спробуйте самі »
В цьому прикладі створюються сетер та гетер для захисту оновлень мови в верхньому регістрі:
Приклад
/// Створити об’єкт:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO"
};
// Змінити властивість:
Object.defineProperty(person, "language", {
get : function() { return language },
set : function(value) { language = value.toUpperCase()}
});
// Змінити мову
person.language = "en";
// Відобразити мову
document.getElementById("demo").innerHTML = person.language;
Спробуйте самі »
ES5 Методи об’єкту
ES5 додав багато нових методів об’єкту в JavaScript:
Управління об’єктами
// Створення об’єкту з існуючим об’єктом як прототипу
Object.create(parent, donor)
// Додавання або зміна властивості об’єкту
Object.defineProperty(object, property, descriptor)
// Додавання або зміна властивостей об’єкту
Object.defineProperties(object, descriptors)
// Доступ до властивостей
Object.getOwnPropertyDescriptor(object, property)
// Повертає всі властивості у вигляді масиву
Object.getOwnPropertyNames(object)
// Доступ до прототипу
Object.getPrototypeOf(object)
// Повертає перераховані властивості у вигляді масиву
Object.keys(object)
Захист об’єктів
// Попереджає додавання властивостей до об’єкту
Object.preventExtensions(object)
// Повертає true, якщо до об’єкту можна додати властивості
Object.isExtensible(object)
// Попереджає зміну властивостей об’єкту (не значень)
Object.seal(object)
// Повертає true, якщо об’єкт запечатано
Object.isSealed(object)
// Попереджає будь-які зміни об’єкту
Object.freeze(object)
// Повертає true, якщо об’єкт заморожено
Object.isFrozen(object)
Докладніше в Об’єкт ECMAScript5.
Завершуючі коми
ES5 дозволяє використовувати кінцеві коми у визначеннях об’єктів та масивів:
Приклад об’єкту
person = {
firstName: "John",
lastName: " Doe",
age: 46,
}
Приклад масиву
points = [
1,
5,
10,
25,
40,
100,
];
УВАГА !!!
JSON не допускає кінцевих ком.
JSON Об’єкти:
// Допускається:
var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
JSON.parse(person)
// Не допускається:
var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
JSON.parse(person)
JSON Масиви:
// Допускається:
points = [40, 100, 1, 5, 25, 10]
// Не допускається:
points = [40, 100, 1, 5, 25, 10,]
