解析get请求时以对象方式提交的表单数据
# 1.解析get请求时以对象方式提交的表单数据
**知识点**
1. 对象遍历:`for ~ in `
2. 参数编码: `encodeURIComponent()`
-----------------------------------------------------
## 1. 对象遍历
- `for ~ in `
- 过滤掉原型继承与方法属性
-----------------------------------------------------
## 2. 参数编码
- `encodeURIComponent()`
- 对URL中的参数部分进行编码处理
-----------------------------------------------------
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解析get请求时以对象方式提交的表单数据</title>
</head>
<body>
<script>
// 在前后端的交互过程中,表单中的数据,大多是以对象方式表示
let data = {
name: 'admin',
age: 30,
course: 'javascript'
};
// 转换成: name=admin&age=30&course=javascript
function encodeFormData(data) {
if (!data) return '';
let pairs = []; // 配对容器
for (let name in data) {
// 过滤掉继承属性和函数属性,确保是自有属性,且没有方法(即函数类型的属性)
if (data.hasOwnProperty(name) && typeof data[name] !== 'function') {
// 将值转为字符串
let value = data[name].toString();
// encodeURIComponent()对URL中的键值对进行编码
name = encodeURIComponent(name.replace('%20', '+'));
value = encodeURIComponent(value.replace('%20', '+'));
// 将转换好的键值对,存入容器中
pairs.push(name + '=' + value);
}
}
return pairs.join('&'); // 将键值对之间用'&'拼接后返回
}
let params = encodeFormData(data);
console.log(params);
</script>
</body>
</html>
```
