数组去重复的N种方法

2019-11-20 22:18:58

阅读:166
标签:js

数组去重复的N种方法

数组的去重是日常开发中常用的方法

var arr = ['abc’,1,1,2,2,’abc’,’b’,’c’,3,5];

  1. 超级原始方法
  function testA( arr ){
    var newArr = [];
    for(var i = 0; i < arr.length; i++ ){
      for(var j = 0; j < newArr.length; j++ ){
        if( arr[i] === newArr[j] ){
          break;
        }
      }
      if( j === newArr.length ){
        newArr[j] = arr[i]
      }
    }
    return newArr;
  }
  console.log(testA(arr));
  1. 原始方法 indexOf 为ecmaScript5新方法 ie9以下不支持
  function testB( arr ) {
    var newArr = [];
    for(var i = 0; i < arr.length; i++ ){
      newArr.indexOf( arr[i] ) < 0 && newArr.push( arr[i] ) ;
    }
    return newArr;
  }
  console.log( testB(arr) );
  1. 利用数组forEach方法 jquery方法与此同理
  function testC( arr ) {
    var newArr = [];
    arr.forEach( v => {
      newArr.indexOf( v ) < 0 && newArr.push( v );

      // es6提供新的数组方法 includes 判断数组中是否具有某项 放回bool值 
      //与indexof 的区别 indexof 找到返回索引 找不到返回-1 并且判断条件是全等(===) 而includes 判断是否具有某项 判断条件是==
      // newArr.includes( v ) || newArr.push( v ); 
    });
    return newArr;
  }
  console.log( testC(arr) );    
  1. 利用数组filter方法
    var testD = arr => {
    // 原理 filter会为数组的每一项执行回调函数 并加将回调函数返回值为true的项放入新的数组 
    //利用indexof方法每次都会从数组起始位置查找 如果当前查找的值跟index相等那么说明再此之前没有这个值 则返回true
    return arr.filter( (v, i) => arr.indexOf( v ) === i );
  }
  console.log( testD( arr ) );
  1. 利用数组reduce方法
  var testE = arr => {
    return  arr.reduce( ( newArr, v ) => { 
      newArr.includes( v ) || newArr.push( v );
      return newArr;
    }, [] );
  }
  console.log( testE( arr ) );
  1. 利用对象键名不重复方法 副作用:改变了顺序和数值类型
  var testF = ( arr ) => {
    var obj = arr.reduce(( o, v ) => {
      o[v] = 1;
      return o;
    }, {} );
    return Array.prototype.slice.call( Object.keys( obj ) );
  }
  console.log( testF( arr ));
  1. es6方法
  // Set数据结构天生值不重复  但返回的是set数据结构 调用数组的Array.from将其转换成数组
  var testG = ( arr ) => Array.from( new Set( arr ) );
  console.log( testG(arr) );

评论:

  • 大圣说:2019-12-04 21:13:31

    一种就够了

X

备案号 皖ICP备19021899号-1  技术支持 © 947968273@qq.com