javascript中用reduce高阶函数组装查询

javascript中用reduce高阶函数组装查询表单分隔字符数据

询表单，一次输入多个参数，一般是从网站或者excel中复制，要求前端用空格、逗号或者回车切割参数，传给后端。

这个需求也很常见，之前是先用 split 分隔成数组，再用 map 遍历去掉首尾空格，最后再用 filter 来过滤下空值，但是这样需要遍历两次，如果想只用一个 map 实现，那还得额外定义个变量来储存数据。

其实像这种组装数据直接用 reduce 就能完美解决，一般有的后端要求用户没填的参数就不传，不需要传个空字符串或者空数组这种，那我们reduce的初始值直接给成 undefined 就不会传给后端了，不过注意 push 的时候就要额外判断下了，否则会报错。

用回车、中英文逗号或空格分隔字符正则：/\n+|,|，|\s+/g

利用 reduce 过滤组装数据 demo：

let a=[' ', '1  ', 'zhou', '  ']
let b=a.reduce((m, n)=> {
  if (n) {
    const txt=n.trim()
    if (txt) m.push(txt)
  }
  return m
}, [])
console.log(b) // ['1', 'zhou']

项目中使用完整示例代码：

我们在浏览网页的时候，经常需要向服务器提交信息，并让后台程序处理。浏览器中使用 GET 和 POST 方法向服务器提交数据。

GET 方法

GET方法将请求的编码信息添加在网址后面，网址与编码信息通过"?"号分隔。如下所示：

http://www.runoob.com/hello?key1=value1&key2=value2

GET方法是浏览器默认传递参数的方法，一些敏感信息，如密码等建议不使用GET方法。

用get时，传输数据的大小有限制（注意不是参数的个数有限制），最大为1024字节。

POST 方法

一些敏感信息，如密码等我们可以通过POST方法传递，POST提交数据是隐式的。

POST提交数据是不可见的，GET是通过在url里面传递的（可以看一下你浏览器的地址栏）。

JSP使用getParameter()来获得传递的参数，getInputStream()方法用来处理客户端的二进制数据流的请求。

JSP 读取表单数据

getParameter(): 使用 request.getParameter() 方法来获取表单参数的值。
getParameterValues(): 获得如checkbox类（名字相同，但值有多个）的数据。接收数组变量，如checkbox类型
getParameterNames():该方法可以取得所有变量的名称，该方法返回一个Emumeration。
getInputStream():调用此方法来读取来自客户端的二进制数据流。

使用URL的 GET 方法实例

以下是一个简单的URL,并使用GET方法来传递URL中的参数：

http://localhost:8080/testjsp/main.jsp?name=菜鸟教程&url=http://ww.runoob.com

testjsp 为项目地址。

以下是 main.jsp 文件的JSP程序用于处理客户端提交的表单数据，我们使用getParameter()方法来获取提交的数据：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ page import="java.io.*,java.util.*" %>

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>使用 GET 方法读取数据</h1>

<ul>

<%=request.getParameter("name")%>

</p></li>

<%=request.getParameter("url")%>

</p></li>

</ul>

</body>

</html>

接下来我们通过浏览器访问 http://localhost:8080/testjsp/main.jsp?name=菜鸟教程&url=http://ww.runoob.com 输出结果如下所示：

使用表单的 GET 方法实例

以下是一个简单的 HTML 表单，该表单通过GET方法将客户端数据提交到 main.jsp 文件中：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

站点名: <input type="text" name="name">

<br />

网址: <input type="text" name="url" />

</form>

</body>

</html>

将以上HTML代码保存到test.htm文件中。将该文件放置于当前jsp项目的 WebContent 目录下（与 main.jsp 同一个目录）。

通过访问 http://localhost:8080/testjsp/test.html 提交表单数据到 main.jsp 文件，演示 Gif 图如下所示：

在 "站点名" 与 "网址" 两个表单中填入信息，并点击 "提交" 按钮，它将输出结果。

使用表单的 POST 方法实例

接下来让我们使用POST方法来传递表单数据，修改main.jsp与Hello.htm文件代码，如下所示：

main.jsp文件代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ page import="java.io.*,java.util.*" %>

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>使用 POST 方法读取数据</h1>

<ul>

// 解决中文乱码的问题

