javascript - SerializeObject 尝试将字符串数字转换为整数(已更新)

Question

我发现下面的代码可以从表单数据创建一个对象，到目前为止它运行良好，但我想更进一步，将包含数字的字符串转换为整数。构建函数处理数据部分，但在我使用这段代码的地方失败了:

base[key] = isNaN(value) && Number(value) ? Number(value) : value. 

我留下了一个jsfiddle，这样你就可以调试并看看我的意思它当前在 Angular 色数组字段中输出[“1”，“2”]，我希望它看起来像这样[1,2] 但使用上面的代码输出 1:2。

jsfiddle

(function($){
    $.fn.serializeObject = function(){

        var self = this,
            json = {},
            push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                "push":     /^$/,
                "fixed":    /^\d+$/,
                "named":    /^[a-zA-Z0-9_]+$/
            };


        this.build = function(base, key, value){  
            //base[key] = isNaN(value) && Number(value) ? Number(value) : value
            base[key] = value;
            return base;
        };

        this.push_counter = function(key){
            if(push_counters[key] === undefined){
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };

        $.each($(this).serializeArray(), function(){

            // skip invalid keys
            if(!patterns.validate.test(this.name)){
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while((k = keys.pop()) !== undefined){

                // adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                // push
                if(k.match(patterns.push)){
                    merge = self.build([], self.push_counter(reverse_key), merge);
                }

                // fixed
                else if(k.match(patterns.fixed)){
                    merge = self.build([], k, merge);
                }

                // named
                else if(k.match(patterns.named)){
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };
})(jQuery);

Answer 1

如果你使用这个:

base[key] = isNaN(value) || Array.isArray(value) ? value : Number(value);

它会起作用:

(function($) {
  $.fn.serializeObject = function() {

    var self = this,
      json = {},
      push_counters = {},
      patterns = {
        "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
        "key": /[a-zA-Z0-9_]+|(?=\[\])/g,
        "push": /^$/,
        "fixed": /^\d+$/,
        "named": /^[a-zA-Z0-9_]+$/
      };


    this.build = function(base, key, value) {

      base[key] = isNaN(value) || Array.isArray(value) ? value : Number(value);
      return base;
    };

    this.push_counter = function(key) {
      if (push_counters[key] === undefined) {
        push_counters[key] = 0;
      }
      return push_counters[key]++;
    };

    $.each($(this).serializeArray(), function() {

      // skip invalid keys
      if (!patterns.validate.test(this.name)) {
        return;
      }

      var k,
        keys = this.name.match(patterns.key),
        merge = this.value,
        reverse_key = this.name;

      while ((k = keys.pop()) !== undefined) {

        // adjust reverse_key
        reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

        // push
        if (k.match(patterns.push)) {
          merge = self.build([], self.push_counter(reverse_key), merge);
        }

        // fixed
        else if (k.match(patterns.fixed)) {
          merge = self.build([], k, merge);
        }

        // named
        else if (k.match(patterns.named)) {
          merge = self.build({}, k, merge);
        }
      }

      json = $.extend(true, json, merge);
    });

    return json;
  };
})(jQuery);



let data = $('form').serializeObject();

console.log(data)

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="firstname" name="firstname" value="John">

  <input type="text" id="lastname" name="lastname" value="Doe">
  <input type="checkbox" checked name="roles[]" value="1">
  <input type="checkbox" checked name="roles[]" value="2">
  <input type="text" id="role" name="images[0][id]" value="1">
  <input type="text" id="role" name="images[0][image]" value="image1.jpg">
  <input type="text" id="role" name="images[1][id]" value="2">
  <input type="text" id="role" name="images[1][image]" value="image2.jpg">

</form>

长话短说，我们使用 Array.isArray 来检查 value 是否是一个数组，如果是则返回它。现在，如果您想进一步检查数组内部等，这是一个不同的问题，因为您可能还拥有多级或多维数组，并且那里的事情会递归地变得毛茸茸的:)希望这会有所帮助。