2025-08-26 10:30:34
增加 GetRawAction()与GetFullAction()函数


2025-07-29 00:11:31
由
// 值不存在时 跳出循环
if (!_value && _tag_type != 'radio' && _tag_type != 'checkbox') continue;
改为
if (_value == null && _tag_type != 'radio' && _tag_type != 'checkbox') continue;


2025-01-17 00:54:17
DeserializeByJSON
增加            // 转换json为字符串
            if (_this.IsObject(_value)) {
                _value = _this.TryToJSONString(_value);
            };

2024-09-07 16:24:48
appendValue修改为iterateAppendValue
parseValue修改为iterateParseValue


2024-07-27 16:32:41
增加静态方法FormHandler.CleanJSONData(result);
用于清理json内值为undefined的项目
参数 CleanUndefined 默认false
增加参数 TextareaToCRLF  是否装Textarea LF转为CRLF 默认 false


参数修改为大写
// autoname 没有name属性时 取id
// omitbutton 忽略按钮
// ignoredisabled 提交表单时是否忽略含有disabled属性的字段
// if (options.hasOwnProperty('omitbutton')) this.options.omitbutton = options.omitbutton;
this.options = Object.assign({
    AutoName: true,
    OmitButton: true,
    IgnoreDisabled: true,
    CleanUndefined: false,
    TextareaToCRLF: false,
}, options);



2024-07-24 09:20:48
重写表单序列化，支持多级json及array
Serialize()
SerializeToJSON()
SerializeToJSONString()
DeserializeByJSON()


----------------------------------------
在 JavaScript 中，可以通过多种方式来判断变量的类型，包括 `typeof`、`instanceof` 以及 `Object.prototype.toString.call`。每种方法都有其特定的用途和优劣势。以下是对每种方法的详细说明和使用示例：

### 1. `typeof`

`typeof` 操作符用于获取变量的基本类型。它返回一个字符串，表示变量的类型。

```javascript
console.log(typeof 42);           // "number"
console.log(typeof 'hello');      // "string"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof {a: 1});       // "object"
console.log(typeof [1, 2, 3]);    // "object"
console.log(typeof null);         // "object" (历史遗留问题)
console.log(typeof function(){}); // "function"
console.log(typeof Symbol());     // "symbol"
```

优点：
- 简单直接，适用于检测基本数据类型。

缺点：
- 对于 `null`，返回 `"object"`，这是一个历史遗留的 bug。
- 无法准确区分数组和对象，都会返回 `"object"`。

### 2. `instanceof`

`instanceof` 操作符用于检测对象是否为某个构造函数的实例。它通常用于检测复杂类型，如数组、日期等。

```javascript
console.log([] instanceof Array);            // true
console.log({} instanceof Object);           // true
console.log(new Date() instanceof Date);     // true
console.log(function(){} instanceof Function); // true

// 也可以用于自定义类的实例检测
class MyClass {}
const myInstance = new MyClass();
console.log(myInstance instanceof MyClass);  // true
```

优点：
- 有助于确定对象的具体类型。
- 可以检测自定义类的实例。

缺点：
- 不能用于检测基本数据类型。
- 在某些情况下，跨 iframe 或不同的 JavaScript 环境时可能会失效。

### 3. `Object.prototype.toString.call`

这是一个更为通用和可靠的方法，可以准确地检测几乎所有的类型。它返回一个格式为 `"[object Type]"` 的字符串，其中 `Type` 是类型名称。

```javascript
console.log(Object.prototype.toString.call(42));           // "[object Number]"
console.log(Object.prototype.toString.call('hello'));      // "[object String]"
console.log(Object.prototype.toString.call(true));         // "[object Boolean]"
console.log(Object.prototype.toString.call(undefined));    // "[object Undefined]"
console.log(Object.prototype.toString.call({a: 1}));       // "[object Object]"
console.log(Object.prototype.toString.call([1, 2, 3]));    // "[object Array]"
console.log(Object.prototype.toString.call(null));         // "[object Null]"
console.log(Object.prototype.toString.call(function(){})); // "[object Function]"
console.log(Object.prototype.toString.call(new Date()));   // "[object Date]"
console.log(Object.prototype.toString.call(Symbol()));     // "[object Symbol]"
```

优点：
- 可以准确检测几乎所有的类型，包括基本数据类型和复杂数据类型。
- 适用于跨不同 JavaScript 环境（如 iframe）。

缺点：
- 语法较为繁琐。

### 综合示例

以下是一个综合示例，展示如何使用这三种方法来判断变量的类型：

