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;
Попробуйте сами »
Следующий пример - тот же код, за исключением того, что он скрывает свойство языка из перечисления:
Пример
// Создать объект:
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;
Попробуйте сами »
E5 Методы объекта
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,]
