`

javascript数组唯一化实现方式

阅读更多

实现方式
这里给出2中实现方式。一种是大家应该都知道的indexOf检测的方式,另一种是结合lastIndexOf和splice实现方式。

//首先给Array对象原型上添加indexOf和lastIndexOf方法.(如果没有的话)
if(!Array.prototype.indexOf){
    Array.prototype.indexOf = function(element, index){
        var length = this.length;
        if(index == null){
            index = 0;
        }else{
            index = +index || 0;
            if(index < 0) index+= length;
            if(index < 0) index = 0;
        }
        for(var current;index<length;index++){
            current = this[index];
            if(current === element) return index;
        }
        return -1;
    }
}
if(!Array.prototype.lastIndexOf){
    Array.prototype.lastIndexOf = function(element, index){
        var length = this.length;
        if(index == null){
            index = length - 1;
        }else{
            index = +index || 0;
            if(index < 0) index+= length;
            if(index < 0) index = -1;
            else if(index >= length) index = length - 1;
        }
        for(var current;index>=0;index--){
            current = this[index];
            if(current === element) return index;
        }
        return -1;
    }
}
//很常见的实现方式
var arrayUnique1 = function(arr){
    for(var i=0,len=arr.length,result=[],item;i<len;i++){
        item = arr[i];
        if(result.indexOf(item) < 0) {
            result[result.length] = item;
        }
    }
    return result;
}
//通过lastIndexOf和splice方法实现方式
var arrayUnique2 = function(arr){
    var length = arr.length;
    while(--length){
                //如果在前面已经出现,则将该位置的元素删除
        if(arr.lastIndexOf(arr[length],length-1) > -1) {
            arr.splice(length,1);
        }
    }
    return arr;    
}


测试结果
测试数据:var arr = [1,2,3,1,2,3,2,1,3,4,2,232];
IE7循环10,000次:
arrayUnique1为460ms,arrayUnique2为190ms。
FF3.5循环100,000次:
arrayUnique1为170ms,arrayUnique2为63ms。

从测试结果上可以看出,通过lastIndexOf和splice的方式的速度是普通方式的2-3倍。

其他实现方式
除了上面描述的2中实现方式外,其实还是有其他实现方式的。jQuery中就一种实现方式。我们可以看下具体的代码:

unique: function( array ) {
    var ret = [], done = {};
    try {
        for ( var i = 0, length = array.length; i < length; i++ ) {
            var id = jQuery.data( array[ i ] );
            if ( !done[ id ] ) {
                done[ id ] = true;
                ret.push( array[ i ] );
            }
        }
    } catch( e ) {
        ret = array;
    }
    return ret;
}


这种是通过创建一个临时的对象,然后获取元素的ID保存在对象的key中。但这种实现方式只能针对对象,对于普通的直接量(如:数字,字符串等)是无用的。并且经过测试,这种方式在执行速度上和lastIndexOf结合splice还是有点差距的。
4
2
分享到:
评论

相关推荐

    javascript实现数组内值索引随机化及创建随机数组的方法

    在Web开发中,JavaScript是最...总结来说,JavaScript数组内值索引的随机化以及创建随机数组是实现多种Web功能的基础技能。通过学习和掌握这些技能,开发者可以更加高效地处理数组数据,创建更加丰富和有趣的应用程序。

    javascript数组去重方法分析

    本文将详细解析两种JavaScript数组去重的方法,并提供一些额外的在线工具供参考。 ### 方法一:使用`indexOf()`方法 这种方法基于`indexOf()`函数来检测数组中的元素是否已经存在。`indexOf()`返回指定元素在数组...

    JavaScript 数组去重并统计重复元素出现的次数实例

    通过对数组去重以及统计重复元素出现次数的实现,能够帮助开发者更好地了解JavaScript数组操作。本文提供的两种方法各有优劣,方法一虽然较为繁琐,但兼容性好,适用于低版本的JavaScript环境;方法二简洁高效,但需...

    Javascript数组与字典用法分析

    这意味着,尽管JavaScript数组是基于数字索引的,但我们也可以给数组元素赋予具有意义的字符串键名。 在介绍数组的用法时,文中提到了如何创建一个数组,并为其赋值,然后使用for循环来遍历数组元素。数组元素可以...

    整理Javascript数组学习笔记

    JavaScript中的数组是一种特殊的数据结构,...总的来说,理解JavaScript数组的基本概念和操作对于编程至关重要,它们是实现各种数据处理和逻辑控制的基础。通过熟练掌握数组的使用,开发者可以更高效地处理和组织数据。

    js代码-//已知如下数组: //编写一个程序将数组扁平化去并除其中重复部分数据,最终得到一个升序且不重复的数组

    本篇文章将详细讲解如何通过JavaScript实现这个功能,并创建一个能够将数组扁平化、去重并排序的程序。 首先,我们要理解数组扁平化的概念。数组扁平化是指将一个多维数组(即包含数组的数组)转化为一维数组的过程...

    JavaScript数组去重的两种方法推荐

    本文将介绍两种常用的JavaScript数组去重方法,并解释其工作原理。 第一种方法是利用数组的`indexOf`方法实现去重。具体操作如下:创建一个空数组`result`作为去重后的结果,然后遍历原数组,使用`indexOf`方法检查...

    js代码-数组扁平化及去重方法

    JavaScript中有多种方式实现数组去重,包括`Set`、`filter()`、`indexOf()`等。 1. **`Set`对象**: `Set`是ES6新增的数据结构,不允许重复元素,因此可以用它来实现去重。 ```javascript let arr = [1, 2, 3, 3, 4...

    JavaScript数组去重的几种方法

    本文将从几个不同的角度介绍JavaScript数组去重的方法,旨在帮助读者掌握数组去重的技巧。 首先,数组去重的核心思想可以分为两大类。一是通过遍历数组,比较数组内部元素,然后将唯一的元素添加到新的数组中;二是...

    内存数组做统计专题图

    数组是一种线性数据结构,它包含相同类型元素的集合,这些元素可以通过一个唯一的索引来访问。在编程语言如Python、Java或C#中,数组是非常基础且高效的数据结构。对于统计分析,内存数组的优势在于快速访问和处理...

    javascriptArraysAndObjects:JavaScript 数组和对象

    1. 定义:JavaScript数组是一种可变大小的有序集合,可以存储任意类型的值,包括数字、字符串、对象等。创建数组通常通过`Array()`构造函数或数组字面量语法完成: ```javascript var myArray = new Array(); // 空...

    js代码-编写一个程序将数组扁平化去并除其中重复部分数据,最终得到一个升序且不重复的数组

    本项目中的任务就是实现这样一个功能:给定一个可能包含嵌套数组的数组,将其扁平化(flatten)并确保所有元素唯一(remove duplicates),最后按照升序排序。下面我们将详细探讨这个过程。 首先,让我们来了解如何...

    Javascript 二维数组

    二维数组是一种特殊的数据结构,...综上所述,JavaScript二维数组的实现主要依赖于数组的嵌套,以及循环结构来初始化和操作这些嵌套数组。掌握了二维数组的创建和操作,可以为解决各种复杂数据处理问题打下坚实的基础。

    文本到数组例子

    在Python中,数组通常用列表(list)来表示,而在JavaScript中,数组是内置的数据类型。数组的优势在于快速查找、插入和删除元素,以及支持各种高级操作,如排序和搜索。 三、文本到数组的转换方法 1. 分词:这是将...

    处理数组数据

    6. **动态数组**:在某些语言(如Python或JavaScript)中,数组的大小可以在运行时动态调整,这种数组称为动态数组。例如,使用Python的list: ```python numbers = [1, 2, 3] numbers.append(4) ``` 7. **...

    JavaScript中数组去重的5种方法

    Set函数可以接收一个数组作为参数,用来初始化Set数据结构。因此,可以利用Set的特性轻松实现数组去重。 ```javascript let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, ...

    JavaScript实现找出数组中最长的连续数字序列

    关于如何用JavaScript实现找出数组中最长的连续数字序列,以下是一些重要的知识点。 首先,需要理解连续数字序列的定义:在一个整数序列中,连续数字是指按数值顺序排列,且数值相邻的数字序列。例如,序列[1, 2, 3...

    javascript链表可视化

    在这个可视化实现中,我们可以看到以下关键知识点: 1. **链表的基本操作**: - **添加节点**:在链表的头部或尾部添加新节点,这个操作通常涉及改变头节点或最后一个节点的指针。 - **删除节点**:根据指定的值...

    JS实现的JSON数组去重算法示例

    例如,在金融、电商或其它需要处理支付方式的系统中,我们可能会有包含多个支付项的数组,这些项可能在支付模式(如信用卡、支付宝等)上有重复,但我们需要保留唯一的支付模式,并累加相同支付模式下的金额。...

Global site tag (gtag.js) - Google Analytics