Заметки по JavaScript (часть 1)

03.06.2025

Синтаксис

Переменную, которая не используется называют знаком нижнего подчеркивания:

const x = new Array.from({length: 10}, (_, i) => i + 1);

Для применения метода к числам используются круглые скобки:

(2.6).toFixed(3);
// '2.600'

(4).toFixed(2);
// '4.00'

Это связано с тем, что числа в JavaScript являются primitives, а primitives не являются объектом и не имеют методов. Использование круглых скобок преобразовывает число в объект Number, после чего можно вызывать методы объекта Number.

Определение типа данных

const num = 123;
console.log(typeof num);
// int

Работа с числами

Типизация числа

console.log('59');
// '59' (string)

Number('59');
// 59  (int)

console.log(+'59');
// 59  (int)

Number.parseInt('59px');
// 59 (int)

Number.parseInt('e59');
// NaN

Number.parseFloat('2.5rem');
// 2.5 (float)

Number.isNAN(34);
// false

Number.isNAN('34');
// false

Number.isNAN(+'34px');
// true

100/0
// Infinity

Как проверить является ли значение числом в JS:

Number.isFinite(23);
// true

Number.isFinite('23');
// false

Number.isInteger(23);
// true

Number.isInteger(23.0);
// true

Number.isInteger(23.5);
// false

Математические функции

Math.abs(-100); 
// 100

// Square root
Math.sqrt(25);
// 5

25 ** (1/2);
// 5

// Cubic root
8 ** (1/3);
// 2

Math.max(2, 5, 22);
// 22

Math.min(2, 5, 22);
// 2

Math.PI;
// 3.14...

// Removes decimal part
Math.trunc(123.45678);

Math.rand();
// 123

Работа с большими числами в JavaScript

Максимальное число, которое допустимо использоваться в JS является 2 в 53 степени. Чтобы преобразовать число в BigINT необходимо в конец числа добавить букву n или используя функцию bigint(). Любые математические операции с bigint можно выполнять только с bigint. Например при попытке умножить bigint на int произойдет ошибка.

2 ** 53 - 1;
// 9007199254740992

Number.MAX_SAFE_NUMBER;
// 9007199254740992

// BigINT
9999999999999999999999999n
BigINT(100000);

Строки JavaScript

Вывод переменных в текстовых строках

const site = 'hosting.xyz';
console.log('I rented VPS server at ' + site);
console.log(`I rented dedicated server at ${site}`);

Строка в JS является объектом, поэтому у каждой строки есть свой набор методов. Для получения символа в строке можно использовать метод at:

'test string'.at(5);
// output: s

Преобразования строк

'Test String'.toUpperCase();
// TEST STRING

'Test String'.toLowerCase();
// test string

'Test String'.split(' ');
// ['Test', 'String']

Массивы JavaScript

let arr = ['a', 'b', 'c', 'd'];

array.slice()

Метод slice не изменяет массив, а возвращает новый.

Получение части массива со 2 по 4 элемент

arr.slice(2, 4);

Получить последний элемент массива

arr.slice(-1);

Так как массивы являются объектами Javascript, то использование стандартного метода копирования массива

let new_arr = arr;

не приведет к копированию, а лишь создаст переменную с указателем на исходный массив. Поэтому при изменении new_arr будет меняться и arr.

Для копирования массива используйте оператор расширения или метод array.slice() без параметров:

let new_arr = [...arr];
let new_arr = arr.slice();

array.splice()

Удаляет элементы из массива, к которому применяется метод. Параметры такие же как и у array.slice(). Для создания копии массива используйте array.toSpliced().

array.reverse() и array.toReverse()

Меняет порядок элементов массива к которому применяется метод. Аналогом array.reverse(), но без изменения массива, к которому применяется метод, является array.toReverse().

array.concat()

Объединяет несколько массивов в один.

let arr1 = ['a', 'b', 'c'];
let arr2 = ['e', 'd', 'f'];
let abc = arr1.concat(arr2);
console.log(abc);
// output: ['a', 'b', 'c', 'e', 'd', 'f']

Для объединения массивов можно так же использовать оператор расширения:

let abc = [...arr1, ...arr2];

array.join()

