source

개체 배열에서 메서드 색인화하시겠습니까?

factcode 2022. 9. 29. 00:09
반응형

개체 배열에서 메서드 색인화하시겠습니까?

개체를 포함하는 배열의 인덱스를 가져오는 가장 좋은 방법은 무엇입니까?

다음과 같은 시나리오를 상정합니다.

var hello = {
    hello: 'world',
    foo: 'bar'
};
var qaz = {
    hello: 'stevie',
    foo: 'baz'
}

var myArray = [];
myArray.push(hello,qaz);

저는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★indexOfhello은 「」입니다.'stevie'이 예에서는 다음과 같이 됩니다.1.

JavaScript는 초보라서 간단한 방법이 있는지, 아니면 직접 기능을 만들어야 하는지 모르겠습니다.

지도 기능을 사용하면 한 줄로 해결할 수 있다고 생각합니다.

const pos = myArray.map(e => e.hello).indexOf('stevie');

Array.protype.findIndex는 IE(비엣지) 이외의 모든 브라우저에서 지원됩니다.하지만 제공된 폴리필은 좋습니다.

var indexOfStevie = myArray.findIndex(i => i.hello === "stevie");

지도와 함께 해결하면 됩니다.그러나 검색마다 어레이 전체에 걸쳐 반복됩니다.이는 일치하는 것을 발견하면 반복을 중지하는 findIndex의 경우 최악의 경우일 뿐입니다.


사실 간결한 방법은 없어요 (개발자가 IE8에 대해 고민해야 할 때), but here's a common solution:

var searchTerm = "stevie",
    index = -1;
for(var i = 0, len = myArray.length; i < len; i++) {
    if (myArray[i].hello === searchTerm) {
        index = i;
        break;
    }
}

또는 함수로서:

function arrayObjectIndexOf(myArray, searchTerm, property) {
    for(var i = 0, len = myArray.length; i < len; i++) {
        if (myArray[i][property] === searchTerm) return i;
    }
    return -1;
}
arrayObjectIndexOf(arr, "stevie", "hello"); // 1

참고 사항:

  1. 어레이의 루프에서...에 사용하지 마십시오.
  2. "니들"을 찾은 후에는 반드시 루프에서 벗어나거나 기능에서 복귀하십시오.
  3. 오브젝트 균등성에 주의한다.

예를들면,

var a = {obj: 0};
var b = [a];
b.indexOf({obj: 0}); // -1 not found

ES2015에서는, 이것은 매우 간단합니다.

myArray.map(x => x.hello).indexOf('stevie')

또는 대규모 어레이에서는 퍼포먼스가 향상될 수 있습니다.

myArray.findIndex(x => x.hello === 'stevie')
var idx = myArray.reduce( function( cur, val, index ){

    if( val.hello === "stevie" && cur === -1 ) {
        return index;
    }
    return cur;

}, -1 );

Pablo의 답변은 마음에 들지만 Array #index Of 및 Array #map이 모든 브라우저에서 동작하는 것은 아닙니다.언더스코어는 네이티브 코드를 사용할 수 있지만 폴백도 있습니다.게다가 이건 파블로의 익명의 지도 제작법과 똑같이 할 수 있는 배짱이 있어

var idx = _.chain(myArray).pluck("hello").indexOf("Stevie").value();

: ★★★★★★★★★★★★★★★★★★★★★★:

Array.prototype.indexOfObject = function arrayObjectIndexOf(property, value) {
    for (var i = 0, len = this.length; i < len; i++) {
        if (this[i][property] === value) return i;
    }
    return -1;
}

myArr.indexOfObject("name", "stevie");

반면, 여기 있는 대부분의 다른 답변은 유효합니다.사용하는 장소 근처에 간단한 기능을 만들어 두는 것이 좋을 수도 있습니다.