String name=new String((request.getParameter("name")).getBytes("ISO-8859-1"),"UTF-8");

<%=name%>

</p></li>

<%=request.getParameter("url")%>

</p></li>

</ul>

</body>

</html>

代码中我们使用 new String((request.getParameter("name")).getBytes("ISO-8859-1"),"UTF-8")来转换编码，防止中文乱码的发生。

以下是test.htm修改后的代码：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

站点名: <input type="text" name="name">

<br />

网址: <input type="text" name="url" />

</form>

</body>

</html>

通过访问 http://localhost:8080/testjsp/test.html 提交表单数据到 main.jsp 文件，演示 Gif 图如下所示：

传递 Checkbox 数据到JSP程序

复选框 checkbox 可以传递一个甚至多个数据。

以下是一个简单的HTML代码，并将代码保存在test.htm文件中：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<input type="checkbox" name="google" checked="checked" /> Google

<input type="checkbox" name="runoob" /> 菜鸟教程

淘宝

</form>

</body>

</html>

以上代码在浏览器访问如下所示：

以下为main.jsp文件代码，用于处理复选框数据：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ page import="java.io.*,java.util.*" %>

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>从复选框中读取数据</h1>

<ul>

<li><p><b>Google 是否选中:</b>

<%=request.getParameter("google")%>

</p></li>

<li><p><b>菜鸟教程是否选中:</b>

<%=request.getParameter("runoob")%>

</p></li>

<li><p><b>淘宝是否选中:</b>

<%=request.getParameter("taobao")%>

</p></li>

</ul>

</body>

</html>

通过访问 http://localhost:8080/testjsp/test.html 提交表单数据到 main.jsp 文件，演示 Gif 图如下所示：

读取所有表单参数

以下我们将使用 HttpServletRequest 的 getParameterNames() 来读取所有表单参数,该方法可以取得所有变量的名称，该方法返回一个枚举。

一旦我们有了一个 Enumeration（枚举），我们就可以调用 hasMoreElements() 方法来确定是否还有元素，以及使用nextElement（）方法来获得每个参数的名称。

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ page import="java.io.*,java.util.*" %>

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>读取所有表单参数</h1>

</tr>

Enumeration paramNames=request.getParameterNames();

while(paramNames.hasMoreElements()) {

String paramName=(String)paramNames.nextElement();

out.print("<tr><td>" + paramName + "</td>\n");

String paramValue=request.getParameter(paramName);

out.println("<td> " + paramValue + "</td></tr>\n");

}

</table>

</body>

</html>

以下是test.htm文件的内容:

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<input type="checkbox" name="google" checked="checked" /> Google

<input type="checkbox" name="runoob" /> 菜鸟教程

淘宝

</form>

</body>

</html>

现在我们通过浏览器访问 test.htm 文件提交数据，输出结果如下：

通过访问 http://localhost:8080/testjsp/test.html 提交表单数据到 main.jsp 文件，演示 Gif 图如下所示：

你可以尝试使用以上的JSP代码读取其它对象，如文本框，单选按钮或下拉框等等其他形式的数据。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

个表单的form标签是必不可少的，所有的表单元素都应该被他包含。一个页面可能有多个表单，就需要对每个表单的区域进行分组，防止表单信息混杂。

目标

表单的完整结构？
表单内如何进行元素分组？

表单

可以在一个网页中收集用户的数据，比如填写用户注册数据、留言板、评论等内容。

Form标签

一个表单的form标签是必不可少的，所有的表单元素都应该被他包含。

<form >
	<input type="text" />			
</form>

一个网页可能会有多个表单，就需要声明每个表单的区域，防止表单信息混杂。

以下就是两个表单，他们之间的表单元素就会跟随自己的表单。

两个表单

分组

有时候，表单内的元素过多，就需要将他们进行分类。

fieldset标签可以将表单内的相关元素分组。

legend标签是为 fieldset元素定义标题。

<fieldset >
	<legend>学生信息</legend>
	姓名：<input type="text" /><br>
	班级：<input type="text" /><br>			
</fieldset>

分组

分组完成

总结

思维导图

在线咨询

上一篇：JavaScript 回调
下一篇：走近核科学技术尔雅章节

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

javascript中用reduce高阶函数组装查询

表单

Form标签

分组

总结

您的项目需求