Преобразовывает массив в строку, разделяя элементы массива разделителем, который указывается в качестве паарметра:

let str = letters.join(' - ');
console.log(str);
// output: a - b - c - d - e - f

array.push()

Добавялет элемент в конец массива

let arr = [];
arr.push('USD');
arr.push('EUR');
console.log(arr);
// output: ['USD', 'EUR']

array.find() и array.findLast()

Возвращает значение первого элемента в массиве, который соответствует условию callback функции

const money = [10, -20, 40, -10];
const firstWithdrawal = money.find(mov => mov < 0);
console.log(firstWithdrawal);
// -20

array.findIndex() и array.findLastIndex()

Работает так же как и array.find(), но возвращает не сам элемент, а его порядковый номер в массиве. Такой поиск полезен, когда необходимо удалить определенный элемент массива и для этого необходимо знать его порядковый номер.

let money = [10, -20, 40, -10];
let index = money.find(val => val < 0);
money.splice(index, 1);

array.flat()

Преобразовывает многомерный массив в одномерный. В качестве параметра принимает количество уровней вложенности, которые следует переместить на первый уровень.

Как отсортировать значения массива JavaScript

Если сортировать необходимо строки, то достаточно использовать метод array.sort(), который изменяет массив сортируя значения в алфавитном порядке:

const developers = ['Leonid', 'Andrey', 'Eugen', 'Ilya'];
developers.sort();
console.log(developers);
// ["Andrey", "Eugen", "Ilya", "Leonid"[

Если исходный массив необходимо оставить неизменным используйте unmutable метод array.toSorted().

Так как метод array.sort() преобразовывает числа в строки, а затем их сортирует, то для правильной сортировки необходимо использовать callback функцию:

const prices = [100, 20, 400, 3];
prices.sort();
console.log(prices);
// [100, 20, 3, 400]

// a - current element, b - next element
// return < 0, a, b (keep order)
// return > 0, b, a (change order)

// Ascending order
prices.sort((a, b) => {
  return (a > b) ? 1: -1;
});
// or
prices.sort((a, b) => a - b);

console.log(prices);
// [3, 20, 100, 400]
// []

Как проверить наличие элемента в массиве

let money = [10, -20, 40, -10];

// EQUALITY
let test = money.includes(40);
console.log(test);
// true

// CONDITION
let anyDeposits = money.some(val => val > 10);
console.log(anyDeposits);
// true

Проверка на соответствие условию

Чтобы проверить соответствие всех элементов массива определенному условию используется метод array.every(). Только если для всех элементов массива функция вернет true, то результатом метода array.every() будет true, в проотивном случае - false.

let money = [10, -20, 40, -10];
let onlyDeposits = money.every(val => val >= 0);
console.log(onlyDeposits);
// false

Как получить последний элемент массива в JS

Для получения последнего элемента массива в JavaScript можете использовать любой из приведенных ниже методов:

arr[arr.length - 1];
arr.slice(-1)[0];
arr.at(-1);

Как пройтись по всем элементам массива

const arr = [100, 200, -400, 500, -120];
// for loop
for (let val of arr) {
  console.log(val);
}

// for loop with index
for ([i, val] = arr.entries()) {
   console.log(i + ': ' + val);
}

// foreach loop
arr.forEach(function(val) {
  console.log(val);
});

// foreach with index
arr.forEach(function(val, i) {
  console.log(i + ': ' + val);
});

Использование цикла for позволяет в коде добавить условие и прервать выполнение цикла, в то время как при использовании array.forEach() такой возможности - нет.

Если при вызове array.forEach() умножить значение на два, то это приведет к изменению значений текущего массива. Если массив менять не нужно, то для этого используется array.map(), который вернет новый массив.

// Multiply values by 2 in the arr array
arr.forEach(function(val) {
  val = val * 2;
});

// Create new array with values multiplied by 2
let new_array = arr.map(function(val) {
  val = val * 2;
});

Удаление лишних элементов массива

Точнее создание нового массива, который будет содержать только нужные элементы. Например необходимо получить массив, который будет содержать только положительные элементы.

const arr = [100, 20, -40, 50, -100, 30];
arr.filter(function(val) {
  if (val > 0) {
    return true;
  } else {
    return false;
  } 
});

