相当于Perl哈希表比较的Javascript

Question

我是Java的新手，需要做一些对我来说很容易用Perl编写代码的事情，但是我不能完全弄清Javascript的等效性。 两个数组填充了名为baseText和newText的文本窗口的内容，其中每个窗口都有非常简单的行，例如A = 1，B = 5，等等：

function myJSComparator() {
    var baseEntries = stringAsLines(byId("baseText").value);
    var baseAllAppOptions = [];
    for (var i = 0; i < baseEntries.length; i++) {
        var fields = baseEntries[i].split("=");
        var baseAppOption = {optionName:fields[0],optionValue:fields[1]};
        baseAllAppOptions.push(baseAppOption);
    }
    var newEntries = stringAsLines(byId("newText").value);
    var newAllAppOptions = [];
    for (var i = 0; i < newEntries.length; i++) {
        var fields = newEntries[i].split("=");
        var newAppOption = {optionName:fields[0],optionValue:fields[1]};
        newAllAppOptions.push(newAppOption);
    }
}

如何遍历baseAllAppOptions和newAllAppOptions并输出以下内容：

1）仅总结了baseAllAppOptions和newAllAppOptions中相同的optionName.fields，但其对应的optionValue.fields不同的摘要。

2）仅对baseAllAppOptions中的optionName.fields（及其对应的optionValue.fields）进行汇总，而不对newAllAppOptions中的进行汇总。

3）仅对newAllAppOptions中的optionName.fields（及其对应的optionValue.fields）进行汇总，而不对baseAllAppOptions中的进行总结。

我有三个文本窗口正在等待接收上面每一行的输出。 我打算像这样打印到每个文本窗口...

    for (var i = 0; i < baseEntries.length; i++) {
        document.getElementById("baseChangeText").value += baseAllAppOptions[i].optionName + baseAllAppOptions[i].optionValue + String.fromCharCode(13);
    }

以上只是我如何遍历数组项并打印出它们而不进行任何直接比较的示例。 但是我需要的格式是document.getElementById行中描述的格式。

任何可以共享的一般指导将不胜感激！

顺便说一句，这是我正在使用的：

https://jsfiddle.net/e4bunLvh/57/

在每个“ Release＃* App Option Defaults”窗口中，只需向两者都添加A = 1，然后在其中一个添加B = 2，在另一个添加C = 3。

谢谢！

Answer 1

如果您将每组选项转换为一个对象（相当于Perl中的哈希），那么遍历键（使用Object.keys使其变得简单）并简单地测试值的差异就很简单了，或定义性。

例：

 var getObjectWithContents = function(elementId) { return document.getElementById(elementId) .value .trim() .replace('\\r\\n', '\\n') // replace Windows linebreaks to Unix .replace('\\n\\n', '\\n') // replace double-linebreaks to single .split('\\n').map(function(line) { // map into single key-value pairs var value = line.split('='); var key = value[0].trim(); var val = value[1].trim(); var o = {}; o[key] = val; return o; }).reduce(function(o, p) { // reduce array of single key-value pairs to one object var key = Object.keys(p).shift(); var val = p[key]; o[key] = val; return o; }, {}); }; var getDifferenceByValue = function(optionsBase, optionsNew) { var difference = []; Object.keys(optionsBase).forEach(function(key) { var baseValue = optionsBase[key]; // var newValue = optionsNew[key]; if (newValue !== undefined && baseValue !== newValue) { difference.push(key); } }); return difference; }; var getDifferenceByOption = function(a, b) { var difference = {}; Object.keys(a).forEach(function(key) { if (b[key] === undefined) { difference[key] = a[key]; } }); return difference; }; var outputToTextarea = function outputToTextarea(area, o, type) { var text = document.getElementById(area); text.value = Object.keys(o).map(function(key) { return key + '=' + o[key]; }).join('\\n'); }; var outputDiffByValue = function outputDiffByValue(array) { var text = document.getElementById('outputByValue'); text.value = array.join('\\n'); }; var getDiff = function getDiff() { var app1Defaults = getObjectWithContents('baseText'); var app2Defaults = getObjectWithContents('newText'); var stuffInBothWithDifferentValues = getDifferenceByValue(app1Defaults, app2Defaults); var stuffInBaseAndNotInNew = getDifferenceByOption(app1Defaults, app2Defaults); var stuffInNewAndNotInBase = getDifferenceByOption(app2Defaults, app1Defaults); outputDiffByValue(stuffInBothWithDifferentValues); outputToTextarea('diffBase', stuffInBaseAndNotInNew); outputToTextarea('diffNew', stuffInNewAndNotInBase); // console.log({ // stuffInBothWithDifferentValues, // stuffInBaseAndNotInNew, // stuffInNewAndNotInBase, // }); }; window.addEventListener('load', function() { var button = document.getElementById('logDiff'); button.addEventListener('click', function(e) { getDiff(); e.preventDefault(); return false; }, false); }, false); 

 <div> <textarea class="textbox" id="baseText" rows="5"> a = 1 b = 2 c = 2 f = 5 </textarea> <textarea class="textbox" id="newText" rows="5"> a = 0 b = 1 d = 3 e = 4 </textarea> <button id="logDiff">Get Differences</button> </div> <div> <h3><label for="outputByValue">Differences by Value</label></h3> <textarea class="textbox" id="outputByValue" rows="5"></textarea> </div> <div> <h3><label for="diffBase">Stuff in Base (but not in New)</label></h3> <textarea class="textbox" id="diffBase" rows="5"></textarea> </div> <div> <h3><label for="diffNew">Stuff in New (but not in Base)</label></h3> <textarea class="textbox" id="diffNew" rows="5"></textarea> </div>