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>

相当于Perl哈希表比较的Javascript

1 个答案: