JS 판단 수조에 요소 구현 방법 요약 포함 여부

제가 ES6 수조의 확대를 배울 때 재미있는 수조 방법이 많이 추가된 것을 발견했습니다. 갑자기 작업에서 수조에 어떤 요소가 포함되어 있는지 판단하는 것이 매우 흔한 작업이라고 생각했습니다. 그러면 이 글은 정리하는 김에 정리를 하겠습니다.
1. for 순환 결합break
아마도 많은 사람들이 첫째로 for순환을 생각할 것이다. 왜냐하면 for는 가장 안전하고 익숙한 조작이기 때문이다.

let arr = [1, 2, undefined, ' ', 'echo'],
  i = 0;
const LENGTH = arr.length;

// result ， true
let result = false;
for (; i < LENGTH; i++) {
  if (arr[i] === ' ') {
    result = true;
    break;
  };
};
if (result) {
  //do something...
};

for를 사용하는 장점은break와 결합하여 조건을 만족시키는 상황에서 즉시 순환을 뛰어넘을 수 있다는 것이다. 만약에 첫 번째 요소가 조건에 부합된다면 후속 순환 절차는 모두 최적화되어 직접 뛰어넘을 수 있다.
for를 사용하는 단점은 찾기가 직관적이지 않아서 for 순환에서 직접return 검색 결과를 찾을 수 없습니다. 물론 for 순환을 함수에 쓸 수 있지만, result 변수를 추가로 정의해야 합니다.
그 다음으로 수조 조작에 대해 우리는 for순환을 사용하여 많은 문제를 해결할 수 있지만 우리는 영원히 for에 눈을 돌릴 수 없다. for를 제외하고는?더 많은 수조 고급 함수에 눈을 돌려보고 더 많이 생각하는 것이 필요할 수도 있다.
for 하면 본능적으로 forEach를 생각할 수 있습니다. forEach는 리셋 함수를 사용할 수 있지만 리셋 함수에return을 사용할 수 없습니다. 게다가 break를 직접 사용할 수 없습니다. 여기는 소개하지 않겠습니다.
마지막으로 for 순환과 for Each는 NaN을 찾는 데 그다지 실용적이지 않다. 왜냐하면 NaN은 유일하게 자신의 존재와 같지 않기 때문이다. 물론 NaN을 실현하고 판단할 수 있으며 다른 비NaN 대상도 판단할 수 있기 때문에 비교적 번거롭다.
2. Arr.indexOf() 메서드

let arr = [1, 2, undefined, ' ', 'echo'];

// indexOf 
let result = arr.indexOf(' ');//3
if (result>-1) {
  //do something...
};

index Of 방법은 처음부터 끝까지 검색 그룹을 만듭니다. 첫 번째 조건에 맞는 요소를 찾으면 이 요소의 하표를 되돌려주고, 찾지 못하면 -1을 되돌려줍니다. 따라서 최소 하표를 찾을 수 있다면 0이어야 합니다.
for 순환에 비해 indexOf의 작법은 간결해졌지만 for 순환에 비해break를 사용할 수 있다. indexOf는 원하는 요소를 찾아도 검색의 발걸음을 멈추지 않는다는 점에서 최적화되지 않는다.
그 다음으로 의미화는 그다지 우호적이지 않다. 우리는 한 수조에 어떤 원소가 있는지 판단하기를 바란다. 결과적으로 우리는 도대체 아래 표를 가지고 판단을 한다. 물론 NaN 찾기에도 그다지 우호적이지 않다.
[NaN].indexOf(NaN);//-일
3.find() 및 findIndex() 메서드

let arr = [1, 2, undefined, ' ', 'echo'];

// indexOf 
let result = arr.find(ele => ele === ' ')// 
if (result) {
  //do something...
};

find 방법은 비교적 추천하는 방법입니다. find 방법은 첫 번째 조건에 맞는 그룹 요소를 찾아서 되돌려줍니다. 만약 찾지 못하면undefined를 되돌려줍니다.
주의해야 할 것은find가 조건에 맞는 대상을 찾으면 계속 훑어보지 않는다는 것이다. 브레이크 조작을 가지고 화살표 함수를 간소화하여 리셋을 하면 전체 코드가 매우 직관적이라고 할 수 있다.

let arr = [1, 2, undefined, ' ', 'echo'];

// indexOf 
let result = arr.findIndex(ele => ele === ' ')//3
if (result>-1) {
  //do something...
};

find Index 방법은find 방법과 매우 유사합니다. 단지 조건에 맞는 대상이 아니라 이 대상의 아래표를 되돌려줍니다. 찾으면 똑같이 순환을 벗어납니다. 찾지 못하면 -1을 되돌려줍니다. 이 점은 index Of와 약간 유사합니다.
비교적 이상적인 것은find 방법이 Object와 결합할 수 있다는 것이다.is() 방법으로 NaN을 판단하면 당연히 다른 대상도 판단할 수 있다. 아주 네스 아니야?
[NaN].find(ele => Object.is(NaN, ele));//NaN
[1].find(ele => Object.is(1, ele));//일
[NaN].findIndex(ele => Object.is(NaN, ele));//0
[1].findIndex(ele => Object.is(1, ele));//0
작법이 간결하고 브레이크가 있으며 NaN을 판단할 수 있는 두 가지 방법을 모두 추천합니다.
4.some () 메서드

let arr = [1, 2, undefined, ' ', 'echo'];

// indexOf 
let result = arr.some(ele => ele === ' ') //true
if (result) {
  //do something...
};

some 방법 역시 조건을 충족시키는 요소가 있는지 검사하는 데 사용되며, 만약 있다면, 뒤에 있는 요소를 계속 검색하지 않고, 직접true를 되돌려주고, 일치하지 않으면false를 되돌려줍니다.
사용법은find와 비슷하지만 find는 조건을 충족시키는 원소를 되돌려주고 some는 Boolean 값을 되돌려줍니다. 의미적으로 볼 값을 포함하는 것이 더 적절한지 여부입니다.
물론 썸 방법도 Object와 결합할 수 있다.is() 메서드는 NaN을 체크합니다.썸도 추천하는 방법입니다.[NaN].some(ele => Object.is(NaN, ele));5.includes() 메서드
ES6에 추가된 수조 방법은 수조에 어떤 요소가 포함되어 있는지 검사하는 데 사용되며, 만약true가 포함되어 있다면, 그렇지 않으면false가 되돌아옵니다. 비교적 심각한 것은 NaN을 직접 검사할 수 있다는 것입니다.
[1, 3, 'echo'].includes('echo');//true
[NaN, 3, 'echo'].includes(NaN);//true
[1, 3, 'echo'].includes('바람은 바람이다');//false
장점은 말할 것도 없고 가장 간단한 방법은 하나도 없다. 답조할 필요도 없고 복잡한 작법도 쓰지 않고 한 가지 방법으로 직접 해결할 수 있다.
단점은 낮은 버전의 브라우저 지원이 우호적이지 않다는 것이다. 당연히 우리가 사용할 수 있든 사용할 수 있지만, 우리가 직접 봉인할 수 없다는 것이다.

let hasEle = (() =>
  Array.prototype.includes ?
  (arr, val) => arr.includes(val) :
  (arr, val) => arr.some(ele => Object.is(val, ele))
)();

hasEle([1, 2, NaN], 1) //true
hasEle([1, 2, NaN], NaN) //true
hasEle([1, 2, NaN], ' ') //false

여기에 와서 나중에 어떤 수조가 어떤 원소를 포함하고 있는지 찾을 때 몇 가지 새로운 패턴이 더 많아지길 바랍니다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.