// indexOf wrapper for the list of objects
function indexOfbyKey(obj_list, key, value) {
    for (index in obj_list) {
        if (obj_list[index][key] === value) return index;
    }
    return -1;
}
// Find the string in the list (default -1)
var test1 = indexOfbyKey(object_list, 'name', 'Stevie');
var test2 = indexOfbyKey(object_list, 'last_name', 'some other name');

당신에게 무엇이 중요한지에 달려있다.코드 행을 절약하고 원라이너를 사용하거나 다양한 엣지 케이스를 커버하는 범용 솔루션을 사용하는 것이 매우 현명할 수 있습니다.그러나 때로는 미래의 개발자들에게 추가적인 리버스 엔지니어링 작업을 맡기는 것보다 "여기서는 이렇게 했다"고 말하는 것이 더 나을 수 있습니다.특히 당신이 질문에서처럼 자신을 "초보자"라고 생각한다면.

짧은.

myArray.indexOf('stevie','hello')

사용 사례:

  /*****NORMAL****/  
[2,4,5].indexOf(4) ;//OUTPUT 1
 /****COMPLEX*****/
 [{slm:2},{slm:4},{slm:5}].indexOf(4,'slm');//OUTPUT 1
 //OR
 [{slm:2},{slm:4},{slm:5}].indexOf(4,function(e,i){
   return e.slm;
});//OUTPUT 1
/***MORE Complex**/
[{slm:{salat:2}},{slm:{salat:4}},{slm:{salat:5}}].indexOf(4,function(e,i){
   return e.slm.salat;
});//OUTPUT 1

API:

    Array.prototype.indexOfOld=Array.prototype.indexOf

    Array.prototype.indexOf=function(e,fn){
      if(!fn){return this.indexOfOld(e)}
      else{ 
       if(typeof fn ==='string'){var att=fn;fn=function(e){return e[att];}}
        return this.map(fn).indexOfOld(e);
      }
    };

몇 가지 방법을 비교해 본 결과, 이 문제를 가장 빨리 해결할 수 있는 방법이 나왔습니다.for다섯 개로 하다

테스트 페이지는 다음과 같습니다.https://jsbench.me/9hjewv6a98

개체가 배열 내에서 사용하는 개체와 동일한 개체일 경우 문자열과 같은 방법으로 개체의 인덱스를 가져올 수 있습니다.

var hello = {
    hello: 'world',
    foo: 'bar'
};
var qaz = {
    hello: 'stevie',
    foo: 'baz'
}

var qazCLONE = { // new object instance and same structure
    hello: 'stevie',
    foo: 'baz'
}

var myArray = [hello,qaz];

myArray.indexOf(qaz) // should return 1
myArray.indexOf(qazCLONE) // should return -1

여기에서는 다양한 답변의 퍼포먼스 테스트를 실시했습니다.누구나 직접 실행할 수 있습니다.

https://jsperf.com/find-index-of-object-in-array-by-contents

Chrome에서의 초기 테스트에 따르면 다음 방법(시제품 내부에 설정된 for loop 사용)이 가장 빠릅니다.

Array.prototype.indexOfObject = function (property, value) {
    for (var i = 0, len = this.length; i < len; i++) {
        if (this[i][property] === value) return i;
    }
    return -1;
}

myArray.indexOfObject("hello", "stevie");

이 코드는 네이선 재타의 답변을 약간 변형한 것입니다.

퍼포먼스 벤치마크에서는 타겟이 1000개 오브젝트 어레이의 중간(인덱스 500)과 최단(인덱스 999)에 있는 것을 모두 사용해 보았습니다.또, 타겟을 어레이의 마지막 항목(즉, 검출되기 전에 어레이내의 모든 항목을 루프 할 필요가 있습니다)에 넣어도, 가장 빨리 종료합니다.

이 솔루션은 마지막 줄만 반복하면 되므로 반복 실행이 가장 간단하다는 이점도 있습니다.

myArray.indexOfObject("hello", "stevie");

findIndex() 메서드를 사용할 수 있습니다.

