정보실

웹학교

정보실

javascript JavaScript에서 배열을 검색하는 4 가지 방법

본문

JavaScript에는 배열에서 항목을 찾는 유용한 방법이 많이 있습니다. 

항상 기본 for 루프에 의존 할 수 있지만 ES6 +에는 배열을 반복하고 필요한 것을 쉽게 찾을 수 있는 방법이 많이 있습니다.


https://alligator.io/js/array-search-methods 


다양한 방법으로 어떤 방법을 사용합니까? 예를 들어 배열을 검색 할 때 요소가 배열에 있는지 알고 싶습니까? 요소 또는 요소 자체의 색인이 필요합니까?


우리가 다룰 각각의 다른 방법으로, 그것들이 모두 Array.prototype에 내장 된 방법이라는 것을 이해하는 것이 중요합니다. 즉, 점 표기법이 있는 배열에 연결하면 됩니다. 

즉, 이러한 메소드는 객체 또는 배열 이외의 다른 객체에서는 사용할 수 없습니다 (문자열과 겹치지 만).


다음과 같은 배열 방법을 살펴 보겠습니다.


Array.includes 


const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"]; alligator.includes("thick scales"); // returns true 


.includes() 메서드는 부울 값을 반환하며 요소가 배열에 있는지 여부를 알려주는 데 적합합니다. 

간단한 참 또는 거짓 대답을 제공합니다. 이것은 기본 구문입니다.


arr.includes(valueToFind, [fromIndex]); 


이 예에서 볼 수 있듯이 valueToFind라는 하나의 매개 변수만 있었습니다. 

배열에서 일치 시킬 값입니다. 

선택적인 fromIndex는 숫자로, 어떤 인덱스를 보려고 하는지 나타냅니다 (기본값은 0이므로 전체 배열이 검색 됨). 

따라서 이 예에서 '두꺼운 저울'항목은 0 인덱스이므로 다음과 같은 경우는 잘못된 것입니다. 

alligator.includes ( 'thick scales, 1); 인덱스 1부터 검색을 시작하기 때문입니다.


이제 주목해야 할 몇 가지 중요한 사항이 있습니다. 

이 .includes() 메소드는 엄격한 비교를 사용합니다. 

즉, 위의 예에서 다음은 false를 반환합니다. 

alligator.includes('80 '); 80 == '80'은 true이지만 80 === '80'은 false이기 때문에 다른 유형은 엄격한 비교를 통과하지 못합니다.


Array.find 


.find()는 contains() 메소드와 어떻게 다릅니까? 

이 예에서 "includes"텍스트 만 "find"로 변경 한 경우 이 오류가 발생합니다.


Uncaught TypeError: thick scales is not a function 


find 메소드에는 함수를 전달해야 하기 때문입니다. 

find 메소드는 단순히 "includes()"와 같은 간단한 비교 연산자를 사용하지 않기 때문입니다. 

대신 각 요소를 함수에 전달하고 true 또는 false를 반환하는지 확인합니다. 

따라서 이것이 작동하지만 alligator.find(() => 'thick scales') ;; 당신은 아마도 관련된 것을 반환하기 위해 자신의 비교 연산자를 함수에 넣기를 원할 것입니다.


const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"]; alligator.find(el => el.length < 12); // returns '4 foot tail' 


find 메소드에서 이 간단한 함수는 우리가 할당 한 'el'이라는 별칭으로 배열의 각 요소를 보고, 첫 번째 요소를 찾으면 멈 춥니 다. 

우리의 경우 true는 길이 속성이 12보다 작습니다 (숫자는 길이 속성이 없음). 

물론 이 기능을 필요에 따라 복잡하게 만들 수 있으므로 실제 조건이 요구 사항을 충족시킬 수 있습니다.


이것도 사실이 아닙니다. find 메소드는 부울을 리턴하지 않고 대신 첫 번째 일치하는 요소를 리턴합니다. 

함수에 정의 된 기준을 충족하는 요소가 없는 것처럼 일치하는 요소가 없으면 정의되지 않은 상태로 반환 됩니다. 

또한 첫 번째 요소를 반환하므로 배열에 조건을 충족하는 요소가 둘 이상 있으면 첫 번째 인스턴스만 가져옵니다. 

예를 들어, 키가 4 피트 이후에 길이가 12 줄 미만인 다른 문자열이 있으면 결과가 변경되지 않습니다.


이 예에서는 하나의 매개 변수로만 콜백을 사용했습니다. 

현재 요소의 색인을 참조하기 위해 매개 변수를 추가 할 수도 있습니다. 

다른 매개 변수는 전체 배열 자체가 될 수 있지만 거의 사용되지 않습니다. 

다음은 색인을 사용하는 예입니다.


alligator.find((el, idx) => typeof el === "string" && idx === 2); // returns '4 foot tall' 


우리는 배열에서 첫 번째 조건 (type of el ===‘string’)을 충족시키는 3 가지 요소가 있습니다. 

이것이 우리의 유일한 조건이라면 첫 번째‘굵은 저울’을 반환합니다. 

그러나 차이점은 오직 하나의 인덱스가 2이고 '4 피트'라는 것입니다.


인덱스에 대해 비슷한 배열 방법은 .findIndex()입니다. 

이 메소드는 함수도 수신하지만 추측 할 수 있듯이 요소 자체 대신 일치하는 요소의 색인을 리턴합니다.


Array.indexOf 


const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"]; alligator.indexOf("rounded snout"); // returns 3 


.includes() 메서드와 마찬가지로 .indexOf()는 .find() 메서드에서 보았던 함수가 아니라 엄격한 비교를 사용합니다. 

그러나 contains()와 달리 부울이 아닌 요소의 인덱스를 반환합니다. 

배열에서 검색을 시작할 인덱스를 지정할 수도 있습니다.


indexOf()가 매우 유용하다는 것을 알았습니다. 

쉽고 빠르며, 요소가 배열의 어디에 있는지, 요소가 존재하는지 여부를 알려줄 수 있습니다. 

요소가 존재하는지 어떻게 알 수 있습니까? 

기본적으로 요소가 양수를 반환하면 존재하고 -1을 반환하면 해당 요소가 존재하지 않는 것을 알 수 있습니다.


alligator.indexOf("soft and fluffy"); // returns -1 alligator.indexOf(80); // returns 1 alligator.indexOf(80, 2); // returns -1 


보시다시피, find() 또는 findIndex() 메소드를 사용하여 동일한 정보를 얻을 수는 있지만 작성하기에는 훨씬 적은 양입니다. 

이미 indexOf 메소드 내에 있으므로 비교를 위해 함수를 작성할 필요가 없습니다.


이제 다른 것과 마찬가지로 indexOf()도 처음으로 일치하는 요소의 색인을 반환합니다. 

JavaScript는 대체 배열 메소드 .lastIndexOf()를 제공합니다. 

짐작할 수 있듯이, 이것은 indexOf()와 동일하지만 배열의 마지막 인덱스에서 시작하여 뒤로 작동합니다. 

두 번째 매개 변수를 지정할 수도 있지만 다른 방법을 사용하기 때문에 색인이 변경되지 않습니다.


const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80]; alligator.indexOf(80); // returns 1 alligator.lastIndexOf(80); // returns 4 alligator.indexOf(80, 2); // returns 4 alligator.lastIndexOf(80, 4); // returns 4 alligator.lastIndexOf(80, 3); // returns 1 


