web-dev-qa-db-ja.com

JavaScript配列の最後の要素を選択する

私はリアルタイムでユーザーの位置とパスを更新してGoogle Mapに表示するアプリケーションを作成しています。毎秒更新されるオブジェクトを使用して、複数のユーザーを同時に追跡できるようにする機能があります。

現在、ユーザーがAndroidアプリのボタンを押すと、座標がデータベースに送信され、場所が変わるたびに地図上でマーカーが更新されます（そしてポリラインが形成されます）。

私は複数のユーザーがいるので、各ユーザーの個別のパスを表示できるように、一意でランダムに生成された英数字の文字列を送信します。 JSがデータベースからこのデータを取得すると、ユーザーが存在するかどうかを確認し、存在しない場合は、値をリストにして新しいキーを作成します。これは次のようになります。

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)]}

私がやっているのは、ユーザーのIDであるキーの値として座標のリストを保存することです。私のプログラムは、リストに追加することによって場所が変更されるたびにこのリストを更新し続けます（これは正しく機能します）。

私がする必要があるのは位置が変わるたびにマーカーの位置を更新することです。それが最後の既知の場所になるので、私は配列の最後の項目を選択してこれを行いたいと思います。現在、場所が変更されるたびに新しいマーカーがマップに追加され（例の各ポイントにはその場所にマーカーが表示されるため）、マーカーは追加され続けます。

位置が更新されるたびにʻfor（x in loc） `ステートメントを使用してリストから最後の位置を取得し、それを使用してマーカーを更新します。ハッシュ内の配列からこの最後の要素を選択する方法

javascriptarraysgoogle-mapsgoogle-maps-markers
424
mkyong

配列の最後の要素にアクセスする方法

それはそのように見えます：

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

あなたの場合はこれは次のようになります。

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

または、長いバージョンでは、新しい変数を作成せずに、

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

それを簡単にするための方法を追加する方法

あなたがそのようなタスクを実行するための機能/ショートカットを作成するためのファンであるならば、以下のコード：

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

配列のlast()メソッドを呼び出すことで、配列の最後の要素を取得することができます。

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

あなたはそれがここで動作することを確認することができます： http://jsfiddle.net/D4NRN/

699
Tadeck

slice()メソッドを使います。

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

最後の要素を.popオフにすることもできます。 注意してください、これは配列の値を変更します 、しかしそれはあなたにとって問題ないかもしれません。

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

展開演算子でes6分解配列を使用する

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

yourArrayは変わらないことに注意してください。

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

配列が空の場合、これはundefinedを返し、配列の値は変更されません。

32
Nery Jr
var last = array.slice(-1)[0];

私は最後の要素（特に未知の長さの配列）を得るのに-1のスライスが有用であることを見つけました、そしてパフォーマンスは1より小さい長さを計算するよりはるかに優れています。

スライスの上のMozillaドキュメント

最後の配列要素を選択するためのさまざまな方法のパフォーマンス

20
amay0048

アンダースコア および Lodash には_.last(Array)メソッドがあり、これは配列の最後の要素を返します。どちらも同じように動作します

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

Ramda は_.last関数も持っています

R.last(['fi', 'fo', 'fum']); //=> 'fum'
19
svarog

アプリケーションにとって重要な場合はJavaScriptオブジェクトを使用してください。 あなたはあなたのアプリケーションの重要な部分を管理するのに生のプリミティブを使うべきではありません。これがあなたのアプリケーションの中核であるように思われるので、代わりにオブジェクトを使うべきです。私はあなたが始めるのを助けるために以下にいくつかのコードを書きました。メソッドlastLocationは最後の位置を返します。

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

Array.prototypeに getter を定義することができます。

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

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

ご覧のとおり、アクセスは関数呼び出しのようには見えません。 getter関数は内部的に呼び出されます。

8
XåpplI'-I0llwlg'I -

これはうまくいった：

array.reverse()[0]
7
Sreerag

ES6を使用している場合は、次のことができます。

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

だから、多くの人がpop（）で答えていますが、ほとんどの人はそれが破壊的な方法であることに気づいていないようです。

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

それで、本当に愚かで、非破壊的な方法のために：

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

90年代のようにプッシュポップ：）

Pushは配列の末尾に値を追加し、結果の長さを返します。そう

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

popは、そのインデックスの値を削除する前に、配列の最後の項目の値を返します。そう

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

配列のインデックスは0なので、c.length => 3、c [c.length] =>未定義です（これを行う場合は4番目の値を探しているためです（このレベルの深さは、ここで終わる不器用な文章用です） ））。

おそらくあなたのアプリケーションにとっては最善ではない、あるいは良い方法でさえありません。しかし、配列をトラバースして別の配列にストリーミングするためには、非効率的な方法でしか馬鹿げていません。完全にこれ。

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