ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

JS Учебник

JS Старт JS Введение JS Установка JS Вывод JS Объявления JS Синтаксис JS Комментарии JS Переменные JS Операторы JS Арифметические JS Присваивание JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строки JS Числа JS Методы числа JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Даты JS Форматы дат JS Методы получения дат JS Методы установки дат JS Математические JS Рандомные JS Булевы JS Сравнения JS Условия JS Switch JS Цикл For JS Цикл While JS Прерывание JS Преобразование типов JS Побитовые JS Регулярные выражения JS Ошибки JS Область действия JS Подъём JS Строгий режим JS Ключевое слово this JS Ключевое слово Let JS Ключевое слово Const JS Функции стрелок JS Классы JS Отладка JS Гид по стилю JS Лучшие практики JS Ошибки JS Производительность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

JS Формы

JS Формы Формы API

JS Объекты

Определения объектов Свойства объекта Методы объекта Доступ к объектам Конструкторы объектов Прототипы объектов Объект ECMAScript 5

JS Функции

Определения функций Параметры функции Обращение к функции Вызов функции Применение функции Закрытие функции

JS HTML DOM

DOM Введение DOM Методы DOM Документ DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Слушатель событий DOM Навигация DOM Узлы DOM Коллекции DOM Узловые списки

JS Объектная модель браузера BOM

JS Окно JS Скрин JS Локация JS История JS Навигатор JS Всплывающее оповещение JS Тайминг JS Куки

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос AJAX Отклик AJAX XML Файл AJAX PHP AJAX ASP AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON и XML JSON Типы данных JSON Анализ JSON Stringify JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS и jQuery

jQuery Селекторы jQuery HTML jQuery CSS jQuery DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Input JS HTML Объекты JS HTML События JS Броузер JS Упражнения JS Викторина JS Сертификат

JS Справочники

JavaScript Объекты HTML DOM Объекты

JavaScript. Уроки для начинающих

ECMAScript 5 - JavaScript 5


Что такое ECMAScript 5?

ECMAScript 5 также известен как ES5 и ECMAScript 2009.

В этой главе представлены некоторые из наиболее важных функций ES5.


Особенности ECMAScript 5

Это были новые функции, выпущенные в 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

ECMAScript 5 Синтаксические Изменения

  • Свойство access [ ] на строках
  • Конечные запятые в массиве и объектных литералах
  • Многострочные строковые литералы
  • Зарезервированные слова как имена свойств

Директива (указание) "use strict"

Указание "use strict" определяет, что код JavaScript должен быть выполнен в "strict mode" (строгом режиме).

В строгом режиме, например, вы не можете использовать необъявленные переменные.

Вы можете использовать строгий режим (strict mode) во всех своих программах. Это помогает вам писать более чистый код, например, предотвращает использование необъявленных переменных.

"use strict" - это просто строковое выражение. Старые браузеры не будут выдавать ошибку, если они её не понимают.

Узнайте больше в разделе JS Строгий режим.


String.trim()

Метод String.trim() удаляет пробелы с обеих сторон строки.

Пример

var str = "       Hello World!        ";
alert(str.trim());
Попробуйте сами »

Узнайте больше в разделе JS Строковые Методы.


Array.isArray()

Метод isArray() проверяет, является ли объект массивом.

Пример

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}
Попробуйте сами »

Узнайте больше в разделе JS Arrays.


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() возвращает количество миллисекунд с нулевой даты (January 1. 1970 00:00:00 UTC).

Пример

var timInMSs = Date.now();
Попробуйте сами »

Date.now() возвращает то же, что и getTime(), выполненный для объекта Date (Даты).

Узнайте больше в разделе JS Даты.


Свойства Getter и Setter

ES5 позволяет определять методы объекта с помощью синтаксиса, который выглядит как получение или установка свойства.

В этом примере создается getter (получатель) для свойства с именем fullName:

Пример

// Создать объект:
var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// Отображение данных с объекта с помощью getter:
document.getElementById("demo").innerHTML = person.fullName;
Попробуйте сами »

В этом примере для свойства языка создаются setter (установщик) и getter (получатель):

Пример

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};

// Установите свойство объекта с помощью setter:
person.lang = "en";

// Отображение данных с объекта с помощью getter:
document.getElementById("demo").innerHTML = person.lang;
Попробуйте сами »

В этом примере используется setter для обеспечения обновлений языка в верхнем регистре:

Пример

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
Попробуйте сами »

Узнать больше про Getter и Setter вы можете в JS Объекты доступа


Новые методы свойств Object

Object.defineProperty() новый Object метод в 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;
Попробуйте сами »

В этом примере создается setter и getter для защиты обновлений языка в верхнем регистре:

Пример

// Создать объект:
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;
Попробуйте сами »

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)

Узнайте больше в разделе Object ECMAScript5.


Доступ к свойствам строк

Метод charAt() возвращает символ в указанном index (position) в строке:

Пример

var str = "HELLO WORLD";
str.charAt(0);            // возвращает H
Попробуйте сами »

ECMAScript 5 разрешает доступ к свойствам строк:

Пример

var str = "HELLO WORLD";
str[0];                   // возвращает H
Попробуйте сами »

Доступ к свойству в строке может быть немного непредсказуемым.

Узнайте больше в разделе JS Строковые Методы.


Запятые

ECMAScript 5 позволяет использовать запятые в определениях объектов и массивов:

Пример объекта

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,]

Строки над несколькими строками

ECMAScript 5 допускает строковые литералы в несколько строк, если экранируется обратной косой чертой:

Пример

"Hello \
Dolly!";
Попробуйте сами »

Метод \ может не иметь универсальной поддержки.
Старые браузеры могут по-разному обрабатывать пробелы вокруг обратной косой черты.
Некоторые старые браузеры не допускают пробелов после символа \ .

Более безопасный способ разбить строковый литерал - использовать сложение строк:

Пример

"Hello " +
"Dolly!";
Попробуйте сами »

Зарезервированные слова как имена свойств

ECMAScript 5 позволяет использовать зарезервированные слова в качестве имен свойств:

Пример объекта

var obj = {name: "John", new: "yes"}
Попробуйте сами »

Браузерная поддержка ES5 (ECMAScript 5)

Chrome 23, IE 10 и Safari 6 были первыми браузерами, полностью поддерживающими ECMAScript 5:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
Sep 2012 Sep 2012 Apr 2013 Jul 2012 Jul 2013