Метод map в js

Метод map в js...Вот есть массив и надо со всеми элементами быстренько провернуть одну операцию: например: умножить все элементы на 2 - вот эта функция это и делает...

 

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

Синтаксис метода map():

array.map(function(currentValue, index, arr), thisValue)

- currentValue - текущий обрабатываемый элемент массива;
- index - индекс текущего обрабатываемого элемента массива;
- arr - ссылка на обрабатываемый массив;
- thisValue (необязательный) - объект, который будет использоваться в качестве значения this при вызове функции.

Примеры использования метода map():

1. Преобразование массива чисел в массив квадратов этих чисел:

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(function(num) {
    return num * num;
});
console.log(squares); // [1, 4, 9, 16, 25]


2. Преобразование массива строк в массив их длин:

const names = ['Alice', 'Bob', 'Charlie', 'David'];
const lengths = names.map(function(name) {
    return name.length;
});
console.log(lengths); // [5, 3, 7, 5]


3. Преобразование массива объектов в массив значений определенного свойства:

const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' },
    { id: 4, name: 'David' }
];
const ids = users.map(function(user) {
return user.id;
});
console.log(ids); // [1, 2, 3, 4]


4. Преобразование массива объектов в массив строк:

const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' },
    { id: 4, name: 'David' }
];
const names = users.map(function(user) {
return user.name;
});
console.log(names); // ['Alice', 'Bob', 'Charlie', 'David']


5. Преобразование массива чисел в массив строк:

const numbers = [1, 2, 3, 4, 5];
const strings = numbers.map(function(num) {
    return num.toString();
});
console.log(strings); // ['1', '2', '3', '4', '5']


6. Преобразование массива объектов в массив других объектов:

const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' },
    { id: 4, name: 'David' }
];
const newUsers = users.map(function(user) {
return { id: user.id, fullName: user.name + ' Smith' };
});
console.log(newUsers);
// [
// { id: 1, fullName: 'Alice Smith' },
// { id: 2, fullName: 'Bob Smith' },
// { id: 3, fullName: 'Charlie Smith' },
// { id: 4, fullName: 'David Smith' }
// ]


7. Преобразование массива строк в массив объектов:

const names = ['Alice', 'Bob', 'Charlie', 'David'];
const users = names.map(function(name, index) {
    return { id: index + 1, name: name };
});
console.log(users);
// [
// { id: 1, name: 'Alice' },
// { id: 2, name: 'Bob' },
// { id: 3, name: 'Charlie' },
// { id: 4, name: 'David' }
// ]


Метод map() можно использовать вместе с другими методами массивов, например, filter(), reduce(), sort() и т.д., для более сложных преобразований и фильтраций данных.

const numbers = [1, 2, 3, 4, 5];
const squaresSum = numbers
.filter(function(num) {
    return num % 2 === 0;
})
.map(function(num) {
    return num * num;
})
.reduce(function(sum, num) {
    return sum + num;
}, 0);
console.log(squaresSum); // 20 (2*2 + 4*4)


Метод map() является одним из наиболее часто используемых методов массивов в JavaScript благодаря своей универсальности и простоте использования.

Добавить комментарий


Защитный код
Обновить