ES6 massiv map() metodi

map() metodi

map() usuli har bir massiv elementi uchun funksiyani chaqirish natijalari bilan yangi massiv yaratadi.

Misol

Har bir raqamni 2 ga ko‘paytiring:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(x => x * 2);

O‘zingiz sinab ko‘ring »

React’da map()

map() usuli odatda Reactda elementlar ro‘yxatini ko‘rsatish uchun ishlatiladi:

Misol

const fruitlist = ['apple', 'banana', 'cherry'];

function MyList() {
  return (
    <ul>
      {fruitlist.map(fruit => 
        <li key={fruit}>{fruit}</li>
      )}
    </ul>
  );
}

O‘zingiz sinab ko‘ring »

Eslatma: Ro‘yxat elementlarini yaratish uchun React-da map() dan foydalanilganda, har bir elementga o‘ziga xos key prop kerak bo‘ladi.

map() obyektlar bilan

Shuningdek, map() dan obyektlar massivlari bilan ham foydalanishingiz mumkin:

Misol

const users = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Bob', age: 35 }
];

function UserList() {
  return (
    <ul>
      {users.map(user => 
        <li key={user.id}>
          {user.name} is {user.age} years old
        </li>
      )}
    </ul>
  );
}

O‘zingiz sinab ko‘ring »

map() parametrlari

map() usuli uchta parametrni oladi:

currentValue - ishlov berilayotgan joriy element
index - Joriy elementning indeksi (ixtiyoriy)
array - map chaqirilgan massiv (ixtiyoriy)

Misol

const fruitlist = ['apple', 'banana', 'cherry'];

function App() {
  return (
    <ul>
      {fruitlist.map((fruit, index, array) => {
        return (
          <li key={fruit}>
            Name: {fruit}, Index: {index}, Array: {array}
          </li>
        );
      })}
    </ul>
  );
}

O‘zingiz sinab ko‘ring »

Eslatma: map() usuli har doim yangi massivni qaytaradi. U asl massivni o‘zgartirmaydi.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish