Javascript Map Array Letztes Element

Lesezeit: 4 Minuten

Benutzer-Avatar
cocacrave

Ich habe das:

map = ranks.map((row, r) => (
  row.map((rank, i) => {
    return [element(r, i, state, rank, toggled, onClick)];
  })
));

Es bildet durch ein zweidimensionales Array ab. Nach jeder Zeile möchte ich einfügen <div class="clearfix"></div>.

Ich denke, wenn ich irgendwie den letzten Index für jede Zeile bekommen könnte, könnte ich ihn im Zeilenzuordnungs-Callback verwenden. Kann mir jemand zeigen, wie man das macht?

Benutzer-Avatar
LeoYuan 袁力皓

Versuchen Sie etwas wie:

row.map((rank, i, row) => {
  if (i + 1 === row.length) {
    // Last one.
  } else {
    // Not last one.
  }
})

Alte Antwort:

const rowLen = row.length;
row.map((rank, i) => {
  if (rowLen === i + 1) {
    // last one
  } else {
    // not last one
  }
})

Benutzer-Avatar
Slawischer Schmelzer

Wie LeoYuan antwortete, ist dies die richtige Antwort, aber sie kann etwas verbessert werden.
map akzeptiert eine Funktion mit einem dritten Parameter, der das iterierte Array selbst ist.

row.map((rank, i, arr) => {
    if (arr.length - 1 === i) {
        // last one
    } else {
        // not last one
    }
});

oder in einer etwas kürzeren Version mit einer Objektdestrukturierung (danke Jose aus den Kommentaren):

row.map((rank, i, {length}) => {
    if (length - 1 === i) {
        // last one
    } else {
        // not last one
    }
});

Mit einem arr.length Anstatt von row.length ist aus mehreren Gründen ein besserer und richtiger Ansatz:

  1. Wenn Sie Bereiche mischen, kann dies zu unerwarteten Fehlern führen, insbesondere in einem schlecht geschriebenen oder schlecht gestalteten Code. Im Allgemeinen ist es immer eine gute Möglichkeit, das Mischen zwischen Bereichen möglichst zu vermeiden.

  2. Wenn Sie ein explizites Array bereitstellen möchten, funktioniert dies ebenfalls. Z.B

    [1,2,3,4].map((rank, i, arr) => {
        if (arr.length - 1 === i) {
            // last one
        } else {
            // not last one
        }
    });
    
  3. Wenn Sie den Rückruf außerhalb der verschieben möchten map Anwendungsbereich (hauptsächlich für eine bessere Leistung), wird es falsch verwendet werden row.length da es außerhalb des Geltungsbereichs liegt. zB im OP-Fall:

    const mapElement = (rowIndex, state, toggled, onClick) => {
        return (rank, i, arr) => {
            let lastIndex = arr.length - 1;
            return [element(rowIndex, i, state, rank, toggled, onClick, lastIndex)];
        };
    };
    
    map = ranks.map((row, r) => row.map(mapElement(r, state, toggled, onClick)));
    

  • Warum fügst du hinzu arr statt zu verwenden row.length?

    – Sanderfisch

    8. November 2017 um 15:57 Uhr

  • @Sanderfish Drei Gründe: 1. Im Allgemeinen mag ich es nicht, Bereiche zu mischen, auf diese Weise wird die Lösung sauberer, insbesondere wenn dieser Code Teil einer großen Anwendung ist. 2. Diese Lösung funktioniert auch für explizit definierte Arrays, zB [1,2,3].map((rank, i, arr) => { ... }); 3. Wenn Sie sich aus irgendeinem Grund (z. B. in einer Schleife) entscheiden, den Callback aus dem Gültigkeitsbereich zu verschieben, tun row.length wird einfach nicht funktionieren. Ich werde meine Antwort aktualisieren, um es klar zu machen.

    – Slawischer Schmelzer

    19. November 2017 um 21:14 Uhr

  • Sie können auch tun .map((rank, i, { length }) => { ... })

    – José Hermosilla Rodrigo

    19. November 2017 um 21:51 Uhr

  • Stimmen Sie zu, dass Ihr Ansatz besser ist

    – Schwarze Mamba

    9. Januar 2018 um 13:04 Uhr

  • Korrigieren Sie mich, wenn ich falsch liege, aber es scheint, dass dies auch ein besserer Ansatz für React JSX ist, da Sie eine Variable nicht einfach inline deklarieren können?

    – Alesh Houdek

    8. Februar 2019 um 10:09 Uhr

Benutzer-Avatar
Nasser Ali Karimi

Weniger Codezeilen mit den gleichen Ergebnissen

row.map((rank, i, {length}) => (

  //last element
  if(i + 1 === length){ 

  }
));

  • Das ist die beste Lösung da draußen!

    – KJ Sudarshan

    6. Oktober 2021 um 11:08 Uhr

  • Dies funktioniert gut, wenn Sie bereits Rohrleitungen verwenden, die die Größe ändern können.

    – durchInduktion

    10. März um 7:05 Uhr


Eine leichte Verbesserung gegenüber der akzeptierten Antwort:

const lastIndex = row.length - 1;
row.map((rank, i) => {
  if (i === lastIndex) {
    // last one
  } else {
    // not last one
  }
})

Dadurch wird die Arithmetik aus der Schleife entfernt.

Benutzer-Avatar
Sylur

vereinfachen Antwort oben

const array = ['apple','orange','banana'];

array.map((element, index) => (index === array.length - 1) ? \`${element}.\` : \`${element},\`);

Benutzer-Avatar
Nimantha

Eine kürzere Methode wäre die Verwendung von .map in Kombination mit einem ternären Operator wie dieser.

const positions = ["first", "second", "third", "fourth"]

positions.map((x, index, array) => {
    index === array.length -1 
        ? console.log("this is the last item in the array")
         : console.log( x)
}

//////////// Erläuterung

x ### gibt das aktuelle Element zurück, das .map durchläuft

index ### gibt den Index (Position des Elements in einem Array) des aktuellen Elements zurück.

array ### gibt dasselbe Element zurück, durch das wir eine Schleife durchlaufen, also wenn wir sth so verwenden

 ["first", "second", "third", "fourth"].map...

Wir erhalten immer noch das Array, das wir durchlaufen

array.length – 1 ### gibt uns die Länge des Arrays und – 1 gibt uns den Index des letzten Elements im Array.

Sie können den letzten Index mit der Länge Ihres Arrays überprüfen. Hier ist eine Logik

var randomnumber = Math.floor(Math.random() * (100 - 10 + 1)) + 10

console.log("your last index is dynamic, ehich is ",randomnumber-1);
let arry = [];
for (i=1;i<randomnumber;i++){
    arry.push(i)
}

    arry.map((data,index)=>{
          if(index == arry.length-1 ){
            console.log("last index data  ",data)
          }
          else{
          console.log("remain data ",data)
          
          }

    })

    console.log("your last index is dynamic, which is ",randomnumber-1);

Das funktioniert auch bei dynamischen Arry-Wechseln.. Es ist eine zu einfache Technik, die ich verwende.. 🙂

  • Ich fand, dass dies eine optimale Lösung ist. danke, Kumpel.

    – Code7004

    1. Mai 2019 um 11:58 Uhr

1186250cookie-checkJavascript Map Array Letztes Element

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy