web-dev-qa-db-fra.com

Sélection du dernier élément du tableau JavaScript

Je crée une application qui met à jour l'emplacement et le chemin d'un utilisateur en temps réel et l'affiche sur une carte Google. J'ai des fonctionnalités qui permettent à plusieurs utilisateurs d'être suivis en même temps à l'aide d'un objet mis à jour toutes les secondes.

À l'heure actuelle, lorsqu'un utilisateur appuie sur un bouton de l'application Android, les coordonnées sont envoyées à une base de données et chaque fois que l'emplacement change, un marqueur est mis à jour sur la carte (et une polyligne est formée).

Étant donné que j'ai plusieurs utilisateurs, j'envoie une chaîne alphanumérique unique et générée aléatoirement afin de pouvoir afficher un chemin individuel pour chaque utilisateur. Lorsque le JS extrait ces données de la base de données, il vérifie si l'utilisateur existe. Dans le cas contraire, il crée une nouvelle clé dont la valeur est une liste. Cela ressemblerait à ceci:

loc = {f096012e-2497-485d-8adb-7ec0b9352c52: [new google.maps.LatLng(39, -86),
                                              new google.maps.LatLng(38, -87),
                                              new google.maps.LatLng(37, -88)],
       44ed0662-1a9e-4c0e-9920-106258dcc3e7: [new google.maps.LatLng(40, -83),
                                              new google.maps.LatLng(41, -82),
                                              new google.maps.LatLng(42, -81)]}

Ce que je fais est de stocker une liste de coordonnées en tant que valeur de la clé, qui est l'identifiant de l'utilisateur. Mon programme continue à mettre à jour cette liste chaque fois que l'emplacement est modifié en l'ajoutant à la liste (cela fonctionne correctement).

Ce que je dois faire, c'est mettre à jour l'emplacement du marqueur à chaque changement d'emplacement. Je voudrais faire ceci en sélectionnant le dernier élément du tableau car ce serait le dernier emplacement connu. À l'heure actuelle, chaque fois que l'emplacement est modifié, un nouveau marqueur est ajouté à la carte (chacun des points de l'exemple affichera un marqueur à cet emplacement) afin que les marqueurs continuent à être ajoutés.

J'utiliserais une instruction ´for (x in loc) `chaque fois que l'emplacement est mis à jour pour saisir le dernier emplacement de la liste et l'utiliser pour mettre à jour le marqueur. Comment sélectionner ce dernier élément du tableau dans le hachage?

javascriptarraysgoogle-mapsgoogle-maps-markers
461
mkyong

Comment accéder au dernier élément d'un tableau

Ça ressemble à ça:

var my_array = /* some array here */;
var last_element = my_array[my_array.length - 1];

Ce qui dans votre cas ressemble à ceci:

var array1 = loc['f096012e-2497-485d-8adb-7ec0b9352c52'];
var last_element = array1[array1.length - 1];

ou, dans une version plus longue, sans créer de nouvelles variables:

loc['f096012e-2497-485d-8adb-7ec0b9352c52'][loc['f096012e-2497-485d-8adb-7ec0b9352c52'].length - 1];

Comment ajouter une méthode pour la simplifier

Si vous êtes fan de la création de fonctions/raccourcis pour accomplir de telles tâches, le code suivant:

if (!Array.prototype.last){
    Array.prototype.last = function(){
        return this[this.length - 1];
    };
};

vous permettra d'obtenir le dernier élément d'un tableau en appelant la méthode last() du tableau, dans votre cas, par exemple:

loc['f096012e-2497-485d-8adb-7ec0b9352c52'].last();

Vous pouvez vérifier que cela fonctionne ici: http://jsfiddle.net/D4NRN/

747
Tadeck

Utilisez la méthode slice():

my_array.slice(-1)[0]
396
Datageek

Vous pouvez également .pop désactiver le dernier élément. Attention, cela changera la valeur du tablea, mais cela pourrait vous convenir.

var a = [1,2,3];
a.pop(); // 3
a // [1,2]
111
Josh

utiliser es6 deconstruction array avec l'opérateur spread

var last = [...yourArray].pop();

notez que votre tableau ne change pas.

39
hamecoded
var arr = [1, 2, 3];
arr.slice(-1).pop(); // return 3 and arr = [1, 2, 3]

Cela retournera undefined si le tableau est vide et cela ne changera pas la valeur du tableau.

32
Nery Jr

nderscore et Lodash ont la méthode _.last(Array), qui renvoie le dernier élément d'un tableau. Ils travaillent tous les deux à peu près le même

_.last([5, 4, 3, 2, 1]);
=> 1

Ramda a aussi une fonction _.last

R.last(['fi', 'fo', 'fum']); //=> 'fum'
22
svarog
var last = array.slice(-1)[0];

Je trouve slice à -1 utile pour obtenir le dernier élément (en particulier d’un tableau de longueur inconnue) et la performance est bien meilleure que le calcul d’une longueur inférieure à 1.

Mozilla Docs on Slice

Performances des différentes méthodes de sélection du dernier élément du tablea

22
amay0048

Vous pouvez définir un getter sur Array.prototype:

if (!Array.prototype.hasOwnProperty("last")) {
  Object.defineProperty(Array.prototype, "last", {
    get() {
      return this[this.length - 1];
    }
  });
}

console.log([9, 8, 7, 6].last); // => 6

Comme vous pouvez le constater, l'accès ne ressemble pas à un appel de fonction. la fonction getter est appelée en interne.

12
XåpplI'-I0llwlg'I -

tilisez des objets JavaScript si cela est essentiel pour votre application. Vous ne devriez pas utiliser de primitives brutes pour gérer les parties critiques de votre application. Comme cela semble être le cœur de votre application, vous devriez plutôt utiliser des objets. J'ai écrit du code ci-dessous pour vous aider à démarrer. La méthode lastLocation renverrait le dernier emplacement.

function User(id) {
    this.id = id;

    this.locations = [];

    this.getId = function() {
        return this.id;
    };

    this.addLocation = function(latitude, longitude) {
        this.locations[this.locations.length] = new google.maps.LatLng(latitude, longitude);
    };

    this.lastLocation = function() {
        return this.locations[this.locations.length - 1];
    };

    this.removeLastLocation = function() {
        return this.locations.pop();
    };

}

function Users() {
    this.users = {};

    this.generateId = function() {
        return Math.random();
    };

    this.createUser = function() {
        var id = this.generateId();
        this.users[id] = new User(id);
        return this.users[id];
    };

    this.getUser = function(id) {
        return this.users[id];
    };

    this.removeUser = function(id) {
        var user = this.getUser(id);
        delete this.users[id];

        return user;
    };

}


var users = new Users();

var user = users.createUser();

user.addLocation(0, 0);
user.addLocation(0, 1);
12
Levi Morrison

Cela a fonctionné:

array.reverse()[0]
9
Sreerag

Si vous utilisez ES6, vous pouvez effectuer les tâches suivantes:

const arr = [ 1, 2, 3 ];
[ ...arr ].pop(); // 3
arr; // [ 1, 2, 3 ] (wasn't changed)
8
Mykhailo Zhuk

Donc, beaucoup de gens répondent avec pop (), mais la plupart d'entre eux ne semblent pas se rendre compte que c'est une méthode destructive.

var a = [1,2,3]
a.pop()
//3
//a is now [1,2]

Donc, pour une méthode vraiment stupide et non destructive:

var a = [1,2,3]
a[a.Push(a.pop())-1]
//3

un push pop, comme dans les années 90 :)

Push ajoute une valeur à la fin d'un tableau et renvoie la longueur du résultat. alors

d=[]
d.Push('life') 
//=> 1
d 
//=>['life']

pop renvoie la valeur du dernier élément d'un tableau, avant qu'il ne supprime cette valeur à cet index. alors

c = [1,2,1]
c.pop() 
//=> 1
c 
//=> [1,2]

les tableaux sont 0 indexés, donc c.length => 3, c [c.length] => undefined (parce que vous cherchez la 4ème valeur si vous faites cela (ce niveau de profondeur est pour tout infâme newbs qui finit ici )).

Probablement pas la meilleure méthode, ni même une bonne méthode pour votre application, que ce soit avec le trafic, le désabonnement, le blah. mais pour parcourir un tableau, le diffuser sur un autre, juste pour être idiot avec des méthodes inefficaces, ceci. Totalement ça.

6
Ryan Wood
var last = function( obj, key ) { 
    var a = obj[key];
    return a[a.length - 1];
};

last(loc, 'f096012e-2497-485d-8adb-7ec0b9352c52');
4
zellio