JavaScript ECMAScript 2009 - ES5
ECMAScript 2009, также известный как ES5, был первой серьезной версией JavaScript.
В этой главе описаны наиболее важные функции ES5.
Особенности ES5
"use strict"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()- Получатели и сеттеры собственности
- Новые методы свойств объекта
Синтаксические изменения ES5
- Доступ к свойству [] в строках
- Завершающие запятые в литералах массивов и объектов
- Многострочные строковые литералы
- Зарезервированные слова как названия свойств
Директива "строгое использование"
"use strict" определяет,
что код JavaScript должен выполняться в "строгом режиме".
В строгом режиме вы можете, например, не использовать необъявленные переменные.
Вы можете использовать строгий режим во всех своих программах. Это помогает вам писать более чистый код, например, предотвращая использование необъявленных переменных.
"use strict" это просто строковое выражение.
Старые браузеры не выдадут ошибку, если не поймут ее.
Подробнее читайте Строгий режим JS.
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 Учебник.
Date.now()
Date.now() возвращает количество миллисекунд с нулевой даты (1 января 1970 00:00:00 UTC).
Date.now() возвращает то же самое,
что и getTime(), выполняемое для Date объекта.
Подробнее читайте Даты JS.
Свойства геттеров и сеттеров
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() это новый метод объекта в 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;
Попробуйте сами »
ES5 добавил много новых объектных методов в JavaScript:
Новые методы объекта ES5
// Добавление или изменение свойства объекта
Object.defineProperty(object, property, descriptor)
// Добавление или изменение многих свойств объекта
Object.defineProperties(object, descriptors)
// Доступ к свойствам
Object.getOwnPropertyDescriptor(object, property)
// Возвращает все свойства как массив
Object.getOwnPropertyNames(object)
// Возвращает перечисляемые свойства в виде массива
Object.keys(object)
// Доступ к прототипу
Object.getPrototypeOf(object)
// Предотвращает добавление свойств к объекту
Object.preventExtensions(object)
// Возвращает true, если к объекту можно добавить свойства
Object.isExtensible(object)
// Предотвращает изменение свойств объекта (не значений)
Object.seal(object)
// Возвращает true, если объект запечатан
Object.isSealed(object)
// Предотвращает любые изменения объекта
Object.freeze(object)
// Возвращает true, если объект заморожен
Object.isFrozen(object)
Подробнее читайте Объекты ECMAScript5.
Доступ к свойствам для строк
Метод charAt() возвращает символ по указанному индексу (позиции) в строке:
ES5 разрешает доступ к свойствам строк:
Доступ к свойству в строке может быть немного непредсказуемым.
Подробнее читайте Строковые методы JS.
Завершающие запятые
ES5 позволяет использовать завершающие запятые в определениях объектов и массивов:
Пример объекта
person = {
firstName: "John",
lastName: "
Doe",
age: 46,
}
Пример массива
points = [
1,
5,
10,
25,
40,
100,
];
ВНИМАНИЕ !!!
Internet Explorer 8 выйдет из строя.
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,]
Строки на нескольких строках
ES5 позволяет использовать строковые литералы на нескольких строках, если они экранированы обратной косой чертой:
Метод \ может не иметь универсальной поддержки.
В старых версиях браузеров пробелы вокруг обратной косой черты могут обрабатываться иначе.
Некоторые старые браузеры не допускают пробелов после символа \.
Более безопасный способ разбить строковый литерал - использовать сложение строк:
Зарезервированные слова как названия свойств
ES5 позволяет использовать зарезервированные слова в качестве имен свойств:
Браузерная поддержка ES5
Chrome 23, IE 10 и Safari 6 были первыми браузерами, полностью поддерживающими ES5:
| Chrome 23 | IE10 / Edge | Firefox 21 | Safari 6 | Opera 15 |
| Сентябрь 2012 | Сентябрь 2012 | Апрель 2013 | Июль 2012 | Июль 2013 |
