视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JS实现数组去重及数组内对象去重功能示例
2020-11-27 22:01:16 责编:小采
文档


本文实例讲述了JS实现数组去重及数组内对象去重功能。分享给大家供大家参考,具体如下:

大家在写项目的时候一定遇到过这种逻辑需求,就是给一个数组进行去重处理,还有一种就是给数组内的对象根据某一个属性,比如id,进行去重,下面我写了两个函数,都是可以达到这个效果的,一个是纯ES5的去重办法,一个是用了ES6的 Array.from(new Set())和ES5的reduce来进行去重

我先定义两个数组吧

var arr = [1,2,3,5,3,4,5,6,6,"test","test",true];
var person = [
 {
 name:"孙悟空",
 weapon:"如意金箍棒",
 experience:"大闹天宫、西天取经",
 post:"斗战胜佛、齐天大圣"
 },
 {
 name:"孙悟空",
 weapon:"如意金箍棒",
 experience:"大闹天宫、西天取经",
 post:"斗战胜佛、齐天大圣"
 },
 {
 name:"孙悟空",
 weapon:"如意金箍棒",
 experience:"大闹天宫、西天取经",
 post:"斗战胜佛、齐天大圣"
 },
 {
 name:"孙悟空",
 weapon:"如意金箍棒",
 experience:"大闹天宫、西天取经",
 post:"斗战胜佛、齐天大圣"
 },
 {
 name:"孙悟空",
 weapon:"如意金箍棒",
 experience:"大闹天宫、西天取经",
 post:"斗战胜佛、齐天大圣"
 }
];

ES5版本:

//ES5原生去重办法
function Es5duplicate(arr,type){
 var newArr = [];
 var tArr = [];
 if(arr.length == 0){
 return arr;
 }else{
 if(type){
 for(var i = 0; i < arr.length;i++){
 if(!tArr[arr[i][type]]){
 newArr.push(arr[i]);
 tArr[arr[i][type]] = true;
 }
 }
 return newArr;
 }else{
 for(var i = 0; i < arr.length;i++){
 if(!tArr[arr[i]]){
 newArr.push(arr[i]);
 tArr[arr[i]] = true;
 }
 }
 return newArr;
 }
 }
}
console.log('ES5去重',Es5duplicate(arr));
console.log('ES5去重',Es5duplicate(person,"name"));

ES6 + ES5版本:

//Es6 + ES5去重办法
function Es6duplicate(arr,type){
 if(arr.length == 0){
 return arr;
 }else{
 if(type){
 var obj = {}
 var newArr = arr.reduce((cur,next) => {
 obj[next.name] ? "" : obj[next.name] = true && cur.push(next);
 return cur;
 },[])
 return newArr;
 }else{
 return Array.from(new Set(arr));
 }
 }
}
console.log('ES6去重',Es6duplicate(arr));
console.log('ES6去重',Es6duplicate(person,"name"));

看下结果

看起来好像是第二种办法代码量要小一些,但是第一个通用,兼容性特别好,第二个因为牵扯到了ES6新特性,所以还是要考虑一下兼容性,但是如果你要是在vue-cli初始化生成的项目,可以随便用ES6的新特性,他自动转译了,我自己搭建了一个demo,试了好多新特性,IE9+都有效果(本身vue就不支持IE8及以下,所以IE9以下没办法实验)

PS:这里再为大家提供几款相关工具供大家参考使用:

在线去除重复项工具:
http://tools.jb51.net/code/quchong

在线文本去重复工具:
http://tools.jb51.net/aideddesign/txt_quchong

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

下载本文
显示全文
专题