JavaScript ES5
ECMAScript 2009, также известный как ES5, был первой крупной версией JavaScript.
В этой главе описываются наиболее важные функции ES5.
Особенности ES5
- "использовать строгий"
- Доступ к строке[ число ]
- Многострочные строки
- Строка.trim()
- Массив.isArray()
- Массив для каждого()
- Карта массива()
- Фильтр массива()
- Уменьшить массив ()
- Массив уменьшитьПраво()
- Массив каждый()
- Массив несколько()
- Индекс массива ()
- Массив lastIndexOf()
- JSON.parse()
- JSON.stringify()
- Дата.сейчас()
- Дата toISOString()
- Дата вJSON()
- Получатели и установщики свойств
- Зарезервированные слова в качестве имен свойств
- Методы объекта
- Объект определяет свойство ()
- Функция.bind()
- Завершающие запятые
Поддержка браузера
ES5
полностью поддерживается во всех современных браузерах:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9.0 | Yes | Yes | Yes | Yes |
Директива «использовать строгую»
"use strict"
определяет, что код JavaScript должен выполняться в «строгом режиме».
В строгом режиме вы можете, например, не использовать необъявленные переменные.
Вы можете использовать строгий режим во всех своих программах. Это помогает вам писать более чистый код, например, предотвращает использование необъявленных переменных.
"use strict"
это просто строковое выражение. Старые браузеры не будут выдавать ошибку, если они ее не понимают.
Подробнее читайте в JS Strict Mode .
Доступ к свойствам строк
Метод charAt()
возвращает символ по указанному индексу (позиции) в строке:
Пример
var str = "HELLO WORLD";
str.charAt(0); // returns H
ES5 разрешает доступ к свойствам строк:
Пример
var str = "HELLO WORLD";
str[0]; // returns H
Доступ к свойству строки может быть немного непредсказуемым.
Подробнее читайте в статье Строковые методы JS .
Строки в нескольких строках
ES5 позволяет использовать строковые литералы в нескольких строках, если они экранированы обратной косой чертой:Пример
"Hello \
Dolly!";
Метод \ может не иметь универсальной поддержки.
Старые браузеры могут по-разному обрабатывать пробелы вокруг обратной косой черты.
Некоторые старые браузеры не допускают пробелов после символа \.
Более безопасный способ разбить строковый литерал — использовать сложение строк:
Пример
"Hello " +
"Dolly!";
Зарезервированные слова в качестве имен свойств
ES5 позволяет использовать зарезервированные слова в качестве имен свойств:
Пример объекта
var obj = {name: "John", new: "yes"}
Обрезка строки ()
Метод trim()
удаляет пробелы с обеих сторон строки.
Пример
var str = " Hello World! ";
alert(str.trim());
Подробнее читайте в статье Строковые методы JS .
Массив.isArray()
Метод isArray()
проверяет, является ли объект массивом.
Пример
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
Подробнее читайте в JS-массивах .
Массив для каждого()
Метод forEach()
вызывает функцию один раз для каждого элемента массива.
Пример
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
Узнайте больше в JS Методы итерации массива .
Карта массива()
В этом примере каждое значение массива умножается на 2:
Пример
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Узнайте больше в JS Методы итерации массива .
Фильтр массива()
В этом примере создается новый массив из элементов со значением больше 18:
Пример
var numbers = [45, 4, 9, 16, 25];
var over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Узнайте больше в JS Методы итерации массива .
Уменьшить массив ()
Этот пример находит сумму всех чисел в массиве:
Пример
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Узнайте больше в JS Методы итерации массива .
Массив уменьшитьПраво()
Этот пример также находит сумму всех чисел в массиве:
Пример
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Узнайте больше в JS Методы итерации массива .
Массив каждый()
В этом примере проверяется, все ли значения больше 18:
Пример
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
Узнайте больше в JS Методы итерации массива .
Массив несколько()
В этом примере проверяется, превышают ли некоторые значения 18:
Пример
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.some(myFunction);
function myFunction(value) {
return
value > 18;
}
Узнайте больше в JS Методы итерации массива .
Индекс массива ()
Ищет в массиве значение элемента и возвращает его позицию.
Пример
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
Узнайте больше в JS Методы итерации массива .
Массив lastIndexOf()
lastIndexOf()
то же, что и 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()
returns the number of milliseconds since zero date (January 1.
1970 00:00:00 UTC).
Example
var timInMSs = Date.now();
Date.now()
returns the same as getTime() performed on a Date
object.
Learn more in JS Dates.
Date toISOString()
The toISOString()
method converts a Date object to a string, using the ISO standard format:
Example
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
Date toJSON()
toJSON()
converts a Date object into a string, formatted as a JSON date.
JSON dates have the same format as the ISO-8601 standard: YYYY-MM-DDTHH:mm:ss.sssZ:
Example
d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();
Property Getters and Setters
ES5 lets you define object methods with a syntax that looks like getting or setting a property.
This example creates a getter for a property called fullName:
Example
// Create an object:
var person = {
firstName:
"John",
lastName : "Doe",
get
fullName() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.fullName;
This example creates a setter and a getter for the language property:
Example
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
get lang() {
return this.language;
},
set lang(value) {
this.language = value;
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.lang;
This example uses a setter to secure upper case updates of language:
Example
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;
Learn more about Gettes and Setters in JS Object Accessors
Object.defineProperty()
Object.defineProperty()
is a new Object method in ES5.
It lets you define an object property and/or change a property's value and/or metadata.
Example
// Create an Object:
var person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
//
Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
Next example is the same code, except it hides the language property from enumeration:
Example
// Create an Object:
var person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : false,
configurable : true
});
//
Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
This example creates a setter and a getter to secure upper case updates of language:
Example
/// Create an Object:
var person = {
firstName: "John",
lastName :
"Doe",
language : "NO"
};
// Change a Property:
Object.defineProperty(person, "language", {
get : function() { return
language },
set : function(value) { language = value.toUpperCase()}
});
// Change Language
person.language = "en";
// Display Language
document.getElementById("demo").innerHTML = person.language;
E5 Object Methods
ES5 added a lot of new Object Methods to JavaScript:
Managing Objects
// Create object with an existing object as prototype
Object.create(parent, donor)
// Adding or changing an object property
Object.defineProperty(object, property, descriptor)
// Adding or changing object properties
Object.defineProperties(object, descriptors)
// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)
// Returns all properties as an array
Object.getOwnPropertyNames(object)
// Accessing the prototype
Object.getPrototypeOf(object)
// Returns enumerable properties as an array
Object.keys(object)
Protecting Objects
// Prevents adding properties to an object
Object.preventExtensions(object)
// Returns true if properties can be added to an object
Object.isExtensible(object)
// Prevents changes of object properties (not values)
Object.seal(object)
// Returns true if object is sealed
Object.isSealed(object)
// Prevents any changes to an object
Object.freeze(object)
// Returns true if object is frozen
Object.isFrozen(object)
Learn more in Object ECMAScript5.
Trailing Commas
ES5 allows trailing commas in object and array definitions:
Object Example
person = {
firstName: "John",
lastName: "
Doe",
age: 46,
}
Array Example
points = [
1,
5,
10,
25,
40,
100,
];
WARNING !!!
JSON does not allow trailing commas.
JSON Objects:
//
Allowed:
var person = '{"firstName":"John", "lastName":"Doe",
"age":46}'
JSON.parse(person)
// Not allowed:
var person = '{"firstName":"John",
"lastName":"Doe", "age":46,}'
JSON.parse(person)
JSON Arrays:
//
Allowed:
points = [40, 100, 1, 5, 25, 10]
// Not allowed:
points =
[40, 100, 1, 5, 25, 10,]