Метод map в js
- Подробности
- Категория: Javascript
- Просмотров: 83
Метод 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 благодаря своей универсальности и простоте использования.