在前端开发中，过滤操作是常见的数据处理方式之一。ES6 中的解构赋值和箭头函数可以帮助我们更简洁高效地完成过滤操作。在本文中，我们将以实例代码的形式详细介绍使用 ES6 的解构赋值和箭头函数实现快速过滤的方法，希望能对大家有所帮助。
使用解构赋值过滤
解构赋值是 ES6 中新增的语法，可以将数组或对象等数据结构中的值赋给变量。使用解构赋值可以快速获取数组或对象中所需的属性或值，从而方便进行过滤操作。
过滤数组
假设我们有一个包含多个人的数组，每个人包含姓名和年龄两个属性。我们要从中筛选出年龄大于 18 岁的成年人。使用解构赋值可以轻松地实现这一操作：
-- -------------------- ---- ------- ----- ------ - - - ----- ----- ---- -- -- - ----- ----- ---- -- -- - ----- ----- ---- -- -- - ----- ----- ---- -- -- -- ----- ------ - ---------------- --- -- -- --- - ---- -------------------- -- -- ----- ----- ---- -- -- - ----- ----- ---- -- -- - ----- ----- ---- -- --
上述代码中，我们使用了数组的 filter() 方法，其返回值是一个新数组，包含满足条件的所有元素。参数 ({ age }) => age > 18 表示使用解构赋值获取每个元素的 age 属性并判断其是否大于 18，符合条件的元素被添加到新数组中。
过滤对象数组
如果数组中的元素是对象，我们仍然可以使用解构赋值来过滤。假设我们有一个包含多个电影的数组，每个电影包含名称和上映时间两个属性。我们要从中筛选出上映时间在 2010 年之后的电影。使用解构赋值可以轻松地实现这一操作：
-- -------------------- ---- ------- ----- ------ - - - ------ ------ ------ --- --- -------------- ------- ------------ ------------ -- - ------ ---- ---------- ------------ ------------ -- - ------ ---- ------ ------- ------------ ------------ -- - ------ --------------- ------------ ------------ -- -- ----- --------- - ---------------- ----------- -- -- --- ------------------------------- - ------ ----------------------- -- -- ------ ---- ---------- ------------ ------------ -- - ------ ---- ------ ------- ------------ ------------ -- - ------ --------------- ------------ ------------ --
上述代码中，对于每个电影，我们都使用解构赋值获取其 releaseDate 属性，并将其转换为日期类型。然后使用 getFullYear() 方法获取该日期对应的年份，再与 2010 进行比较，满足条件的电影被添加到新数组中。
使用箭头函数过滤
箭头函数是 ES6 中另一个新增的语法，其定义方式更为简洁，执行效率也更高。结合解构赋值，使用箭头函数可以让过滤代码更加简洁优雅。
过滤数组
继续以多个人的数组为例，我们要从中筛选出身份证号码末尾为 5 的人。使用箭头函数可以轻松地实现这一操作：
-- -------------------- ---- ------- ----- ------ - - - ----- ----- ----- ----------------- -- - ----- ----- ----- ----------------- -- - ----- ----- ----- ----------------- -- - ----- ----- ----- ----------------- -- -- ----- -------- - ---------------- ---- -- -- -------------------- ---------------------- -- -- ----- ----- ----- ----------------- -- - ----- ----- ----- ----------------- --
上述代码中，我们使用了字符串的 endsWith() 方法，其返回值是一个布尔类型，表示该字符串是否以指定的字符串结尾。参数 ({ idNo }) => idNo.endsWith('5') 表示使用解构赋值获取每个元素的 idNo 属性并判断其是否以 5 结尾，符合条件的元素被添加到新数组中。
过滤对象数组
如果数组中的元素是对象，我们仍然可以使用箭头函数来过滤。以多个电影的数组为例，我们要从中筛选出时长超过 120 分钟的电影。使用箭头函数可以轻松地实现这一操作：
-- -------------------- ---- ------- ----- ------ - - - ------ ------ ------ --- --- -------------- ------- --------- --- -- - ------ ---- ---------- --------- --- -- - ------ ---- ------ ------- --------- --- -- - ------ --------------- --------- --- -- -- ----- ------- - ---------------- -------- -- -- -------- - ----- --------------------- -- -- ------ ------ ------ --- --- -------------- ------- --------- --- -- - ------ ---- ---------- --------- --- -- - ------ ---- ------ ------- --------- --- -- - ------ --------------- --------- --- --
上述代码中，对于每个电影，我们都使用解构赋值获取其 duration 属性，并将其与 120 进行比较，符合条件的电影被添加到新数组中。
总结
使用 ES6 的解构赋值和箭头函数可以快速方便地完成过滤操作，极大提高了代码的简洁性和可读性，也减少了代码的冗余度。希望本文能够对大家了解和掌握这两种语法有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647e986048841e9894e4a5cf