```javascript
let variables = [42, 'hello', true, undefined, {a: 1}, [1, 2, 3], null, function(){}, new Date(), Symbol(), new MyClass()];

variables.forEach(value => {
    console.log(`typeof: ${typeof value}`);
    console.log(`instanceof Array: ${value instanceof Array}`);
    console.log(`Object.prototype.toString.call: ${Object.prototype.toString.call(value)}`);
    console.log('---');
});
```

### 结论

- 使用 `typeof` 来检测基本数据类型。
- 使用 `instanceof` 来检测对象的具体类型和自定义类的实例。
- 使用 `Object.prototype.toString.call` 来准确检测所有类型，尤其在需要精确区分复杂类型时。

通过合理结合这三种方法，你可以有效地判断变量的类型，满足不同场景的需求。
---------------------------------------------------

js判断数据类型
在JavaScript中，可以使用多种通用方法来判断数据类型。以下是其中的一些方法：

1. 使用typeof操作符：typeof操作符返回一个字符串，表示操作数的类型。例如：

```javascript
console.log(typeof 42);             // 输出: "number"
console.log(typeof "Hello");        // 输出: "string"
console.log(typeof true);           // 输出: "boolean"
console.log(typeof undefined);      // 输出: "undefined"
console.log(typeof null);           // 输出: "object"（注意此处的特殊情况）
console.log(typeof [1, 2, 3]);      // 输出: "object"
console.log(typeof {name: "John"}); // 输出: "object"
console.log(typeof function() {});  // 输出: "function"
```

2. 使用instanceof操作符：instanceof操作符可以用来检查对象是否属于特定的类或类型。例如：

```javascript
console.log(42 instanceof Number);                      // 输出: false
console.log("Hello" instanceof String);                 // 输出: false
console.log(true instanceof Boolean);                   // 输出: false
console.log(undefined instanceof undefined);            // 抛出错误（instanceof无法判断undefined类型）
console.log(null instanceof Object);                     // 输出: false
console.log([1, 2, 3] instanceof Array);                // 输出: true
console.log({name: "John"} instanceof Object);          // 输出: true
console.log(function() {} instanceof Function);          // 输出: true
```

3. 使用Object.prototype.toString方法：通过调用Object.prototype.toString方法，可以获取一个对象的内部[[Class]]属性，从而判断其类型。例如：

```javascript
console.log(Object.prototype.toString.call(42));             // 输出: "[object Number]"
console.log(Object.prototype.toString.call("Hello"));        // 输出: "[object String]"
console.log(Object.prototype.toString.call(true));           // 输出: "[object Boolean]"
console.log(Object.prototype.toString.call(undefined));      // 输出: "[object Undefined]"
console.log(Object.prototype.toString.call(null));           // 输出: "[object Null]"
console.log(Object.prototype.toString.call([1, 2, 3]));      // 输出: "[object Array]"
console.log(Object.prototype.toString.call({name: "John"})); // 输出: "[object Object]"
console.log(Object.prototype.toString.call(function() {}));  // 输出: "[object Function]"
```

这些通用方法可以根据不同的需求来选择使用。请根据具体场景选择适合的方法来判断数据类型。
-------------------------
在 JavaScript 中，`instanceof` 是一个用于检查对象是否属于特定类或类型的运算符。它用于检查对象是否是由特定的构造函数创建的实例。

语法如下：
```javascript
object instanceof constructor
```

其中，`object` 是要检查的对象，`constructor` 是要检查的构造函数。

`instanceof` 运算符返回一个布尔值，如果对象是指定构造函数的实例，则返回 `true`，否则返回 `false`。

下面是一些示例：
```javascript
var str = "Hello";
var num = 42;
var arr = [1, 2, 3];
var obj = {name: "John"};

console.log(str instanceof String);      // 输出: false
console.log(num instanceof Number);      // 输出: false
console.log(arr instanceof Array);       // 输出: true
console.log(obj instanceof Object);      // 输出: true
console.log(obj instanceof Array);       // 输出: false
console.log(arr instanceof Object);      // 输出: true
console.log(str instanceof Object);      // 输出: false
console.log(num instanceof Object);      // 输出: false
```

需要注意的是，`instanceof` 运算符只能用于检查对象的数据类型，而不能用于检查原始值（如字符串、数字等）的类型。此外，它还会将派生类的实例视为基类的实例。
------------------------
function typesof(type) {
  let typeList = {};
      ['Boolean','Number','String','Function','Array','Date','RegExp','Object','Error','Symbol'].forEach((item) => {
    typeList[`[object ${item}]`] = item.toLowerCase();
  });
  if (type == null) {
    return type + "";
  }
  if (typeof type === "object" || typeof type === "function") {
    return typeList[toString.call(type)] || "object";
  } else {
    return typeof type;
  }
}
 
