Programing

JavaScript 배열에서 마지막 요소 선택하기

lottogame 2020. 2. 14. 22:27
반응형

JavaScript 배열에서 마지막 요소 선택하기


이 질문에는 이미 답변이 있습니다.

사용자의 위치와 경로를 실시간으로 업데이트하여 Google지도에 표시하는 응용 프로그램을 만들고 있습니다. 매 초마다 업데이트되는 객체를 사용하여 여러 사용자를 동시에 추적 할 수있는 기능이 있습니다.

현재 사용자가 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)`문을 사용하고 마커를 업데이트하는 데 사용합니다. 해시 내의 배열 에서이 마지막 요소를 어떻게 선택합니까?


배열의 마지막 요소에 액세스하는 방법

그것은 다음과 같습니다

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/에서 작동하는지 확인할 수 있습니다.


slice()방법을 사용하십시오 :

my_array.slice(-1)[0]

.pop마지막 요소를 해제 할 수도 있습니다 . 주의하면 배열 값이 변경 되지만 괜찮을 수도 있습니다.

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

스프레드 연산자와 함께 es6 해체 배열 사용

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

yourArray는 변경되지 않습니다.


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

배열이 비어 있으면 정의되지 않은 값을 반환하고 배열 값을 변경하지 않습니다.


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

마지막 요소 (특히 알 수없는 길이의 배열)를 얻는 데 유용한 -1의 슬라이스를 발견하고 길이를 1보다 작게 계산하는 것보다 성능이 훨씬 좋습니다.

슬라이스에 대한 Mozilla 문서

마지막 배열 요소를 선택하기위한 다양한 방법의 성능


UnderscoreLodash 에는 _.last(Array)Array의 마지막 요소를 반환 하는 메서드 가 있습니다 . 그들은 둘 다 동일하게 작동합니다.

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

람다 는 또한 _.last기능이 있습니다

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

응용 프로그램에 중요한 경우 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);

다음에 getter정의 할 수 있습니다 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

보다시피 액세스는 함수 호출처럼 보이지 않습니다. getter 함수는 내부적으로 호출됩니다.


이것은 효과가 있었다 :

array.reverse()[0]

ES6를 사용하는 경우 다음을 수행 할 수 있습니다.

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

따라서 많은 사람들이 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] => undefined (당신이 그렇게하면 4 번째 값을 찾고 있기 때문에 (이 깊이 수준은 여기에서 끝나는 불쾌한 새로운 것에 대한 것입니다) )).

아마도 트래픽에 대한 최선의 방법이나 좋은 방법은 아닙니다. 그러나 배열을 탐색하고 다른 배열로 스트리밍하는 것은 비효율적 인 방법으로 어리석은 일입니다. 이건 완전히


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

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

참고 URL : https://stackoverflow.com/questions/9050345/selecting-last-element-in-javascript-array



반응형