Объект Date. Работа с датами
Кроме возможности создавать свои объекты, JavaScript также предоставляет набор встроенных типов объектов, которые мы можем применять в различных ситуациях.
Объект Date позволяет работать с датами и временем в JavaScript. Существуют различные способы создания объекта Date. Первый способ заключается в использовании пустого конструктора без параметров:
var currentDate = new Date(); document.write(currentDate);
В этом случае объект будет указывать на текущую дату компьютера.
Второй способ заключается в передаче в конструктор Date количества миллисекунд, которые прошли с начала эпохи Unix, то есть с 1 января 1970 года 00:00:00 GMT:
var myDate = new Date(1359270000000); document.write(myDate);
Третий способ состоит в передаче в конструктор Date дня, месяца и года:
var myDate = new Date("02 May 2018");
document.write(myDate); // Wed May 02 2018 00:00:00 GMT+0400 (Азербайджанское время (зима))
Если мы используем полное название месяца, то оно пишется по-английски, если используем сокращенный вариант, тогда используется формат месяц/день/год.
Четвертый способ состоит в передаче в конструктор Date всех параметров даты и времени:
var myDate = new Date(2018,11,25,18,30,20,10); document.write(myDate);
В данном случае используются по порядку следующие параметры: new Date(год, месяц, число, час, минуты, секунды, миллисекунды). При этом надо учитывать, что отсчет месяцев начинается с нуля, то есть январь - 0, а декабрь - 11.
- Получение даты и времени
Для получения различных компонентов даты применяется ряд методов:
- Установка даты и времени
Кроме задания параметров даты в конструкторе для установки, мы также можем использовать дополнительные методы объекта Date:
Объект Math. Математические операции
Объект Math предоставляет ряд математических функций, которые можно использовать при вычислениях. Рассмотрим основные математические функции.
- abs()
Функция abs() возвращает абсолютное значение числа:
var x = -25; document.write(Math.abs(x)); // 25 var y = 34; document.write(Math.abs(y)); // 34
- min() и max()
Функции min() и max() возвращают соответственно минимальное и максимальное значение из набора чисел:
var max = Math.max(19, 45); // 45 var min = Math.min(33, 24); // 24
Эти функции необязательно должны принимать два числа, в них можно передавать и большее количество чисел.
- ceil()
Функция ceil() округляет число до следующего наибольшего целого числа:
var x = Math.ceil(9.2); // 10 var y = Math.ceil(-5.9); // -5
Выражение Math.ceil(9.2) возвращает число 10, так как число 10 следующее наибольшее целое число после 9.2. И также выражение Math.ceil(-5.9) возвращает -5, потому что число -5 следующее наибольшее целое после -5.9.
- floor()
Функция floor() округляет число до следующего наименьшего целого числа:
var x = Math.floor(9.2); // 9 var y = Math.floor(-5.9); // -6
- round()
Функция round() округляет число до следующего наименьшего целого числа, если его десятичная часть меньше 0.5. Если же десятичная часть равна или больше 0.5, то округление идет до ближайшего наибольшего целого числа:
var x = Math.round(5.5); // 6 var y = Math.round(5.4); // 5 var z = Math.round(-5.4); // -5 var n = Math.round(-5.5); // -5 var m = Math.round(-5.6); // -6
- random()
Функция random() возвращает случайное число с плавающей точкой из диапазона от 0 до 1:
var x = Math.random(); console.log(x); // 0.9874820803431725
- pow()
Функция pow() возвращает число в определенной степени. Например, возведем число 2 в степень 3:
var x = Math.pow(2, 3); console.log(x); // 8
- sqrt()
Функция sqrt() возвращает квадратный корень числа:
var x = Math.sqrt(121); // 11 var y = Math.sqrt(9); // 3
- log()
Функция log() возвращает натуральный логарифм числа:
var x = Math.log(1); // 0 var z = Math.log(10); // 2.302585092994046
- Тригонометрические функции
Целый ряд функций представляют тригонометрические функции: sin() (вычисляет синус угла), cos() (вычисляет косинус угла), tan() (вычисляет тангенс угла).
var x = Math.sin(90); // 0.8939966636005579 var y = Math.cos(0); // 1 var z = Math.tan(45); // 1.6197751905438615
Функция asin() вычисляет арксинус числа, acos - арккосинус, а atan() - арктангенс числа:
var x = Math.asin(0.9); // 1.1197695149986342 var y = Math.acos(1); // 1 var z = Math.atan(1); // 0.7853981633974483
- Константы
Кроме методов объект Math также определяет набор встроенных констант, которые можно использовать в различных вычислениях:
Используем константы в вычислениях:
var x = Math.log(Math.E); // 1 var z = Math.tan(Math.PI/4); // 0.9999999999999999
Объект Array. Работа с массивами
Объект Array представляет массив и предоставляет ряд свойств и методов, с помощью которых мы можем управлять массивом.
- length
Чтобы узнать длину массива, используется свойство length:
var fruit = new Array();
fruit[0] = "яблоки";
fruit[1] = "груши";
fruit[2] = "сливы";
document.write("В массиве fruit " + fruit.length + " элемента: <br/>");
for(var i=0; i < fruit.length; i++) {
document.write(fruit[i] + "<br/>");
}
По факту длиной массива будет индекс последнего элемента с добавлением единицы.
- slice() - копирование массива
Копирование массива может быть поверхностным или неглубоким (shallow copy) и глубоким (deep copy).
При неглубоком копировании достаточно присвоить переменной значение другой переменной, которая хранит массив:
var users = ["Tom", "Sam", "Bill"]; console.log(users); // ["Tom", "Sam", "Bill"] var people = users; // неглубокое копирование people[1] = "Mike"; // изменяем второй элемент console.log(users); // ["Tom", "Mike", "Bill"]
В данном случае переменная people после копирования будет указывать на тот же массив, что и переменная users. Поэтому при изменении элементов в people, изменятся элементы и в users, так как фактически это один и тот же массив.
Такое поведение не всегда является желательным. Например, мы хотим, чтобы после копирования переменные указывали на отдельные массивы. И в этом случае можно использовать глубокое копирование с помощью метода slice():
var users = ["Tom", "Sam", "Bill"]; console.log(users); // ["Tom", "Sam", "Bill"] var people = users.slice(); // глубокое копирование people[1] = "Mike"; // изменяем второй элемент console.log(users); // ["Tom", "Sam", "Bill"] console.log(people); // ["Tom", "Mike", "Bill"]
В данном случае после копирования переменные будут указывать на разные массивы, и мы сможем изменять их отдельно друг от друга.
Также метод slice() позволяет скопировать часть массива:
var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var people = users.slice(1, 4); console.log(people); // ["Sam", "Bill", "Alice"]
В метод slice() передается начальный и конечный индексы, которые используются для выборки значений из массива. То есть в данном случае выборка в новый массив идет начиная с 1 индекса по индекс 4 не включая. И поскольку индексация массивов начинается с нуля, то в новом массиве окажутся второй, третий и четвертый элемент.
- push()
Метод push() добавляет элемент в конец массива:
var fruit = [];
fruit.push("яблоки");
fruit.push("груши");
fruit.push("сливы");
fruit.push("вишня","абрикос");
document.write("В массиве fruit " + fruit.length + " элемента: <br/>");
document.write(fruit); // яблоки,груши,сливы,вишня,абрикос
- pop()
Метод pop() удаляет последний элемент из массива:
var fruit = ["яблоки", "груши", "сливы"];
var lastFruit = fruit.pop(); // извлекаем из массива последний элемент
document.write(lastFruit + "<br/>"); // сливы
document.write("В массиве fruit " + fruit.length + " элемента: <br/>"); // В массиве fruit 2 элемента:
for(var i=0; i <fruit.length; i++) {
document.write(fruit[i] + "<br/>"); // яблоки груши
}
- shift()
Метод shift() извлекает и удаляет первый элемент из массива:
var fruit = ["яблоки", "груши", "сливы"];
var firstFruit = fruit.shift();
document.write(firstFruit + "<br/>"); // яблоки
document.write("В массиве fruit " + fruit.length + " элемента: <br/>"); // В массиве fruit 2 элемента:
for(var i=0; i <fruit.length; i++) {
document.write(fruit[i] + "<br/>"); // груши сливы
}
- unshift()
Метод unshift() добавляет новый элемент в начало массива:
var fruit = ["яблоки", "груши", "сливы"];
fruit.unshift("абрикосы");
document.write(fruit); // абрикосы,яблоки,груши,сливы
- splice() - удаление элемента по индексу
Метод splice() удаляет элементы с определенного индекса. Например, удаление элементов с третьего индекса:
var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice(3); console.log(deleted); // [ "Alice", "Kate" ] console.log(users); // [ "Tom", "Sam", "Bill" ]
Метод slice возвращает удаленные элементы. В данном случае удаление идет с начала массива. Если передать отрицательный индекс, то удаление будет производиться с конца массива.
- concat()
Метод concat() служит для объединения массивов:
var fruit = ["яблоки", "груши", "сливы"];
var vegetables = ["помидоры", "огурцы", "картофель"];
var products = fruit.concat(vegetables);
for(var i=0; i < products.length; i++) {
document.write(products[i] + "<br/>"); // яблоки груши сливы помидоры огурцы картофель
}
При этом необязательно объединять только однотипные массивы. Можно и разнотипные.
- join()
Метод join() объединяет все элементы массива в одну строку:
var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"];
var fruitString = fruit.join(", ");
document.write(fruitString); // яблоки, груши, сливы, абрикосы, персики
В метод join() передается разделитель между элементами массива. В данном случае в качестве разделителя будет использоваться запятая и пробел (", ").
- sort()
Метод sort() сортирует массив по возрастанию:
var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"];
fruit.sort();
for(var i=0; i < fruit.length; i++) {
document.write(fruit[i] + "<br/>");
}
Вывод в браузере:
абрикосы груши персики сливы яблоки
reverse() - переворачивает массив задом наперед.
Методы indexOf() и lastIndexOf() возвращают индекс первого и последнего включения элемента в массиве.
Метод every() проверяет, все ли элементы соответствуют определенному условию.
Метод some() похож на метод every(), только он проверяет, соответствует ли хотя бы один элемент условию. И в этом случае метод some() возвращает true. Если элементов, соответствующих условию, в массиве нет, то возвращается значение false.
Метод filter(), как some() и every(), принимает функцию условия. Но при этом возвращает массив тех элементов, которые соответствуют этому условию.
- forEach() и map()
Методы forEach() и map() осуществляют перебор элементов и выполняют с ними определенные операции. Например, для вычисления квадратов чисел в массиве можно использовать следующий код:
var numbers = [1, 2, 3, 4, 5, 6];
for(var i=0; i<numbers.length; i++) {
var result = numbers[i] * numbers[i];
document.write("Квадрат числа " + numbers[i] + " равен " + result + "<br/>");
}
Но с помощью метода forEach() можно упростить эту конструкцию:
var numbers = [1, 2, 3, 4, 5, 6];
function square(value, index, array) {
var result = value * value;
document.write("Квадрат числа " + value + " равен " + result + "<br/>");
};
numbers.forEach(square);
Метод forEach() в качестве параметра принимает все ту же функцию, в которую при переборе элементов передается текущий перебираемый элемент и над ним выполняются операции.
Метод map() похож на метод forEach, он также в качестве параметра принимает функцию, с помощью которой выполняются операции над перебираемыми элементами массива, но при этом метод map() возвращает новый массив с результатами операций над элементами массива.
Например, применим метод map к вычислению квадратов чисел массива:
var numbers = [1, 2, 3, 4, 5, 6];
function square(value, index, array) {
return result = value * value;
};
var squareArray = numbers.map(square);
document.write(squareArray); // 1,4,9,16,25,36
Функция, которая передается в метод map() получает текущий перебираемый элемент, выполняет над ним операции и возвращает некоторое значение. Это значение затем попадает в результирующий массив squareArray.
Объект Number. Работа с числами
Объект Number представляет числа. Чтобы создать число, надо передать в конструктор Number число или строку, представляющую число:
var x = new Number(34);
var y = new Number('34');
document.write(x+y); // 68
Определения x и y в данном случае будут практически аналогичны. Однако создавать объект Number можно и просто присвоив переменной определенное число:
var z = 34;
Объект Number предоставляет ряд свойств и методов. Некоторые его свойства:
Некоторые основные методы:
var a = Number.parseFloat("34.90"); // 34.9
document.write(a);
var b = Number.parseFloat("hello"); // NaN
document.write(b);
var c = Number.parseFloat("34hello"); // 34
document.write(c);
var a = Number.parseInt("34.90"); // 34
document.write(a);
var b = Number.parseInt("hello"); // NaN
document.write(b);
var c = Number.parseInt("25hello"); // 25
document.write(c);
var a = 10 / 1.44;
document.write("До метода toFixed(): " + a + "<br/>");
a = a.toFixed(2); // оставляем два знака после запятой
document.write("После метода toFixed(): " + a + "<br/>");
До метода toFixed(): 6.944444444444445 После метода toFixed(): 6.94
Объект String. Работа со строками
Для создания строк мы можем как напрямую присваивать переменной строку:
let name = "Tom";
Для работы со строками предназначен объект String, поэтому также можно использовать конструктор String:
var name = new String("Tom");
Но как правило, используется первый более краткий способ. В первом случае JavaScript при необходимости автоматически преобразует переменную примитивного типа в объект String. Объект String имеет большой набор свойств и методов, с помощью которых мы можем манипулировать строками.
Свойство length указывает на длину строки:
var hello = "привет мир";
console.log("В строке '" + hello + "' " + hello.length + " символов"); // В строке 'привет мир' 10 символов
Метод repeat() позволяет создать строку путем многократного повторения другой строки. Количество повторов передается в качестве аргумента:
let hello = "hello "; console.log(hello.repeat(3)); // hello hello hello
- Шаблоны строк
Шаблоны строк позволяют вставлять в строку различные значения. Для этого строки заключаются в косые кавычки:
let name = "Tom";
let hello = `Hello ${name}`;
console.log(hello); // Hello Tom
let age = 23;
let info = `${name} is ${age} years old`;
console.log(info); // Tom is 23 years old
Для вставки значения в строку оно заключается в фигурные скобки, перед которыми ставится знак доллара.
- Поиск в строке
Для поиска в строке некоторой подстроки используются методы indexOf() (индекс первого вхождения подстроки) и lastIndexOf() (индекс последнего вхождения подстроки).
Эти методы принимают два параметра:
Оба этих метода возвращают индекс символа, с которого в строке начинается подстрока. Если подстрока не найдена, то возвращается число -1.
let hello = "привет мир. пока мир";
let key = "мир";
let firstPos = hello.indexOf(key);
let lastPos = hello.lastIndexOf(key);
console.log("Первое вхождение: ", firstPos); // 7
console.log("Последнее вхождение: ", lastPos); // 17
Еще один метод - includes() возвращает true, если строка содержит определенную подстроку.
let hello = "привет мир. пока мир";
console.log(hello.includes("мир")); // true
console.log(hello.includes("миг")); // false
- Выбор подстроки
Для того, чтобы вырезать из строки подстроку, применяются методы substr() и substring().
Метод substring() принимает два параметра:
let hello = "привет мир. пока мир"; let world = hello.substring(7, 10); // с 7-го по 10-й индекс console.log(world); // мир
Метод substr() также в качестве первого параметра принимает начальный индекс подстроки, а в качестве второго - длину вырезаемой подстроки:
let hello = "привет мир. пока мир"; let bye = hello.substr(12, 4); console.log(bye); // пока
Если второй параметр не указывается, то обрезается вся остальная часть строки.
- Управление регистром
Для изменения регистра имеются методы toLowerCase() (для перевода в нижний регистр) и toUpperCase() (для перевода в верхний регистр).
let hello = "Привет Том"; console.log(hello.toLowerCase()); // привет том console.log(hello.toUpperCase()); // ПРИВЕТ ТОМ
- Получение символа по индексу
Чтобы получить определенный символ в строке по индексу, можно применять методы charAt() и charCodeAt(). Оба этих метода в качестве параметра принимают индекс символа:
let hello = "Привет Том"; console.log(hello.charAt(2)); // и console.log(hello.charCodeAt(2)); // 1080
- Удаление пробелов
Для удаления начальных и концевых пробелов в стоке используется метод trim():
let hello = " Привет Том ";
let beforeLength = hello.length;
hello = hello.trim();
let afterLength = hello.length;
console.log("Длина строки до: ", beforeLength); // 15
console.log("Длина строки после: ", afterLength); // 10
- Объединение строк
Метод concat() объединяет две строки:
let hello = "Привет "; let world = "мир"; hello = hello.concat(world); console.log(hello); // Привет мир
- Замена подстроки
Метод replace() заменяет первое вхождение одной подстроки на другую:
let hello = "Добрый день";
hello = hello.replace("день", "вечер");
console.log(hello); // Добрый вечер
Первый параметр метода указывает, какую подстроку надо заменить, а второй параметр - на какую подстроку надо заменить.
- Разделение строки
Метод split() разбивает строку на массив подстрок по определенному разделителю. В качестве разделителя используется строка, которая передается в метод:
var message = "Сегодня была прекрасная погода";
var stringArray = message.split(" ");
for(var str in stringArray) {
console.log(stringArray[str]);
}
Сегодня была прекрасная погода
- Проверка начала и окончания строки
Метод startsWith() возвращает true, если строка начинается с определенной подстроки. А метод endsWith() возвращает true, если строка оканчивается на определенную подстроку.
let hello = "let me speak from my heart";
console.log(hello.startsWith("let")); // true
console.log(hello.startsWith("Let")); // false
console.log(hello.startsWith("lets")); // false
console.log(hello.endsWith("heart")); // true
console.log(hello.startsWith("bart")); // false
При этом играет роль регистр символов, и из примера выше мы видим, что "let" не эквивалентно "Let".
Дополнительный второй параметр позволяет указать индекс (для startsWith - индекс с начала, а для endsWith - индекс с конца строки), относительно которого будет производиться сравнение.
Объект RegExp. Регулярные выражения
Регулярные выражения представляют шаблон, который используется для поиска или модификации строки. Для работы с регулярными выражениями в JavaScript определен объект RegExp.
Определить регулярное выражение можно двумя способами:
var myExp = /hello/;
var myExp = new RegExp("hello");
Используемое здесь регулярное выражение довольно простое: оно состоит из одного слова "hello". В первом случае выражение помещается между двумя косыми чертами, а во втором случае используется конструктор RegExp, в который выражение передается в виде строки.
Чтобы определить, соответствует ли регулярное выражение строке, в объекте RegExp определен метод test(). Этот метод возвращает true, если строка соответствует регулярному выражению, и false, если не соответствует:
var initialText = "hello world!"; var exp = /hello/; var result = exp.test(initialText); document.write(result + "<br/>"); // true initialText = "beautifull wheather"; result = exp.test(initialText); document.write(result); // false - в строке initialText нет "hello"
Аналогично работает метод exec - он также проверяет, соответствует ли строка регулярному выражению, только теперь данный метод возвращает ту часть строки, которая соответствует выражению. Если соответствий нет, то возвращается значение null.
- Свойства выражений
- Метасимволы
Регулярные выражения также могут использовать метасимволы - символы, которые имеют определенный смысл:
Так, стандартный формат номера телефона +1-234-567-8901 соответствует регулярному выражению \d-\d\d\d-\d\d\d-\d\d\d\d.
- Модификаторы
Кроме выше рассмотренных элементов регулярных выражений есть еще одна группа комбинаций, которая указывает, как символы в строке будут повторяться. Такие комбинации еще называют модификаторами:
Например, возьмем номер того же телефона. Ему соответствует регулярное выражение \d-\d\d\d-\d\d\d-\d\d\d\d. Однако с помощью выше рассмотренных комбинаций мы его можем упростить: \d-\d{3}-\d{3}-\d{4}
Также надо отметить, что так как символы ?, +, * имеют особый смысл в регулярных выражениях, то чтобы их использовать в обычным для них значении (например, нам надо заменить знак плюс в строке на минус), то данные символы надо экранировать с помощью слеша.