Question

以下代码段执行以下操作：

给定一个类似于"key1=value1;key2=value2;key3=value3"的字符串，它将执行key1的查找并使用jQuery将值设置为value1：

$("#key1").val("value1");

我的目标是不假设字符串的格式正确，因此它可能没有;，或者可能没有=。所以代码应该防止崩溃。

如何使用正确的javascript样式/习语来改进：

var myString = "key1=value1&key2=value2;key3=value3";
var kvp = myString.split(";");
if (kvp && kvp.length) {
    for (var x = 0; x < kvp.length; x++) {
        var parts = kvp[x];
        if (parts && parts.length && parts.indexOf("=") >= 0) {
           var kv = parts.split("=");
           $("#" + kv[0]).val(kv[1]);
        }
    }
}

Answer 1

我会将它分解为一个解析字符串的函数，以及一个执行DOM操作的函数。类似的东西：

function parseString (str, sep, eq) {
  sep = sep || ';';
  eq = eq || '=';

  var result = {};

  if(!str)
    return result;

  var pairs = str.split(sep);
  for (var i = 0, len = pairs.length; i < len; i++) {
    var pair = pairs[i].split(eq);

    // Disregard if we don't have a key
    if(!pair[0].length)
      continue;

    result[pair[0]] = pair[1];
  }

  return result;
}

function setValues(params) {
  for(id in params)
    $('#' + id).value(params[id]);
}

// Add values for ids as specified in myString

var myString = "key1=value1;key2=value2;key3=value3";
setValues(parseString(myString));

<强>更新

如果您知道代码将在现代JS引擎上运行，则可以使用Array.prototype.map和Array.prototype.reduce来获得更简洁的代码。这仅适用于符合ES5的引擎（即，不是IE＆lt; 9）。

function parseString (str, sep, eq) {
  sep = sep || ';';
  eq = eq || '=';

  if(!str)
    return {};

  function splitPair (pair) { return pair.split(eq) }

  function addResult (result, pair) {
    if(pair[0].length)
      result[pair[0]] = pair[1];

    return result;
  }

  return str.split(sep)
    .map(splitPair)
    .reduce(addResult, {});
}

使用parseString：

的示例

console.log(parseString('key1=value1;key2=value2;key3=value3'));
{ key1: 'value1', key2: 'value2', key3: 'value3' }

console.log(parseString('=value1;key2=value2;key3=value3'));
{ key2: 'value2', key3: 'value3' }

console.log(parseString(';key1=value1;key2=value2;key3=value3'));
{ key1: 'value1', key2: 'value2', key3: 'value3' }

console.log(parseString('key1=value1;key2=value2;key3=value3;'));
{ key1: 'value1', key2: 'value2', key3: 'value3' }

console.log(parseString('key1=value1'));
{ key1: 'value1' }

console.log(parseString('key1='));
{ key1: '' }

console.log(parseString('key1'));
{ key1: undefined }

console.log(parseString(''));
{}

console.log(parseString());
{}

这个字符串拆分器可以重构还是改进？

1 个答案: