Cara Menggunakan Peta JavaScript - .map()

Daripada gelung klasik untuk kepada kaedah forEach(), pelbagai teknik dan kaedah digunakan untuk mengulang melalui set data dalam JavaScript. Salah satu kaedah yang paling popular ialah kaedah .map(). .map() mencipta tatasusunan daripada memanggil fungsi tertentu pada setiap item dalam tatasusunan induk. .map() ialah kaedah tidak bermutasi yang mencipta tatasusunan js baharu, berbanding dengan kaedah mutasi, yang hanya membuat perubahan pada tatasusunan panggilan.

Kaedah ini boleh mempunyai banyak kegunaan apabila bekerja dengan tatasusunan. Dalam tutorial ini, anda akan melihat empat penggunaan .map() yang patut diberi perhatian dalam JavaScript: memanggil fungsi elemen tatasusunan, menukar rentetan kepada tatasusunan, memaparkan senarai dalam perpustakaan JavaScript dan memformat semula objek tatasusunan.

Cara Memanggil Fungsi JS untuk setiap Item dalam Tatasusunan

.map() menerima fungsi panggil balik sebagai salah satu hujahnya, dan parameter penting bagi fungsi itu ialah nilai semasa item yang sedang diproses oleh fungsi. Ini ialah a parameter yang diperlukan. Dengan parameter ini, anda boleh mengubah suai setiap item dalam tatasusunan dan kembalikannya sebagai ahli tatasusunan baharu anda yang diubah suai.

Berikut ialah contoh:

const sweetArray = [2, 3, 4, 5, 35]const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2})console.log(sweeterArray)

Output ini dilog ke konsol:

Output[ 4, 6, 8, 10, 70 ]

Ini boleh dipermudahkan lagi untuk menjadikannya lebih bersih dengan:

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;
// we have an array
const sweetArray = [2, 3, 4, 5, 35];
// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

Output yang sama dilog ke console:

Output[ 4, 6, 8, 10, 70 ]

Mempunyai kod seperti sweetArray.map(makeSweeter) menjadikan kod anda lebih mudah dibaca.

Cara Menukar Rentetan JS kepada Array

.map() diketahui tergolong dalam prototaip tatasusunan. Dalam langkah ini anda akan menggunakannya untuk menukar rentetan kepada tatasusunan. awak bukan membangunkan kaedah untuk berfungsi untuk rentetan di sini. Sebaliknya, anda akan menggunakan kaedah .call() khas.

Semua dalam JavaScript ialah objek dan kaedah ialah fungsi yang dilampirkan pada objek ini. .call() membolehkan anda menggunakan konteks satu objek pada objek yang lain. Oleh itu, anda akan menyalin konteks .map() dalam tatasusunan ke rentetan.

.call() boleh dihantar argumen konteks yang akan digunakan dan parameter untuk argumen fungsi asal .

Ini adalah contoh:

const name = "Sammy"
const map = Array.prototype.map
const newName = map.call(name, eachLetter => {
    return `${eachLetter}a`})
console.log(newName)

Output ini dilog ke konsol:

Output[ "Sa", "aa", "ma", "ma", "ya" ]

Di sini, anda menggunakan konteks .map() pada rentetan dan meluluskan hujah fungsi yang .map() menjangkakan.

Ini berfungsi seperti kaedah .split() rentetan, kecuali setiap aksara rentetan individu boleh diubah suai sebelum dikembalikan dalam tatasusunan.

Cara Render Senarai dalam Pustaka JavaScript

Pustaka JavaScript seperti React gunakan .map() untuk memaparkan item dalam senarai. Ini memerlukan sintaks JSX, walau bagaimanapun, kerana kaedah .map() dibalut dengan sintaks JSX.

Berikut ialah contoh komponen React:

import React from "react";import ReactDOM from "react-dom";const names = ["whale", "squid", "turtle", "coral", "starfish"];const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
  </div>);const rootElement = document.getElementById("root");ReactDOM.render(<NamesList />, rootElement);

Ini ialah komponen tanpa kewarganegaraan dalam React, yang menjadikan div dengan senarai. Item senarai individu diberikan menggunakan .map() untuk mengulangi tatasusunan nama. Komponen ini diberikan menggunakan ReactDOM pada elemen DOM dengan Id akar.

Cara Memformat Semula Objek Tatasusunan JavaScript

.map() boleh digunakan untuk melelaran melalui objek dalam tatasusunan dan, dengan cara yang serupa dengan tatasusunan tradisional, ubah suai kandungan setiap objek individu dan kembalikan tatasusunan baharu. ini pengubahsuaian dilakukan berdasarkan apa yang dikembalikan dalam fungsi panggil balik.

Berikut ialah contoh:

const myUsers = [
    { name: 'shark', likes: 'ocean' },
    { name: 'turtle', likes: 'pond' },
    { name: 'otter', likes: 'fish biscuits' }]const usersByLikes = myUsers.map(item => {
    const container = {};

    container[item.name] = item.likes;
    container.age = item.name.length * 10;

    return container;})console.log(usersByLikes);

Output ini dilog ke konsol:

Output[
    {shark: "ocean", age: 50},
    {turtle: "pond", age: 60},
    {otter: "fish biscuits", age: 50}
]

Di sini, anda mengubah suai setiap objek dalam tatasusunan menggunakan kurungan dan titik tatatanda. Kes guna ini boleh digunakan untuk memproses atau memekatkan yang diterima data sebelum disimpan atau dihuraikan pada aplikasi bahagian hadapan.

Atas ialah kandungan terperinci Cara Menggunakan Peta JavaScript - .map(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!