filter笔记

原文是掘金看到的,非常好,作为学习笔记记录下来。https://juejin.im/post/5a5f3eaf518825733201a6a7

filter为数组中的每个元素调用一次callback函数,并利用所有使得“callback返回true或等价于true的值的元素”,创建一个新的数组。

var new_array = arr.filter(callback[,thisArg])

基础用法:

var spread = [12,5,6,130,44]
//筛选条件符合大于10的新数组
var filtered = spread.filter(n=>n>=10)
console.log('filtered',filtered)//=>[12,130,44]

进阶用法:

数组对象的键名/键值搜索

var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false },
  { 'user': 'ared',   'age': 24, 'active': false },
  { 'user': 'ered',   'age': 80, 'active': false },
  { 'abc': 'ered',   'age': 80, 'active': false }
]
// 筛选 age等于40或者age等于24的 数组对象
var filtered = users.filter(n => n.age===40 || n.age===24)
console.log('filter后的键名', filtered)   
// => [{user: "fred", age: 40, active: false},{user: "ared", age: 24, active: false}]

高阶用法:

(1)数组去重

var spread = [12,5,8,8,130,44,130]
var filtered = spread.filter((item,idx,arr) => {
    return arr.indexOf(item) === idx;
})
// 筛选符合条件找到的第一个索引值等于当前索引值的数组
console.log('数组去重结果',filtered)

现在数组去重有ES6的新语法Set方法来解决更方便

var spread = [12,5,8,130,44,130]
var setFun = [...new Set(spread)]
console.log('数组去重结果',setFun)

字符串去重方法

var arr = [12,5,8,8,130,44,130,'a','b','a']
var obj = {}
arr.forEach(function(item){
    obj[item]=item;
})
Objeck.keys(obj)
cosole.log(Object.keys(obj))

数组中的空字符串删掉

var spread = ['A','','B',null,undefined,'C','  ']
var filtered = spread.filter((item,idx,arr) => {
    return item && item.trim()
})
cosole.log('数组中的空字符串删掉',filtered) //=>['A','B','C']

充分利用callback返回true的特点当做“过滤条件”函数,产生新的数组

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要在Spring Boot项目中添加LayUI的依赖,可以在pom.xml文件中添加如下配置: ```xml <dependency> <groupId>com.betteruse</groupId> <artifactId>layui-spring-boot-starter</artifactId> <version>1.0.0</version> </dependency> ``` 接下来,你需要编写一个用户实体类,可以使用JPA或Mybatis等框架进行持久化操作。以下是一个简单的用户实体类: ```java @Entity @Table(name = "user") public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; private String username; private String password; private String email; // getter和setter方法省略 } ``` 接下来,你需要编写一个控制器类来处理用户注册请求。以下是一个简单的示例: ```java @Controller public class UserController { @Autowired private UserService userService; @GetMapping("/register") public String showRegisterForm() { return "register"; } @PostMapping("/register") public String register(User user) { userService.save(user); return "redirect:/login"; } } ``` 在上面的示例中,我们使用了@GetMapping和@PostMapping注解来分别处理GET和POST请求。showRegisterForm方法返回的是注册页面的模板名称,register方法接收一个User对象,将其保存到数据库中,并重定向到登录页面。 最后,你需要编写一个注册页面,可以使用LayUI的表单组件来实现。以下是一个简单的示例: ```html <div class="layui-container"> <form class="layui-form" action="/register" method="post"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">邮箱</label> <div class="layui-input-block"> <input type="email" name="email" required lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="register">注册</button> </div> </div> </form> </div> ``` 在上面的示例中,我们使用了LayUI的表单组件来实现一个简单的注册表单。其中,lay-verify属性用于设置表单验证规则,lay-submit属性用于设置提交按钮,并且通过lay-filter属性设置了表单提交事件的名称。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值