es6 배열 includes()용법 사례 분석

본 논문 의 사례 는 es6 배열 includes()용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
Array.prototype.includes 방법 은 불 값 을 되 돌려 줍 니 다.특정한 배열 에 주어진 값 이 포함 되 어 있 는 지 여 부 를 표시 합 니 다.문자열 의 includes 방법 과 유사 합 니 다.ES 2016 은 이 방법 을 도입 했다.

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // true
[1, 2, NaN].includes(NaN) // true

이 방법의 두 번 째 매개 변 수 는 검색 의 시작 위 치 를 표시 하고 기본 값 은 0 입 니 다.두 번 째 매개 변수 가 마이너스 라면 역수 의 위 치 를 나타 낸다.이때 배열 의 길이(예 를 들 어 두 번 째 매개 변 수 는-4 이지 만 배열 의 길 이 는 3)보다 크 면 0 으로 초기 화 된다.

[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true

이 방법 이 없 기 전에 저 희 는 보통 배열 의 index Of 방법 을 사용 하여 특정한 값 이 포함 되 어 있 는 지 확인 합 니 다.

if (arr.indexOf(el) !== -1) {
 // ...
}

index of 방법 은 두 가지 단점 이 있 습 니 다.하 나 는 의미 화 되 지 않 고 그 의 미 는 매개 변수 값 의 첫 번 째 출현 위 치 를 찾 는 것 입 니 다.그래서-1 과 같 지 않 고 표현 하기에 직관 적 이지 않 습 니 다.둘째,내부 적 으로 엄격 한 연산 자 를 사용 해 판단 하면 NaN 에 대한 오심 을 초래 할 수 있다.

[NaN].indexOf(NaN) // -1

includes 는 서로 다른 판단 알고리즘 을 사용 하 는데 이 문제 가 없습니다.

[NaN].includes(NaN) // true

다음 코드 는 현재 환경 이 이 방법 을 지원 하 는 지 확인 하 는 데 사 용 됩 니 다.지원 하지 않 으 면 간단 한 대체 버 전 을 배치 합 니 다.

const contains = (() => Array.prototype.includes 
? (arr, value) => arr.includes(value)
:(arr, value) => arr.some(el => el === value) 
)()

또한 맵 과 set 데이터 구 조 는 has 방법 으로 includes 와 구분 해 야 합 니 다.
-map 구조의 has 방법 은 키 이름 을 찾 는 데 사 용 됩 니 다.예 를 들 어 Map.prototype.has(key).
WeakMap.prototype.has(key), Reflect.has(target, propertyKey)
-set 구조의 has 방법 은 값 을 찾 는 데 사 용 됩 니 다.예 를 들 어 Set.prototype.has(value),
WeakSet.prototype.has(value)
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.