如何通过排序合并两个数组？答案

【问题标题】：How to union two arrays with ordering?如何通过排序合并两个数组？
【发布时间】：2017-05-12 13:05:13
【问题描述】：

我有几个要合并的数组，但我需要保持它们的顺序。示例：

var js_files = [
'bower_components/jquery/dist/jquery.js',
'bower_components/jquery.cookie/jquery.cookie.js',
'bower_components/jquery-placeholder/jquery-placeholder.js',
'bower_components/foundation-sites/dist/foundation.js',
'bower_components/Swiper/dist/js/swiper.jquery.min.js',
'assets/scripts/**/*.js'
];

和：

var js_files = [
'bower_components/jquery/dist/jquery.js',
'parnet/bower_components/jquery/dist/jquery.js',
'parent/bower_components/jquery.cookie/jquery.cookie.js'
];

我希望合并它们并确保第一个数组将保留在第一位并删除重复值。

预期输出：

['bower_components/jquery/dist/jquery.js',
'bower_components/jquery.cookie/jquery.cookie.js',
'bower_components/jquery-placeholder/jquery-placeholder.js',
'bower_components/foundation-sites/dist/foundation.js',
'bower_components/Swiper/dist/js/swiper.jquery.min.js',
'assets/scripts/**/*.js',
'parnet/bower_components/jquery/dist/jquery.js',
'parent/bower_components/jquery.cookie/jquery.cookie.js']

我可以使用 _.union 执行此操作吗？还有什么想法吗？

【问题讨论】：

你为什么不直接concat他们？
预期输出是什么？
@tanmay concat 不会处理重复值。
@AmitT.，请将此信息添加到问题中，因为它对它很重要。
@choz 添加到问题中。谢谢。

标签： javascript arrays node.js nodes node-modules

【解决方案1】：

您可以将Set 与spread syntax ... 结合使用，用于原始排序顺序中的唯一项目。

var js_files1 = [
    'abc',
    'def',
    'bower_components/jquery/dist/jquery.js',
    'bower_components/jquery.cookie/jquery.cookie.js',
    'bower_components/jquery-placeholder/jquery-placeholder.js',
    'bower_components/foundation-sites/dist/foundation.js',
    'bower_components/Swiper/dist/js/swiper.jquery.min.js',
    'assets/scripts/**/*.js'
  ],
  js_files2 = [
    'def',
    'ghi',
    'bower_components/jquery/dist/jquery.js',
    'parnet/bower_components/jquery/dist/jquery.js',
    'parent/bower_components/jquery.cookie/jquery.cookie.js'
  ],
  uniqueFiles = [...new Set([...js_files1, ...js_files2])];

console.log(uniqueFiles);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

【解决方案2】：

您可以使用 Array.prototype.slice 以 ES5 方式执行此操作，例如：

const first = [1,2,3,4];
const second = [5,6,7,8];

const results = [].concat(first.slice(), second.slice());

或者使用“解构”的 ESNext 方式

const first = [1,2,3,4];
const second = [5,6,7,8];

const result = [...first, ...second];

编辑：我错过了您需要不同值的观点；

这将在您连接内容后从结果中删除重复项。

const distinctResults = results.filter(function removeDuplicates(item, index){

  return results.indexOf(item) === index;
});

【讨论】：

为什么不只是results = first.concat(second)？
@Burimi concat 无法处理重复。

【解决方案3】：

var a = [1,2,3];
var b = [4,5,6];

var Joined = [...a,...b];

同样可以为您的代码做。

【讨论】：

【解决方案4】：

只需使用 Array.prototype.concat

var js_files1 = [
'bower_components/jquery/dist/jquery.js',
'bower_components/jquery.cookie/jquery.cookie.js',
'bower_components/jquery-placeholder/jquery-placeholder.js',
'bower_components/foundation-sites/dist/foundation.js',
'bower_components/Swiper/dist/js/swiper.jquery.min.js',
'assets/scripts/**/*.js'
];
var js_files2 = [
'parnet/bower_components/jquery/dist/jquery.js',
'parent/bower_components/jquery.cookie/jquery.cookie.js'
];
var res = js_files1.concat(js_files2);
console.log(res);

【讨论】：

concat 无法处理重复。

【解决方案5】：

var js_files1 = [
'bower_components/jquery/dist/jquery.js',
'bower_components/jquery.cookie/jquery.cookie.js',
'bower_components/jquery-placeholder/jquery-placeholder.js',
'bower_components/foundation-sites/dist/foundation.js',
'bower_components/Swiper/dist/js/swiper.jquery.min.js',
'assets/scripts/**/*.js'
];

var js_files2 = [
'parnet/bower_components/jquery/dist/jquery.js',
'parent/bower_components/jquery.cookie/jquery.cookie.js',
"assets/scripts/**/*.js"
];

js_files2.forEach(value => {
  if (js_files1.indexOf(value) == -1) {
    js_files1.push(value);
  }
});

console.log(js_files1);

【讨论】：

【解决方案6】：

_.union 将从您的第二个数组中删除重复值。

在您的情况下，您在第二个数组中没有任何重复值，因此它只会将它们连接起来

但如果第二个数组中有任何重复值，_.union 将删除它

例如。

 var a = [
   'bower_components/jquery/dist/jquery.js',
   'bower_components/jquery.cookie/jquery.cookie.js',
   'bower_components/jquery-placeholder/jquery-placeholder.js',
   'bower_components/foundation-sites/dist/foundation.js',
   'bower_components/Swiper/dist/js/swiper.jquery.min.js',
   'assets/scripts/**/*.js'
 ];


var b = [
  'bower_components/jquery/dist/jquery.js',
  'parnet/bower_components/jquery/dist/jquery.js',
  'parent/bower_components/jquery.cookie/jquery.cookie.js'
];

_.union(a, b) 将导致

 [
    "bower_components/jquery/dist/jquery.js",
    "bower_components/jquery.cookie/jquery.cookie.js",
    "bower_components/jquery-placeholder/jquery-placeholder.js",
    "bower_components/foundation-sites/dist/foundation.js",
    "bower_components/Swiper/dist/js/swiper.jquery.min.js",
    "assets/scripts/**/*.js",

    "parnet/bower_components/jquery/dist/jquery.js",
    "parent/bower_components/jquery.cookie/jquery.cookie.js"
 ]

这里你可以看到_.union在结果中删除了数组B的重复值"bower_components/jquery/dist/jquery.js"

【讨论】：

with _.union 如何控制返回数组的顺序？现在它返回按 ABC 排序的数组。
你不能控制顺序，要控制顺序你需要根据你的要求编写单独的函数
另外，请提及有问题的返回数组的所需顺序......现在" _.union 将返回您在问题中提到的预期输出