Array.filter 


const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80]; alligator.filter(el => el === 80); //returns [80, 80] 


filter() 메서드는 find() 메서드와 비슷합니다. 

함수가 전달되고 반환 될 조건이 필요하다는 점입니다. 

가장 큰 차이점은 filter()는 일치하는 요소가 하나만 있어도 항상 배열을 반환한다는 것입니다. 

그러나 모든 일치하는 요소를 반환하는 반면 find()는 첫 번째 일치하는 항목 만 반환합니다.


필터의 중요한 점은 기준과 일치하는 모든 요소를 ​​반환한다는 것입니다. 

그것은 오직 나일 수는 있지만“필터링하고 싶은 요소들이 있습니다”라고 생각하면서 혼란스러워 할 수 있습니다. 

진실로 필터링 하려는 요소들을 나타낼 것입니다.


결론 


내가 찾은 가장 쉬운 방법은 무언가를 검색 할 때 find() 메서드이지만 실제로는 케이스에 따라 다릅니다.


  • 존재하는 경우에만 알아야 합니까? .includes()를 사용하십시오.
  • 요소 자체를 가져와야 합니까? 여러 항목에 .find() 또는 .filter()를 사용하십시오.
  • 요소의 색인을 찾아야 합니까? 보다 복잡한 검색을 위해서는 .indexOf() 또는 findIndex()를 사용하십시오.

여기 예제의 배열은 매우 간단했습니다. 당신은 객체의 배열로 자신을 찾을 수 있습니다. 다음은 중첩 된 개체의 정글을 탐색하기 위한 매우 기본적인 예입니다.


const jungle = [ { name: "frog", threat: 0 }, { name: "monkey", threat: 5 }, { name: "gorilla", threat: 8 }, { name: "lion", threat: 10 } ]; // break the object down in order to use .includes() or .indexOf() const names = jungle.map(el => el.name); // returns ['frog', 'monkey', 'gorilla', 'lion'] console.log(names.includes("gorilla")); // returns true console.log(names.indexOf("lion")); // returns 3 - which corresponds correctly assuming no sorting was done // methods we can do on the array of objects console.log(jungle.find(el => el.threat == 5)); // returns object - {name: "monkey", threat: 5} console.log(jungle.filter(el => el.threat > 5)); // returns array - [{name: "gorilla", threat: 8}, {name: 'lion', threat: 10}] 


대체로, 이것들은 친숙하고 오래 전에 훌륭한 방법입니다. 

JavaScript 배열에 대해 잘 훈련 된 전문가임을 알게 될 것입니다!



페이지 정보

조회 53회 ]  작성일20-03-01 14:43

웹학교