Методы JavaScript: от базовых концепций до сложных сценариев

Раздел: Основы JavaScript -> Методы и функции

Методы JavaScript: обзор и примеры

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

let str = "привет";
let upper = str.toUpperCase();
console.log(upper); // "ПРИВЕТ"

методы js (методы javascript)

Как преобразовать строку в верхний регистр?

Применяется метод toUpperCase(). Возвращает новую строку.

let greeting = "hello";
console.log(greeting.toUpperCase()); // "HELLO"

Исходная строка остаётся неизменной. Если нужно обновить переменную, результат следует присвоить.

let word = "js";
word.toUpperCase(); // возвращает "JS", но word остаётся "js"
word = word.toUpperCase(); // теперь word = "JS"

Как добавить элемент в конец массива?

Метод push() добавляет один или несколько элементов в конец и возвращает новую длину массива. Изменяет исходный массив.

let arr = [1, 2, 3];
let newLength = arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
console.log(newLength); // 5

Мутация может быть нежелательной. Чтобы сохранить исходный массив, используют spread-оператор или concat.

let original = [1, 2];
let copy = [...original, 3]; // [1, 2, 3]

Как перебрать массив и выполнить действие для каждого элемента?

Метод forEach() принимает функцию, которая вызывается для каждого элемента. Ничего не возвращает.

let numbers = [10, 20, 30];
numbers.forEach(function(num) {
  console.log(num * 2);
});
// 20, 40, 60

Прервать forEach (break) нельзя. Для досрочного выхода используют for или for...of.

Как создать новый массив, преобразовав каждый элемент?

Метод map() возвращает новый массив с результатами вызова функции для каждого элемента.

let nums = [1, 2, 3];
let doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]
console.log(nums); // [1, 2, 3]

Если колбэк не возвращает значение, map создаёт массив с undefined. Нужно всегда возвращать результат.

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

Метод filter() возвращает новый массив с элементами, для которых функция вернула true.

let ages = [15, 22, 18, 30, 12];
let adults = ages.filter(age => age >= 18);
console.log(adults); // [22, 18, 30]

filter не изменяет исходный массив. Для удаления элементов на месте используется splice или присваивание результата обратно.

Как свести массив к одному значению (сумме, произведению)?

Метод reduce() принимает функцию-аккумулятор и начальное значение. Возвращает итоговое значение.

let values = [1, 2, 3, 4];
let sum = values.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

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

[].reduce((a, b) => a + b); // TypeError
[].reduce((a, b) => a + b, 0); // 0

Как привязать контекст (this) к функции?

Метод bind() создаёт новую функцию с заданным значением this и, опционально, начальными аргументами.

let user = {
  name: "Анна",
  greet: function() {
    console.log("Привет, " + this.name);
  }
};
let greetFunc = user.greet.bind(user);
greetFunc(); // Привет, Анна

Потеря контекста при передаче метода колбэком (например, в setTimeout) приводит к undefined или глобальному объекту. Необходимо явно привязать контекст.

setTimeout(user.greet, 1000); // this = window
setTimeout(user.greet.bind(user), 1000); // корректно

Как получить массив ключей или значений объекта?

Статические методы Object.keys(), Object.values(), Object.entries() возвращают соответствующие массивы.

let obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // ["a", "b", "c"]
console.log(Object.values(obj)); // [1, 2, 3]
console.log(Object.entries(obj)); // [["a",1],["b",2],["c",3]]

Порядок свойств: строковые ключи сохраняются в порядке создания, числовые ключи сортируются по возрастанию.

Как преобразовать число с фиксированным количеством знаков после запятой?

Метод toFixed() возвращает строку с заданным числом десятичных знаков.

let pi = 3.14159;
console.log(pi.toFixed(2)); // "3.14"

Результат - строка, а не число. Для вычислений требуется parseFloat.

Как получить случайное целое число в заданном диапазоне?

Используется Math.random() (число от 0 до 1, не включая 1) и Math.floor() для округления.

let random = Math.floor(Math.random() * 10) + 1; // от 1 до 10
console.log(random);

Math.random не криптостойкий. Для безопасности применяется crypto.getRandomValues.

Как сериализовать объект в JSON?

Метод JSON.stringify() преобразует объект в строку JSON.

let user = { name: "Иван", age: 30 };
let json = JSON.stringify(user);
console.log(json); // '{"name":"Иван","age":30}'

Функции, undefined, Symbol не сериализуются. Циклические ссылки вызывают ошибку.

Как разобрать строку JSON в объект?

Метод JSON.parse() принимает строку и возвращает объект.

let json = '{"name":"Иван","age":30}';
let obj = JSON.parse(json);
console.log(obj.name); // Иван

Невалидная строка вызывает SyntaxError. Рекомендуется оборачивать в try...catch.

Расширенные примеры использования методов JavaScript

Ниже представлены более сложные и менее распространённые способы применения методов.

1. Цепочка методов map, filter, reduce.

Пример 
let numbers = [10, 15, 20, 25, 30];
let result = numbers
  .filter(n => n % 2 === 0)      // [10,20,30]
  .map(n => n / 2)               // [5,10,15]
  .reduce((acc, n) => acc + n, 0); // 30
console.log(result);
30

Цепочка позволяет последовательно преобразовывать данные без создания лишних промежуточных переменных.

2. Array.from для генерации последовательности.

Пример 
let arr = Array.from({length: 5}, (value, index) => index * 2);
console.log(arr);
[0, 2, 4, 6, 8]

Array.from создаёт массив из псевдомассива (или итерируемого объекта) и применяет функцию к каждому элементу. Удобно для заполнения массивов.

3. String.padStart для выравнивания чисел с нулями.

Пример 
let hour = 9, minute = 5;
let time = String(hour).padStart(2, '0') + ':' + String(minute).padStart(2, '0');
console.log(time);
"09:05"

padStart добавляет символы в начало строки до достижения заданной длины. Полезно для форматирования дат, номеров.

4. Object.assign для объединения объектов (поверхностная копия).

Пример 
let defaults = { theme: 'light', lang: 'en' };
let userPrefs = { lang: 'ru', fontSize: 14 };
let config = Object.assign({}, defaults, userPrefs);
console.log(config);
{ theme: 'light', lang: 'ru', fontSize: 14 }

Object.assign копирует свойства из исходных объектов в целевой. Если встречаются одинаковые ключи, приоритет у последнего переданного объекта.

5. Array.flatMap для разворачивания и трансформации.

Пример 
let sentences = ["hello world", "good morning"];
let words = sentences.flatMap(s => s.split(' '));
console.log(words);
["hello", "world", "good", "morning"]

flatMap сначала применяет функцию к каждому элементу, затем разворачивает результат на один уровень. Полезен для преобразования списков строк в плоские массивы.

6. Promise.allSettled для обработки всех завершённых промисов.

Пример 
const p1 = Promise.resolve(3);
const p2 = Promise.reject('error');
Promise.allSettled([p1, p2]).then(results => {
  results.forEach(r => console.log(r.status));
});
fulfilled
rejected

allSettled ждёт выполнения всех промисов (и успешных, и отклонённых) и возвращает массив объектов с их статусами. В отличие от all, не прерывается при первой ошибке.

7. Intl.NumberFormat для форматирования чисел в соответствии с локалью.

Пример 
let formatter = new Intl.NumberFormat('ru-RU', {
  style: 'currency',
  currency: 'RUB'
});
console.log(formatter.format(12345.67));
"12 345,67 руб."

Intl.NumberFormat учитывает правила отображения чисел (тысячные разделители, дробная часть, символ валюты).

Методы JavaScript - comments

En
методы js (javascript)