JavaScript ECMAScript 2009 - ES5
ECMAScript 2009, также известный как ES5, был первой серьезной версией JavaScript.
В этой главе представлены некоторые из наиболее важных функций ES5.
Особенности ES5
Это были новые функции, выпущенные в 2009 году:
"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()- Свойства Getter и Setter
- Новые методы свойств Object
Синтаксические изменения ES5
- Доступ к свойству [] в строках
- Завершающие запятые в литералах массивов и объектов
- Многострочные строковые литералы
- Зарезервированные слова как имена свойств
Директива "use strict"
Директива "use strict" определяет, что код JavaScript должен выполняться в "строгом режиме".
В строгом режиме, например, вы не можете использовать необъявленные переменные.
Вы можете использовать строгий режим "use strict" во всех своих программах. Это помогает вам писать более чистый код, например, предотвращает использование необъявленных переменных.
"use strict" это просто строковое выражение. Старые браузеры не выдадут ошибку, если не поймут ее.
Подробнее читайте Строгий режим JS.
String.trim()
Метод String.trim() удаляет пробелы с обеих сторон строки.
Подробнее читайте Строковые методы JS.
Array.isArray()
Метод isArray() проверяет, является ли объект массивом.
Пример
function myFunction() {
var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
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 = ["Банан", "Апельсин", "Яблоко", "Манго"];
var a = fruits.indexOf("Яблоко");
Попробуйте сами »
Подробнее читайте Методы итерации массива JS.
Array.lastIndexOf()
Метод Array.lastIndexOf() то же самое, что и Array.indexOf(), но поиск выполняет в конце массива.
Пример
var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
var a = fruits.lastIndexOf("Яблоко");
Попробуйте сами »
Подробнее читайте Методы итерации массива JS.
JSON.parse()
Обычно JSON используется для получения данных с веб-сервера.
Представьте, что вы получили эту текстовую строку с веб-сервера:
'{"name":"Щипунов", "age":30, "city":"Пермь"}'
JavaScript функция JSON.parse() используется для преобразования текста в объект JavaScript:
var obj = JSON.parse('{"name":"Щипунов", "age":30, "city":"Пермь"}');
Попробуйте сами »
Подробнее читайте JSON Учебник.
JSON.stringify()
Обычно JSON используется для отправки данных на веб-сервер.
При отправке данных на веб-сервер данные должны быть строкой.
Представьте, что у нас есть этот объект в JavaScript:
var obj = {name:"Щипунов", age:30, city:"Пермь"};
Используйте JavaScript функцию JSON.stringify(), чтобы преобразовать ее в строку.
var myJSON = JSON.stringify(obj);
Результатом будет строка, следующая за нотацией JSON.
myJSON теперь является строкой и готов к отправке на сервер:
Пример
var obj = {name:"Щипунов", age:30, city:"Пермь"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
Попробуйте сами »
Подробнее читайте JSON Учебник.
Date.now()
Метод Date.now() возвращает количество миллисекунд с нулевой даты (January 1. 1970 00:00:00 UTC).
Date.now() возвращает то же самое, что и getTime(), выполняемое для объекта Date.
Подробнее читайте Даты JS.
Свойства Getter и Setter
ES5 позволяет определять методы объекта с помощью синтаксиса, который выглядит как получение или установка свойства.
В этом примере создается getter (получатель) для свойства с именем fullName:
Пример
// Создаем объект:
var person = {
firstName: "Щипунов",
lastName : "Андрей",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
// Отображение данных из объекта с помощью геттера:
document.getElementById("demo").innerHTML = person.fullName;
Попробуйте сами »
В этом примере для свойства языка создаются установщик setter и получатель getter:
Пример
var person = {
firstName: "Щипунов",
lastName : "Андрей",
language : "NO",
get lang() {
return this.language;
},
set lang(value) {
this.language = value;
}
};
// Устанавливаем свойство объекта с помощью сеттера:
person.lang = "en";
// Отображение данных из объекта с помощью геттера:
document.getElementById("demo").innerHTML = person.lang;
Попробуйте сами »
В этом примере используется установщик setter для обеспечения обновлений языка в верхнем регистре:
Пример
var person = {
firstName: "Щипунов",
lastName : "Андрей",
language : "NO",
set lang(value) {
this.language = value.toUpperCase();
}
};
// Устанавливаем свойство объекта с помощью сеттера:
person.lang = "en";
// Отображение данных из объекта:
document.getElementById("demo").innerHTML =
person.language;
Попробуйте сами »
Подробнее читайте о Getter и Setter Методы доступа к объектам JS
Новые методы свойств Object
Object.defineProperty() новый Object метод в ES5.
Позволяет определить свойство объекта и/или изменить значение свойства и/или метаданные.
Пример
// Создание объекта:
var person = {
firstName:
"Щипунов",
lastName : "Андрей",
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:
"Щипунов",
lastName : "Андрей",
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;
Попробуйте сами »
В этом примере создается setter и getter для защиты обновлений языка в верхнем регистре:
Пример
// Создаем объект:
var person = {
firstName: "Щипунов",
lastName : "Андрей",
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;
Попробуйте сами »
ECMAScript 5 добавил много новых методов объекта в JavaScript:
ES5 Новые методы Object
// Добавление или изменение свойства объекта
Object.defineProperty(объект, свойство, дескриптор)
// Добавление или изменение многих свойств объекта
Object.defineProperties(объект, дескрипторы)
// Доступ к свойствам
Object.getOwnPropertyDescriptor(объект, свойство)
// Возвращает все свойства в виде массива
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: "Щипунов",
lastName: "
Андрей",
age: 46,
}
Пример массива
points = [
1,
5,
10,
25,
40,
100,
];
ПРЕДУПРЕЖДЕНИЕ !!!
Internet Explorer 8 выйдет из строя.
JSON не допускает конечных запятых.
JSON Объекты:
// Разрешено:
var person = '{"firstName":"Щипунов", "lastName":"Андрей",
"age":46}'
JSON.parse(person)
// Запрещено :
var person = '{"firstName":"Щипунов",
"lastName":"Андрей", "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 |
