JavaScript合并多个数组并去重的实现方法

作者:小括号时间:2026-10-22 13:43:04浏览:107

本文介绍JavaScript中合并多个数组并去除重复项的算法实现。通过定义内部函数利用concat复制数组并结合indexOf判断唯一性,实现两数组合并去重。进而扩展支持任意数量参数,最后结合sort方法实现数值排序,提供完整代码示例与相关工具推荐。

JavaScript合并多个数组并去重的实现方法

本文通过具体实例展示如何使用JavaScript实现合并多个数组并去除重复值的算法,供开发者参考学习。


var arr1 = ['a','b'];
var arr2 = ['a','c','d'];
var arr3 = [1,'d',undefined,true,null];
//合并两个数组,去重
var concat_ = function(arr1,arr2){
  //不要直接使用var arr = arr1,这样arr只是arr1的一个引用,两者的修改会互相影响
  var arr = arr1.concat();
  //或者使用slice()复制,var arr = arr1.slice(0)
  for(var i=0;i<arr2.length;i++){
    arr.indexOf(arr2[i]) === -1 ? arr.push(arr2[i]) : 0;
  }
  return arr;
}
console.log(concat_(arr1,arr2));

代码运行后的输出结果如下所示:

JavaScript合并多个数组并去重的实现方法


var arr1 = ['a','b'];
var arr2 = ['a','c','d'];
var arr3 = [1,'d',undefined,true,null];
//合并多个数组,去重
var concat = function(arr1,arr2,arr3){
  if(arguments.length <= 1){
    return false;
  }
  var concat_ = function(arr1,arr2){
    var arr = arr1.concat();
    for(var i=0;i<arr2.length;i++){
      arr.indexOf(arr2[i]) === -1 ? arr.push(arr2[i]) : 0;
    }
    return arr;
  }
  var result = concat_(arr1,arr2);
  for(var i=2;i<arguments.length;i++){
    result = concat_(result,arguments[i]);
  }
  return result;
}
console.log(concat(arr1,arr2,arr3));

合并多个数组时的运行结果展示:

JavaScript合并多个数组并去重的实现方法


//合并多个数组,去重,排序
var arr1 = [1,6,4,0];
var arr2 = [8,20,7,4.5];
var arr3 = [6,0,7,90,2];
var concat = function(arr1,arr2,arr3){
  if(arguments.length <= 1){
    return false;
  }
  var concat_ = function(arr1,arr2){
    var arr = arr1.concat();
    for(var i=0;i<arr2.length;i++){
      arr.indexOf(arr2[i]) === -1 ? arr.push(arr2[i]) : 0;
    }
    return arr;
  }
  var result = concat_(arr1,arr2);
  for(var i=2;i<arguments.length;i++){
    result = concat_(result,arguments[i]);
  }
  //排序
  function sortNumber(a,b){
    return a - b;
  }
  return result.sort(sortNumber);
}
console.log(concat(arr1,arr2,arr3));

包含排序功能的合并去重运行结果:

JavaScript合并多个数组并去重的实现方法

此外,推荐以下相关在线工具供进一步使用:

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

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

在线动画演示插入/选择/冒泡/归并/希尔/快速排序算法过程工具: http://tools.jb51.net/aideddesign/paixu_ys

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript排序算法总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

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

作者最新文章