JavaScript 주제 2: 어레이 중복 제거-JS 튜토리얼-php.cn

JavaScript 주제 2: 어레이 중복 제거

디렉터리

1. 이중 계층 루프(무차별 방식)
2. indexOf 및 포함
3. 정렬 및 중복 제거
4. 필터
5. 키-값 쌍
Six, ES6
Seven, 몇 가지 질문
Reference
마지막에 작성

(관련 무료 학습 권장 사항: javascript 비디오 튜토리얼)

JavaScript 주제 2: 어레이 중복 제거

1. 이중 레이어 루프

으아악

핵심 포인트:

시간 복잡도: O(n^2)O(n^2)
上面的两种方法都是两次循环遍历，处理方式略有不同
上述实现方式确实不是最佳选择，但它胜在兼容性好啊～

二、indexOf和includes

2.1 indexOf简化一层循环判断

核心点：

如果需要返回原数组，则可以在indexOf方法找到重复项时（不等于它首次出现的位置）时利用splice移除
indexOf：返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
indexOf(ele, fromIndex)
- 위의 구현 방법은 실제로 최선의 선택은 아니지만 호환성이 좋기 때문에 더 좋습니다~
- 2. indexOf 및 포함

2.1 indexOf는 루프 판단 계층을 단순화합니다

핵심 포인트:

반환해야 하는 경우 그런 다음 indexOf 메소드가 중복 항목(위치와 동일하지 않음)을 발견하면 splice를 사용하여 indexOf를 제거할 수 있습니다. 처음 나타남): 주어진 요소가 배열에서 발견될 수 있는 첫 번째 인덱스를 반환하거나, 존재하지 않는 경우 -1을 반환합니다.

indexOf(ele, fromIndex)

ele: 찾을 요소
includes：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false
includes(ele, fromIndex)fromIndex: 찾을 요소의 시작 위치, 기본값은 0, 음수 허용, -2는 두 번째부터 마지막 요소까지 시작함을 의미합니다.
- 아래 첨자(숫자)를 반환합니다. )
- fromIndex 的绝对值个索引。。
- 返回结果（bool）

代码：