console.log(typesof([]));                 // 'array'
console.log(typesof(123));                // 'number'
console.log(typesof("123"));              // 'string'
console.log(typesof({}));                 // 'object'
console.log(typesof(true));               // 'boolean'
console.log(typesof(Symbol()));           // 'symbol'
console.log(typesof(new Date()));         // 'date'
console.log(typesof(new RegExp()));       // 'regexp'
console.log(typesof(new Error()));        // 'error'
console.log(typesof(function a(){}));     // 'function'

---------------------------------------
在 JavaScript 中，可以使用 Array.isArray() 方法来判断一个变量是否为数组。

语法如下：
```javascript
Array.isArray(value)
```

其中，value 是要判断的变量。

Array.isArray() 方法返回一个布尔值，如果 value 是一个数组，则返回 true，否则返回 false。

以下是一些示例：
```javascript
var arr = [1, 2, 3];
var obj = {name: "John"};

console.log(Array.isArray(arr));   // 输出: true
console.log(Array.isArray(obj));   // 输出: false
console.log(Array.isArray(42));    // 输出: false
console.log(Array.isArray("Hello")); // 输出: false
```

需要注意的是，Array.isArray() 方法是在 ECMAScript 5 中引入的，如果在较旧的浏览器中使用，可能会遇到兼容性问题。在这种情况下，可以使用其他方法来判断一个变量是否为数组，例如通过判断对象的内部 [[Class]] 属性是否为 "[object Array]"。

以下是一个兼容性更好的判断数组的方法：
```javascript
function isArray(value) {
  return Object.prototype.toString.call(value) === '[object Array]';
}

console.log(isArray(arr));   // 输出: true
console.log(isArray(obj));   // 输出: false
console.log(isArray(42));    // 输出: false
console.log(isArray("Hello")); // 输出: false
```

这个方法通过调用 Object.prototype.toString() 方法来获取变量的内部 [[Class]] 属性，从而判断其类型。然后与 "[object Array]" 进行比较，如果相等，则表示变量是一个数组。
---------------------------------------
为了更好地组织代码并提高可维护性，可以将这两个函数封装到一个类中。以下是一个示例，展示了如何定义一个类来处理表单的序列化和反序列化。

### HTML 结构

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Serialization and Deserialization with Arrays</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="user.name" value="John Doe">
        <input type="email" name="user.email" value="john.doe@example.com">
        <input type="text" name="user.address.street" value="123 Main St">
        <input type="text" name="user.address.city" value="Anytown">
        <input type="text" name="user.address.zip" value="12345">
        <input type="text" name="user.phones[0]" value="123-456-7890">
        <input type="text" name="user.phones[1]" value="987-654-3210">
        <button type="button" onclick="formHandler.serializeForm()">Serialize Form</button>
        <button type="button" onclick="formHandler.deserializeForm()">Deserialize Form</button>
    </form>
    <pre id="output"></pre>

    <script src="script.js"></script>
</body>
</html>
```

### JavaScript 代码（script.js）

```javascript
class FormHandler {
    constructor(formId, outputId) {
        this.form = document.getElementById(formId);
        this.output = document.getElementById(outputId);
    }

    serializeForm() {
        const formData = new FormData(this.form);
        const json = {};

        for (const [key, value] of formData.entries()) {
            const keys = key.split(/[\[\].]+/); // 使用正则表达式分割键
            let current = json;

            for (let i = 0; i < keys.length; i++) {
                const isLast = i === keys.length - 1;
                const k = keys[i];

                if (isLast) {
                    if (current instanceof Array) {
                        current.push(value);
                    } else {
                        current[k] = value;
                    }
                } else {
                    if (!current[k]) {
                        current[k] = /^\d+$/.test(keys[i + 1]) ? [] : {};
                    }
                    current = current[k];
                }
            }
        }

        this.output.textContent = JSON.stringify(json, null, 2);
    }