cosnt myIndex=myArray.findIndex(el=>el.hello==='stevie')

myIndex <0 이면 존재하지 않습니다.

array.filter(function(item, indx, arr){ return(item.hello === 'stevie'); })[0];

사항에 주의:[0].

하는 이 적절하다reduce Antonio Laguna의 답변입니다.

간결해서 죄송합니다...

이것을 시험해 보세요.

console.log(Object.keys({foo:"_0_", bar:"_1_"}).indexOf("bar"));

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

심플:

myArray.indexOf(myArray.filter(function(item) {
    return item.hello == "stevie"
})[0])

기능을 할 수 있고 을 사용할 수 .Array.prototype.findIndex()츠키다

findIndex() 메서드는 배열 내의 요소가 지정된 테스트 함수를 만족하는 경우 배열 내의 인덱스를 반환합니다.그렇지 않으면 -1이 반환됩니다.

참고로 Internet Explorer, Opera 및 Safari에서는 지원되지 않지만 다음 링크에서 제공되는 Polyfill을 사용할 수 있습니다.

상세 정보:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

var hello = {
  hello: 'world',
  foo: 'bar'
};
var qaz = {
  hello: 'stevie',
  foo: 'baz'
}

var myArray = [];
myArray.push(hello, qaz);

var index = myArray.findIndex(function(element, index, array) {
  if (element.hello === 'stevie') {
    return true;
  }
});
alert('stevie is at index: ' + index);

포지션만 찾고 싶다면 @Pablo의 답변을 참고하세요.

pos = myArray.map(function(e) { return e.hello; }).indexOf('stevie');

, 요소를 찾는 것을 기대하고 있는 경우(즉, 이와 같은 것을 생각하고 있는 경우)myArray[pos])를 사용하여 보다 효율적인 한 줄의 방법을 제공합니다.filter.

element = myArray.filter((e) => e.hello === 'stevie')[0];

퍼포먼스 결과 참조(초당 +42% ops) :http://jsbench.github.io/ #7fa01f89a5dc5cc3bee79abfde80cdb3

다음의 예를 참조해 주세요.http://jsfiddle.net/89C54/

for (i = 0; i < myArray.length; i++) {
    if (myArray[i].hello === 'stevie') {
        alert('position: ' + i);
        return;
    }
}

0부터 세기 시작합니다.

아래가 코드인지 확인하고 모든 오브젝트에 대해 동작하는지 확인하는 범용 기능을 만들었습니다.

function indexOfExt(list, item) {
    var len = list.length;

    for (var i = 0; i < len; i++) {
        var keys = Object.keys(list[i]);
        var flg = true;
        for (var j = 0; j < keys.length; j++) {
            var value = list[i][keys[j]];
            if (item[keys[j]] !== value) {
                flg = false;
            }
        }
        if (flg == true) {
            return i;
        }
    }
    return -1;
}

var items = [{ "hello": 'world', "foo": 'bar' }];
var selectedItem = { "hello": 'world', "foo": 'bar' };
alert(items.indexOf(selectedItem));
alert(indexOfExt(items, selectedItem));

첫 번째 경고는 -1을 반환하고(평균 일치를 찾을 수 없음), 두 번째 경고는 0을 반환합니다(평균 일치를 찾을 수 없음).

사용하다_.findIndex언더스코어.베이스 라이브러리에서

여기 예가 있습니다._.findIndex([{a:1},{a: 2,c:10},{a: 3}], {a:2,c:10}) //1

ES6 방법을 사용하면 lodash 또는 기타 라이브러리를 사용하지 않고 다음을 작성할 수 있습니다.

function deepIndexOf(arr, obj) {
  return arr.findIndex(function (cur) {
    return Object.keys(obj).every(function (key) {
      return obj[key] === cur[key];
    });
  });
}

이렇게 하면 개체의 즉시 속성이 비교되지만 속성에 다시 나타나지 않습니다.