const unique = (arr)=>{
    for(let i = 0; i {
    var arr = [1, '1', '1', 1, 2, true, false, true, 3, 2, 2, 1];
    var newArr = [];
    for(let i = 0; i <h5>2.3 indexOf和includes对于当前场景的选择</h5><p>在这里我们推荐使用includes来查找元素：</p><p><strong>返回值可以直接作为if的条件语句，简洁</strong></p><pre class="brush:php;toolbar:false">const unique = (arr) => {
    var res = [];
    for (let i = 0; i <p><strong>识别<code>NaN</code></strong></p><p>如果数组中有<code>NaN</code>，你又正好需要判断数组是否有存在<code>NaN</code>，这时你使用<code>indexOf</code>是无法判断的，你必须使用<code>includes</code>这个方法。</p><pre class="brush:php;toolbar:false">const unique = (arr) => {
    var res = [];
    for (let i = 0; i <p><strong>识别<code>undefined</code></strong></p><p>如果数组中有<code>undefined</code>值，<code>includes</code>会认为<strong>空的值是undefined</strong>，而<code>indexOf</code>不会。</p><pre class="brush:php;toolbar:false">if(res.indexOf(arr[i]) !== -1 ){ todo }// orif(res.includes(arr[i])){ todo }

로그인 후 복사

三、排序去重

核心点：

数组排序后，相同的元素会相邻，所以如果当前元素与它的相邻元素不同，就存入到新数组中；
相比于indexOf，只需要一层循环；
concat会拼接数组，并返回新数组；
sort()排序是通过按照转换为的字符串的各个字符的Unicode位点进行排序。所以很难保证它的准确性；

代码：

var arr = [NaN, NaN];arr.indexOf(NaN); // -1arr.includes(NaN); // true

로그인 후 복사

四、filter

核心点：

filter：方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素（返回测试函数成立的元素）
filter(callback, thisArg)：
- callback接受三个参数：element-当前正在处理的元素，index-当前元素索引，array-调用了filter的数组本身
- thisArg：执行 callback 时，用于 this 的值。
  利用filter我们可以在代码层面简化一下外层循环：

代码：

var arr = new Array(3);console.log(arr.indexOf(undefined)); //-1console.log(arr.includes(undefined)) //true

로그인 후 복사

结合排序的思路：

var arr = [1, 1, '1'];function unique(arr) {
    var res = [];
    var sortedArr = arr.concat().sort();
    var last;
    for (var i = 0; i <p><strong>五、键值对（key-value）</strong></p><p>前面提到的几种方式总结下来大致分为</p><ol>
<li>非排序数组，两次遍历判断（遍历、查询）</li>
<li>排序数组，相邻元素比较</li>
</ol><p>我们再提出一种方式，利用Object对象 key-value的方式，来统计数组中元素出现的个数，初步判断逻辑也有两种</p><p>拿<code>[1,1,1,2,2,3,'3']</code></p> 🎜🎜코드: 🎜🎜<pre class="brush:php;toolbar:false">var arr = [1, 2, 1, 1, '1'];const unique = function (arr) {
    var res = arr.filter(function(item, index, arr){
        return arr.indexOf(item) === index;
    })
    return res;}console.log(unique(arr)); // [ 1, 2, '1' ]

로그인 후 복사

🎜2.2 포함은 1단계 루프 판단을 단순화합니다🎜🎜🎜핵심 포인트: 🎜🎜🎜🎜구체적으로 원래 배열을 반환할지 아니면 새 배열을 반환할지 여부에 따라 다음과 같이 결합할 수 있습니다. yourself~🎜🎜includes : 배열에 지정된 값이 포함되어 있는지 확인하는 데 사용됩니다. 상황에 따라 포함되어 있으면 true를 반환하고, 그렇지 않으면 false🎜🎜<code>include(ele, fromIndex) 🎜🎜ele: 찾을 요소 🎜🎜fromIndex: 지정된 인덱스에서 검색을 시작합니다. 기본값은 0입니다. 음수인 경우 fromIndex의 절대값 인덱스를 끝에서 앞으로 점프합니다. . 🎜🎜반환 결과(bool)🎜🎜🎜🎜🎜🎜코드: 🎜🎜

var arr = [1, 2, 1, 1, '1'];const unique = function (arr) {
    return arr.concat().sort().filter(function(item, index, arr){
        return !index || item !== arr[index - 1]
    })}console.log(unique(arr));

로그인 후 복사

🎜2.3 indexOf 및 현재 시나리오 선택을 위한 포함🎜🎜여기에서는 포함을 사용하여 요소를 찾는 것이 좋습니다.🎜🎜🎜반환 값은 직접적으로 if로 사용 조건문, 간결🎜🎜

var arr = [1, 2, 1, 1, '1', 3, 3];const unique = function(arr) {
    var obj = {};
    var res = [];
    arr.forEach(item => {
        if (!obj[item]) {
            obj[item] = true;
            res.push(item);
        }
    });
    return res;}console.log(unique(arr)); // [1, 2, 3]

로그인 후 복사

🎜🎜Identify NaN🎜🎜🎜배열에 NaN이 있으면 해당 배열이 존재하는지 확인하기만 하면 됩니다. NaN이면 indexOf를 사용하는지 판단할 수 없으므로 includes 메서드를 사용해야 합니다. 🎜

var arr = [1, 2, 1, 1, '1'];const unique = function(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(item) ? false : (obj[item] = true)
    })}console.log(unique(arr)); // [1, 2]

로그인 후 복사

🎜🎜정의되지 않은을 인식🎜🎜🎜배열에 정의되지 않은 값이 있는 경우 include는 🎜빈 값을 정의되지 않은 것으로 간주합니다. 🎜, indexOf는 그렇지 않습니다. 🎜

var arr = [1, 2, 1, 1, '1', 3, 3, '2'];const unique = function(arr) {
    var obj = {};
    var res = [];
    arr.forEach(item => {
        if (!obj[typeof item + item]) {
            obj[typeof item + item] = true;
            res.push(item);
        }
    });
    return res;}console.log(unique(arr)); // [ 1, 2, '1', 3, '2' ]

로그인 후 복사

🎜🎜3. 정렬 및 중복 제거🎜🎜🎜🎜핵심 포인트: 🎜🎜🎜🎜배열이 정렬된 후에는 동일한 요소가 인접하게 되므로 현재 요소가 인접 요소와 다르면 다음 위치에 저장됩니다. 🎜🎜indexOf와 비교하면 단 하나의 루프만 필요합니다. 🎜🎜concat은 배열을 연결하고 새 배열을 반환합니다. 🎜🎜sort() 정렬은 변환된 문자열의 각 문자에 대한 유니코드 비트를 기반으로 합니다. 정렬합니다. 따라서 정확성을 보장하기 어렵습니다. 🎜🎜🎜🎜Code: 🎜🎜

var arr = [1, 2, 1, '1', '2'];const unique = function(arr) {
   return Array.from(new Set(arr));}console.log(unique(arr)); // [ 1, 2, '1', '2' ]

로그인 후 복사

🎜🎜Four, filter🎜🎜🎜🎜Core point: 🎜🎜🎜🎜filter: 이 메서드는 제공된 를 포함하는 새 배열을 생성합니다. 함수에 의해 구현된 테스트의 모든 요소(테스트 함수가 설정된 요소를 반환함) 🎜🎜filter(callback, thisArg): 🎜🎜callback은 세 가지 매개변수를 허용합니다: 요소 - 현재 처리 중인 요소, index - 현재 요소 인덱스, array - 필터가 호출된 배열 자체 🎜🎜thisArg: 콜백 실행 시 이에 사용되는 값.
필터를 사용하면 코드 수준에서 외부 루프를 단순화할 수 있습니다. 🎜🎜🎜🎜🎜🎜코드: 🎜🎜

function unique(array) {
    return [...new Set(array)];}

로그인 후 복사

🎜결합 정렬 아이디어: 🎜

var unique = (a) => [...new Set(a)]

로그인 후 복사

🎜🎜 5. 키-값 쌍(키-값)🎜 🎜 🎜위에서 언급한 방법은 대략 🎜

🎜비정렬 배열, 2개의 순회 판단(순회, 쿼리) 🎜🎜정렬 배열, 인접 요소 비교🎜🎜또 다른 방법을 제안합니다. 배열의 요소 수를 계산하는 객체 키-값 방법에는 두 가지 예비 판단 논리도 있습니다🎜🎜 [1,1,1,2,2,3,'3' ]예: 🎜

统计每个元素出现的次数，obj：{1: 3, 2: 2, 3: 3}, 返回这个obj的key而不管他们的value
只元素首次出现，再次出现则证明他是重复元素

5.1 统计次数

var arr = [1, 2, 1, 1, '1', 3, 3];const unique = function(arr) {
    var obj = {};
    var res = [];
    arr.forEach(item => {
        if (!obj[item]) {
            obj[item] = true;
            res.push(item);
        }
    });
    return res;}console.log(unique(arr)); // [1, 2, 3]

로그인 후 복사

5.2 结合filter

var arr = [1, 2, 1, 1, '1'];const unique = function(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(item) ? false : (obj[item] = true)
    })}console.log(unique(arr)); // [1, 2]

로그인 후 복사

5.3 key: value存在的问题

对象的属性是字符串类型的，即本身数字1和字符串‘1’是不同的，但保存到对象中时会发生隐式类型转换，导致去重存在一定的隐患。

考虑到string和number的区别（typeof 1 === ‘number’， typeof ‘1’ === ‘string’），

所以我们可以使用 typeof item + item 拼成字符串作为 key 值来避免这个问题：

var arr = [1, 2, 1, 1, '1', 3, 3, '2'];const unique = function(arr) {
    var obj = {};
    var res = [];
    arr.forEach(item => {
        if (!obj[typeof item + item]) {
            obj[typeof item + item] = true;
            res.push(item);
        }
    });
    return res;}console.log(unique(arr)); // [ 1, 2, '1', 3, '2' ]

로그인 후 복사

六、ES6

随着 ES6 的到来，去重的方法又有了进展，比如我们可以使用 Set 和 Map 数据结构。

6.1 Set

Set：它允许你存储任何类型的唯一值，无论是原始值或者是对象引用

代码：

var arr = [1, 2, 1, '1', '2'];const unique = function(arr) {
   return Array.from(new Set(arr));}console.log(unique(arr)); // [ 1, 2, '1', '2' ]

로그인 후 복사

简化1：

function unique(array) {
    return [...new Set(array)];}

로그인 후 복사

简化2：

var unique = (a) => [...new Set(a)]

로그인 후 복사

6.2 Map

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。

Map.prototype.has(key)：返回一个布尔值，表示Map实例是否包含键对应的值。
Map.prototype.set(key, value)：设置Map对象中键的值。返回该Map对象。

function unique (arr) {
    const newMap = new Map()
    return arr.filter((a) => !newMap.has(a) && newMap.set(a, 1));}

로그인 후 복사

写到这里比较常规的数组去重方法就总结的差不多了，如果需要更强大的去重方法，我们需要对他们进行组合，而且因为场景的不同，我们所实现的方法并不一定能涵盖到

相关免费学习推荐：javascript（视频）

위 내용은 JavaScript 주제 2: 어레이 중복 제거의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!