美文网首页
Javascript数组去重 (对象唯一性、双层遍历) 类型去重

Javascript数组去重 (对象唯一性、双层遍历) 类型去重

作者: 殷川 | 来源:发表于2018-05-09 17:48 被阅读99次

数组去重是日常工作经常出现的场景,解决办法有多种,简洁的、详细的等等,举例我用到过的方法

利用数组对象的唯一性

object.hasOwnProperty(prop),返回一个布尔值,对象自身中是否有该属性,忽略从原型链上继承的属性,兼容性强

// 数组去重
const array = [{ value: 1 }, { value: '1' }, { value: 2 }, '1', 1, 1]

const notReapeatedArray = []

let notReapeatedObj = {}

for (let index = 0; index < array.length; index++) {
    const prop = array[index];
    // 去除JS强制类型转换的干扰,比如1、"1"是不相等的
    const rely = prop + JSON.stringify(prop)

    // hasOwnProperty不会遍历原型链上的属性

    if (!notReapeatedObj.hasOwnProperty(rely)) {
        notReapeatedObj[rely] = true
        notReapeatedArray.push(prop)
    }
}
// [ { value: 1 }, { value: '1' }, { value: 2 }, '1', 1 ]
console.log(notReapeatedArray);

两次for循环

// 数组去重
const array = ['1', 1, '1', ['15'], 15]

// 没有重复项的数组,待push
const notReapeatedArray = []

for (i = 0; i < array.length; i++) {

    // 遍历数组的每一项,是否在notReapeatedArray中出现过,若是,跳出循环,否则放到notReapeatedArray里
    for (j = 0; j < notReapeatedArray.length; j++) {
        if (array[i] === notReapeatedArray[j]) {
            // 有相同项出现了,直接跳出循环,说明array[i]已经存在了
            break
        }
    }
    // array[i] 在数组notReapeatedArray中循环后未出现过,j肯定是notReapeatedArray的长度,因为每一项都被循环了
    if (j == notReapeatedArray.length) {
        notReapeatedArray.push(array[i])
    }
}
console.log(notReapeatedArray);//[ '1', 1, [ '15' ], 15 ]


filter遍历,结合indexOf,兼容ie9及以上

filter返回一个新数组,其中包含所有符合过滤规则的元素,兼容ie9及以上,兼容旧环境,polyfill,点我
indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1,兼容ie9及以上;兼容旧环境,polyfill,点我
把polyfill加到代码中即可


// 使用filter方便判断当前项是否和上一项相同
const array = ['1', 1, '1', ['15'], 15]

const notReapeatedArray = array.filter((item, index) => {
    return array.indexOf(item) === index
})

console.log(notReapeatedArray);//[ '1', 1, [ '15' ], 15 ]

ES6 Set对象

Set中的元素只会出现一次,即Set中的元素是唯一的
ES6的兼容性经过babel处理就行啦

const array = ['1', 1, '1', ['15'], 15]

const notReapeatedArray = new Set(array)
//返回一个Set对象,Set { '1', 1, [ '15' ], 15 }
console.log(notReapeatedArray);
//用Array.from 转成Array
Array.from(notReapeatedArray)//[ '1', 1, [ '15' ], 15 ]
// 用...操作符把Set转换成Array
console.log([...notReapeatedArray]);//[ '1', 1, [ '15' ], 15 ]

相关文章

  • Javascript数组去重 (对象唯一性、双层遍历) 类型去重

    数组去重是日常工作经常出现的场景,解决办法有多种,简洁的、详细的等等,举例我用到过的方法 利用数组对象的唯一性 o...

  • JS中的常用操作

    一、数组去重 常规数组去重一般为双重遍历和使用indexOf方法 1.使用双层for循环去重 2.使用indexO...

  • JavaScript数组去重算法实例

    本文主要介绍了JavaScript数组去重算法,结合实例形式总结分析了JavaScript数组去重相关的读写、遍历...

  • js数组去重、对象数组去重

    普通数组去重 一、普通数组去重 方法一:遍历数组法 方法二:排序法 方法三:对象法 对象数组去重 方法一:将对象数...

  • javascript数组去重,数组对象去重

    利用Reduce去重 function unique(arr) {var obj = {};arr = arr.r...

  • 数组去重

    数组相关操作 1.数组去重 (1)indexOf()去重 (2) 对象属性去重(推荐,因为只需要遍历一遍) (3)...

  • 数组去重

    数组去重的方法:通过直接方法去重、通过对象的属性具有唯一性去重、通过索引值去重、先排序在去重 案例: (1)索引去...

  • 『JavaScript专题』之数组去重

    JavaScript专题之数组去重 前言 数组去重方法老生常谈,既然是常谈,我也来谈谈。 双层循环 也许我们首先想...

  • 数组去重

    0. 由对象组成的数组去重 1. 去重:遍历数组法 2. 去重:数组下标判断法 3. 去重:排序后相邻去除法 4....

  • 27_用js实现一下数组去重和排序,有哪些方法可以实现

    一、数组去重 1、简单的去重方法 2、对象键值法去重 3、数组下标法 4、排序后相邻去除法 5、优化遍历数组法 6...

网友评论

      本文标题:Javascript数组去重 (对象唯一性、双层遍历) 类型去重

      本文链接:https://www.haomeiwen.com/subject/objorftx.html