구현에 따라서는findIndex그러나 (대부분 그렇지 않음) 이 검색을 지원하는 가벼운 폴리필을 추가할 수 있습니다.

function deepIndexOf(arr, obj) {
  function findIndex = Array.prototype.findIndex || function (pred) {
    for (let i = 0; i < this.length; ++i) {
      if (pred.call(this, this[i], i)) {
        return i;
      }
    }

    return -1;
  }

  return findIndex.call(arr, function (cur) {
    return Object.keys(obj).every(function (key) {
      return obj[key] === cur[key];
    });
  });
}

(이 중복에 대한 내 답변에서)

@Monika Garg의 답변에 대해서는 (지원되지 않는 브라우저에는 폴리필이 있습니다)를 사용할 수 있습니다.

저는 사람들이 이 대답을 낮게 평가한 것을 보았습니다. 저는 그들이 잘못된 구문 때문에 그렇게 했기를 바랍니다. 제 생각에는 이것이 가장 우아한 방법이기 때문입니다.

findIndex() 메서드는 배열 내의 요소가 지정된 테스트 함수를 만족하는 경우 배열 내의 인덱스를 반환합니다.그렇지 않으면 -1이 반환됩니다.

예를 들어 다음과 같습니다.

var hello = {
  hello: 'world',
  foo: 'bar'
};
var qaz = {
  hello: 'stevie',
  foo: 'baz'
}

var myArray = [];
myArray.push(hello,qaz);

var index = myArray.findIndex(function(element) {
  return element.hello == 'stevie';
});

alert(index);

배열에서 개체의 인덱스를 찾는 방법입니다.

    var myArray = [{  hello: 'world',
        foo: 'bar'
    },{
        hello: 'stevie',
        foo: 'baz'
    }];



    for (i = 0; i < myArray.length; i++) {
        if (myArray[i].hello === 'stevie') {
            alert('position: ' + i);
            return;
        }
    }

이것은 커스텀 코드 없이 동작합니다.

var arr, a, found;
arr = [{x: 1, y: 2}];
a = {x: 1, y: 2};
found = JSON.stringify(arr).indexOf(JSON.stringify(a)) > - 1;
// found === true

참고: 이것은 실제 인덱스를 제공하는 것이 아니라 현재 데이터 구조에 개체가 존재하는지 여부만 알려줍니다.

간단하게 사용할 수 있습니다.

const someId = 2;
const array = [{id:1}, {id:2}, {id:3}];
const index = array.reduce((i, item, index) => item.id === someId ? index : i, -1);
alert('someId ' + someId + ' is at index ' + index);

밑줄도 없고, 가격만 줄이면 됩니다.

var hello = {hello: "world",  foo: "bar"};
var qaz = {hello: "stevie", foo: "baz"};
var myArray = [];
myArray.push(hello,qaz);

function indexOfObject( arr, key, value   ) {
    var j = -1;
    var result = arr.some(function(obj, i) { 
        j++;
        return obj[key] == value;
    })

    if (!result) {
        return -1;
    } else {
        return j;
    };
}

alert(indexOfObject(myArray,"hello","world"));

대부분의 응답 응답으로 모든 사례가 해결되는 것은 아닙니다.저는 이 솔루션이 더 낫다고 생각했습니다.

const isInarray = myArr.filter((obj) => obj.hello === 'stevie' && obj.foo === 'baz').length > 0;
if (!isInArray) {
 ....
}

자체 프로토타입을 생성하여 다음과 같은 작업을 수행할 수 있습니다.

예를 들어 다음과 같습니다.

Array.prototype.indexOfObject = function (object) {
    for (var i = 0; i < this.length; i++) {
        if (JSON.stringify(this[i]) === JSON.stringify(object))
            return i;
    }
}

사용하는 것을 선호합니다.findIndex()방법:

 var index = myArray.findIndex('hello','stevie');

index인덱스 번호가 표시됩니다.

언급URL : https://stackoverflow.com/questions/8668174/indexof-method-in-an-object-array

반응형