console.log(arr);
// [100, 20, 50, 30]

Как просуммировать элементы в массиве

const arr = [100, 20, -40, 50, -100, 30];
cons sum = arr.reduce(function(acc, val, i) {
  console.log(`Iteration ${i}: ${val}. Total: ${acc}`)
  return acc + cur;
}, 0);

console.log(sum);
// 60

Группировка массивов

const trn = [100, 200, -50, -100];
let groupedTrn = Object.groupBy(trn, pay => pay > 0 ? 'deposit': 'withdrawal');
console.log(groupedTrn);
// {
//   deposits: [100, 200],
//.  withdrawal: [-50, -100]
//. }

Как заполнить массив значениями

const arr = new Array(5);
arr.fill(1);
// [1, 1, 1, 1, 1]

arr.fill(100, 3, 4)
// [1, 1, 100, 100, 1]

const x = Array.from({length: 10}, () => 1);
console.log(x);
// [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

const x = Array.from({length: 10}, (cur, i) => i + 10);
console.log(x);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const nodeArray = new Array.from(
  document.querySelector('.myclass'), 
  el => Number(
    el.textContent.replace(' EUR', '')
  )
);

Ассоциативные массивы или структуры в JavaScript

Массив, в котором в качестве ключа используется не число, а текст называется ассоциативным.

const currency = new Map([
  ['USD', 'United States dollar'],
  ['EUR', 'Euro'],
  ['UAH', 'Ukrainian hryvna']
]);

Структуры с уникальными значениями

Для хранения в массиве только уникальных значений создается набор значений SET.

let currencies = new Set(['USD', 'EUR', 'GBP', 'UAH']);

Работа с датами в JavaScript

Обратите внимание на то, что нумерация месяцев в JS начинается с нуля, поэтому в указанном ниже примере 1 месяцем будет февраль.

const future = new Date(2050, 1, 8, 4, 10, 6);
// 8 Feb 2050 04:10:06

// UTC without daylight saving format
future.toISOString();
// 2050-02-08T02:10:06.000Z

future.getFullYear();
// 2050

future.getMonth();
// 2

future.getDate();
// 8

future.getDate().padStart(2, 0);
// 08

future.getHours();
future.getMinutes();
future.getSeconds();

// Set
future.setFullYear(2040);

// Timestamp
future.getTime();

Локализация дат и чисел

const today = new Date('June 05, 2025');

const enUS = new Intl.DateTimeFormat('en-US').format(today);
// 06/05/2025

const enGb = new Intl.DateTimeFormat('en-GB').format(today);
// 06/05/2025

// Browser locale
const locale = navigator.language;

// Options
const options = {
  hour: 'numeric',
  minute: 'numeric',
  day: '2-digit',
  month: 'long',
  year: 'numeric',
  weekday: 'short'
};
const formatted = new Intl.DateTimeFormat(locale, options).format(new Date());
// Monday, July 06, 2025, 8:44 PM

const number_options = {
  style: 'unit',
  unit: 'celsius'
};
const temp = new Intl.NumberFormat(locale, options).format(100);
// 100 &deg;C

const number_options = {
  style: 'currency',
  unit: 'UAH',
  useGrouping: false
};
const temp = new Intl.NumberFormat(locale, options).format(100);
// 100₴

Таймеры

В JavaScript есть два вида таймеров - который выполняется один раз setTimeout() и тот, который выполняется беспрерывное количество раз setInterval()

setTimeout(() => 
  console.log('3 seconds passed '+arg1+';'+arg2), 
  3000, 
  'test1', 
  'test2'
);

Функции

Когда определяете функцию в JavaScript, то она возвращает ссылку на адрес памяти в которую она записана. Можно сказать что ведет себя функция так же как и переменная. Поэтому с функциями можно работать как с переменными - присваивать их значения переменной, элементам объекта ....

const myFunction = function() {
    console.log(123);
}
myFunction();

const myObj {
  prop1: 'test',
  myFunc: function() {
    console.log(this.prop1)
  }
}
myObj.myFunc();

Пример использования стрелочной функции

array.map(val => val * 2);
array.map((val, i, arr) => {
  console.log(`${i}: ${val}`);
  return val * 2; 
});

# Блог # Программирование

Содержание