Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

JS Учебник


JS Версии


JS Объекты


JS Функции


JS Классы


JS Асинхронный


JS HTML DOM


JS Браузер BOM


JS Веб APIы


JS AJAX


JS JSON


JS или jQuery


JS Графика


JS Примеры


JS Рекомендация




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

Пример
var str = " Привет Мир! ";
alert(str.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).

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

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

Пример
var str = "ПРИВЕТ МИР";
str.charAt(0); // возвращает П
Попробуйте сами »

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

Пример
var str = "ПРИВЕТ МИР";
str[0]; // возвращает П
Попробуйте сами »

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

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

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

var obj = {name: "Щипунов", 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


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.