>웹 프론트엔드 >JS 튜토리얼 >es6을 사용하여 중복 제거를 구현하는 방법(코드 예)

es6을 사용하여 중복 제거를 구현하는 방법(코드 예)

不言
不言앞으로
2019-01-16 09:56:093013검색

이 기사의 내용은 es6를 사용하여 중복 제거를 구현하는 방법(코드 예제)에 대한 내용입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

다음은 배열에서 중복을 제거하고 고유한 값을 반환하는 세 가지 방법입니다. 내가 가장 좋아하는 방법은 가장 짧고 간단하기 때문에 Set을 사용하는 것입니다.

const array = [5, 2, 4, 5, 3];
console.log([...new Set(array)])
console.log(array.filter((item, index) => array.indexOf(item) === index))
console.log(array.reduce((unique, item) => unique.includes(item) ? unique: [...unique, item], []))
// result:  [5, 2, 4, 3]

Set 사용

Set이 무엇인지 설명하겠습니다.

Set은 es6에서 도입된 새로운 데이터 개체입니다. Set은 고유한 값만 저장할 수 있으므로 배열을 전달할 때 모든 중복 값은 제거됩니다.

좋아요, 코드로 돌아가서 무슨 일이 일어났는지 살펴보겠습니다. 실제로 그는 다음 작업을 수행했습니다.

  1. 먼저 새로운 Set을 생성하고 배열을 입력 매개 변수로 전달했습니다. Set은 고유한 값만 허용하므로 모든 중복 값이 ​​제거됩니다.

  2. 이제 중복 값이 ​​사라졌으므로...을 사용하여 이를 다시 배열로 변환하겠습니다.

const array = [5, 2, 4, 5, 3];
const set = new Set(array)
const newArr = [...set]
console.log(newArr)
// result:  [5, 2, 4, 3]

Set를 배열로 변환하려면 Array.from() 함수를 사용하세요

또한 Array.from()을 사용하여 Set을 배열로 변환할 수도 있습니다.

const array = [5, 2, 4, 5, 3];
const set = new Set(array)
const newArr = Array.from(set)
console.log(newArr)
// result:  [5, 2, 4, 3]

필터 사용

이 옵션을 이해하려면 indexOf와 filter

indexOf()

indexOf() 두 메서드가 무엇을 하는지 살펴보겠습니다. 배열 인덱스에서 찾은 첫 번째 요소를 반환합니다.

const array = [5, 2, 4, 5, 3];
console.log(array.indexOf(5))  // 0
console.log(array.indexOf(2))  // 1
console.log(array.indexOf(8))  // -1

filter

filter() 함수는 우리가 제공하는 조건에 따라 새로운 배열을 생성합니다. 즉, 요소가 통과하고 true를 반환하면 필터링된 배열에 포함됩니다. 요소가 실패하고 false를 반환하면 필터링된 배열에 포함되지 않습니다.

배열을 반복할 때마다 무슨 일이 일어나는지 단계별로 살펴보겠습니다.

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
  console.log(item, index, array.indexOf(item), array.indexOf(item) === index)
  return array.indexOf(item) === index
})
//输出
// 5 0 0 true
// 2 1 1 true
// 4 2 2 true
// 5 3 0 false
// 3 4 4 true

위 코드 출력에 대한 설명을 확인하세요. 중복 요소는 더 이상 indexOf와 일치하지 않으므로 이러한 경우 결과는 false가 되며 필터링된 값에 포함되지 않습니다.

중복 값 검색

배열에서 filter() 함수를 사용하여 중복 값을 검색할 수도 있습니다. 다음과 같이 코드를 간단히 조정하면 됩니다.

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
  console.log(item, index, array.indexOf(item), array.indexOf(item) !== index)
  return array.indexOf(item) !== index
})
//输出
// 5 0 0 false
// 2 1 1 false
// 4 2 2 false
// 5 3 0 true
// 3 4 4 false

reduce() 함수 사용

reduce() 함수는 전달한 감소 함수를 기반으로 배열의 요소를 줄이고 이를 최종 배열로 병합하는 데 사용됩니다. ,

이 경우, 우리의 Reducer() 함수는 최종 배열에 이 요소가 포함되어 있는지 확인합니다. 그렇지 않으면 이 요소를 건너뛰고 마지막으로 반환합니다.

reduce() 함수는 항상 이해하기가 조금 어렵습니다. 이제 어떻게 작동하는지 살펴보겠습니다.

rreee

위 내용은 es6을 사용하여 중복 제거를 구현하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제