    deserializeForm(jsonString) {
        const json = JSON.parse(jsonString);

        function setFormValue(form, keys, value) {
            let current = form;
            for (let i = 0; i < keys.length; i++) {
                const k = keys[i];
                if (i === keys.length - 1) {
                    current[k].value = value;
                } else {
                    current = current[k];
                }
            }
        }

        for (const key in json) {
            const value = json[key];
            if (typeof value === 'object') {
                for (const subKey in value) {
                    const subValue = value[subKey];
                    if (typeof subValue === 'object') {
                        if (subValue instanceof Array) {
                            subValue.forEach((item, index) => {
                                setFormValue(this.form.elements, [`${key}.${subKey}`, index], item);
                            });
                        } else {
                            for (const subSubKey in subValue) {
                                const subSubValue = subValue[subSubKey];
                                setFormValue(this.form.elements, [`${key}.${subKey}`, subSubKey], subSubValue);
                            }
                        }
                    } else {
                        setFormValue(this.form.elements, [`${key}.${subKey}`], subValue);
                    }
                }
            } else {
                setFormValue(this.form.elements, [key], value);
            }
        }
    }
}

// 实例化 FormHandler 类
const formHandler = new FormHandler('myForm', 'output');

// 示例 JSON 字符串
const jsonString = `{
    "user": {
        "name": "Jane Doe",
        "email": "jane.doe@example.com",
        "address": {
            "street": "456 Elm St",
            "city": "Othertown",
            "zip": "67890"
        },
        "phones": ["111-222-3333", "444-555-6666"]
    }
}`;

// 反序列化表单
formHandler.deserializeForm(jsonString);
```

### 解释

1. **类定义**:
    - 定义一个 `FormHandler` 类，包含构造函数、`serializeForm` 和 `deserializeForm` 方法。
    - 构造函数接受表单和输出元素的 ID，并初始化相应的 DOM 元素。

2. **序列化方法**:
    - `serializeForm` 方法使用 `FormData` 对象获取表单数据，并构建多级 JSON 对象。
    - 将生成的 JSON 对象转换为字符串并显示在输出元素中。

3. **反序列化方法**:
    - `deserializeForm` 方法接受一个 JSON 字符串，解析为对象，并将值填充到表单元素中。
    - 使用递归或循环处理多级结构和数组。

通过这种方式，你可以将表单的序列化和反序列化逻辑封装到一个类中，使代码更加清晰和易于维护。

================================================================================

`FormHandler` 和 `FormHelper` 是两种用于处理表单数据的工具或类名。它们的具体实现和用途可以根据不同的编程语言和框架有所不同。下面我将以 JavaScript 和 Python 为例，展示如何实现它们：

### JavaScript

#### FormHandler
`FormHandler` 主要负责处理表单的提交、验证和序列化等操作。
```javascript
class FormHandler {
  constructor(formElement) {
    this.form = formElement;
  }

  serialize() {
    const formData = new FormData(this.form);
    const serializedData = {};
    formData.forEach((value, key) => {
      serializedData[key] = value;
    });
    return serializedData;
  }

  async submit(url) {
    const serializedData = this.serialize();
    try {
      const response = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(serializedData)
      });
      return await response.json();
    } catch (error) {
      console.error('Form submission failed:', error);
      throw error;
    }
  }

  validate() {
    // 简单示例，实际可以根据需要进行复杂验证
    for (let element of this.form.elements) {
      if (element.hasAttribute('required') && !element.value) {
        return false;
      }
    }
    return true;
  }
}

// 使用示例
const formElement = document.querySelector('#myForm');
const formHandler = new FormHandler(formElement);

formElement.addEventListener('submit', async (event) => {
  event.preventDefault();
  if (formHandler.validate()) {
    const response = await formHandler.submit('/submit-url');
    console.log('Form submitted successfully:', response);
  } else {
    console.error('Form validation failed.');
  }
});
```

#### FormHelper
`FormHelper` 可以包含一些辅助方法，用于更容易地进行表单操作。
```javascript
class FormHelper {
  static clearForm(formElement) {
    for (let element of formElement.elements) {
      if (element.type !== 'submit' && element.type !== 'button') {
        element.value = '';
      }
    }
  }

  static populateForm(formElement, data) {
    for (let key in data) {
      if (formElement.elements[key]) {
        formElement.elements[key].value = data[key];
      }
    }
  }

  static getFormData(formElement) {
    const formData = new FormData(formElement);
    const data = {};
    formData.forEach((value, key) => {
      data[key] = value;
    });
    return data;
  }
}

// 使用示例
const formElement = document.querySelector('#myForm');
const formData = { name: 'John', age: 30 };

FormHelper.populateForm(formElement, formData);
console.log(FormHelper.getFormData(formElement));
FormHelper.clearForm(formElement);
```

以上是 `FormHandler` 和 `FormHelper` 在 JavaScript 和 Python 中的基本示例。根据实际需求，你可以进行进一步的修改和扩展。