САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

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 Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Ключевое слово let JS Константы JS Функция стрелки JS Классы JS Отладчик JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS Версия 2016 JS Версия 2017 JS JSON

JS Формы

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

JS Объекты

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

JS Функции

Определение функции Параметры функции Вызов функции Вызвать функцию Применение функции Закрытие функции

JS Прочее

Классы введение Наследование класса Статические методы... JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный синтаксис

JS HTML DOM

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

JS Браузера BOM

JS Window JS Экран JS Расположение JS История JS Навигатор JS Предупреждение JS Синхронизация JS Cookies

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 Строки JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS Веб API

API - Введение API - История API - Хранилище API - Работник API - Извлечь файл API - Геолокации

JS или jQuery

jQuery HTML Селекторы jQuery HTML Элементы jQuery CSS Стили jQuery HTML DOM

JS Примеры

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

JS Справочник

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


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() удаляет пробелы с обеих сторон строки.

Пример

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.


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).

Пример

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

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() возвращает символ по указанному индексу (позиции) в строке:

Пример

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

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

Пример

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

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

Подробнее читайте Строковые методы 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 позволяет использовать строковые литералы на нескольких строках, если они экранированы обратной косой чертой:

Пример

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

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

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

Пример

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

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

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

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

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

Браузерная поддержка ES5

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

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
Сентябрь 2012 Сентябрь 2012 Апрель 2013 Июль 2012 Июль 2013