14-js的高级函数filter

最新推荐文章于 2022-09-01 11:44:34 发布
最新推荐文章于 2022-09-01 11:44:34 发布
阅读量107 收藏
点赞数
分类专栏： 前端 # js 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43472934/article/details/111876205
版权
前端 同时被 2 个专栏收录
40 篇文章 0 订阅
订阅专栏
js
3 篇文章 0 订阅
订阅专栏

需求：取出所有小于100的数字

使用普通for循环

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>

    // 需求：取出所有小于100的数字
    const nums=[34,4553,345,23,95,80,842,22,45]
    const newArray=[];
    nums.forEach(element => {
      if(element<100){
        newArray.push(element);
      }
    });
    console.log(newArray);
  </script>
</body>
</html>

使用高阶函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // filter
    // filter中的回调函数有一个要求：必须返回一个boolean值
    // true:当返回true,函数内部会自动将这次回调的n加入到新的数组中
    // false:当返回false时，函数内部会过滤到这次的n值

    // 需求：取出所有小于100的数字
    const nums=[34,4553,345,23,95,80,842,22,45]
    const arr=nums.filter(function(n){
      return n<100;
    })
    console.log(arr);
  </script>
</body>
</html>
搞钱自律
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
day03-js高级资料.zip
10-01
"day03-js高级资料.zip"这个压缩包很可能是提供了一系列关于JavaScript高级特性和技术的教程或参考资料。从标签"js"我们可以推断，这份资料专注于JavaScript的学习与深入探讨。 在JavaScript的世界里，"高级"通常...
javascript高阶函数----filter()
kesilll的博客
04-10 229
filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。 和map()类似，filter()也接受一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是false还是true决定去除还是保留。 例如，在Array中保留偶数，去除奇数： var num = [1,2,3,4,5,6]; var result = nnum...
JS_高阶函数（filter）
weixin_34195142的博客
07-18 130
1 //2017/7/18 2 3 //高阶函数：filter. 4 //filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃...
JavaScript 高阶函数filter
m0_37293343的博客
11-10 218
1.回调函数 filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身： var arr = ['A', 'B', 'C']; var r = arr.filter(function (element, index, self) { console.log(element); /
js高阶函数之filter
笙
04-17 283
作用: 把Array的某些元素过滤掉，然后返回剩下的元素。 接收一个函数。filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。 // 去偶数 var arr = [1, 2, 4, 5, 6, 9, 10, 15]; var r = arr.filter(function (x) { return x % 2 !== 0; }...
js三大常用高阶函数(filter,map,reduce)的使用
m0_54000752的博客
09-01 460
既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。表示上一次调用回调时的返回值(有初始值第一次回调prev是为初始值init的值 第二次就为闪一次回调的返回值);表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。以后高阶函数用的更多的写法 上面的写法还是过于臃肿 不利已观看。函数式编程写法 (第一公民：函数)表示当前正在处理的数组元素；..
day03-js高级讲义.zip
10-01
JavaScript（简称JS）是一种广泛应用于Web开发的轻量级脚本语言，主要在浏览器环境中运行，为网页添加交互性。本讲义将深入探讨JS的高级特性，旨在帮助开发者提升技能，实现更复杂的前端功能。 1. **闭包**：闭包是...
day01-js高级第一天课件复习资料.rar
04-08
在“day01-js高级第一天课件复习资料.rar”这个压缩包中，我们推测包含的是第一天学习JavaScript高级部分的课程内容，适用于已经有一定基础，希望深入学习JS的同学。以下是对这些高级知识点的详细阐述： 1. **原型...
JavaScript高级：SoftUni-JavaScript高级实验室练习
02-16
4. **高级函数**：包括高阶函数（如map、reduce、filter等）、箭头函数、函数表达式和函数作为返回值等。理解它们的用法可以提高代码的简洁性和可读性。 5. **模块(Module System)**：CommonJS、ES6模块（import/...
js-utils:日常 JavaScript 函数工具库
05-07
通过阅读源码，开发者可以了解每个函数的具体实现，这有助于学习和理解JavaScript的高级用法。同时，测试用例能帮助确保库的稳定性和可靠性，文档则为使用者提供详细的使用指南。 总的来说，"js-utils"这样的工具库...
JS高级函数--------filter、sort
优雅的博客
01-17 1199
filter filter()方法：用于把Array中的某些元素过滤掉，然后返回剩下的元素 filter()也接受一个函数，把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。 arr.filter(function(ele,index,arr){ }); filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数ele，表示
js高阶函数 - filter/map/reduce
weixin_39288299的博客
07-05 261
高阶函数 高阶函数 — 一个函数接收另一个函数作为参数的函数 filter() — 过滤 filter中的回调函数必须返回一个布尔值，当返回true，函数内部会将回调的n加入到新的数组中，当返回false时，则把n过滤掉。 map() — 映射 对n进行处理，返回处理后的n加入到新数组中 reduce() – 汇总 至少传两个值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
javascript中的filter函数
a_leading的博客
10-13 3873
最近在正在学习vue，看到示例中网格组件的时候，被一段嵌套代码搞的晕头转向，多方求助（segmentful提问）之后才将将理解，特此记录，以备后续查询：查看全部代码点击此处部分代码片段：data = data.filter(function (row) { return Object.keys(row).some(function (key) { return String(
js高级，es6新增 filter()过滤器 ，map（）映射 ， reduce() 汇总。 使用方法，参数解释。使用场景
F_fengzilin的博客
05-03 884
文章目录#1.filter(),map(),reduce()使用的场景都是数组对象#1.1filter()中的返回值，参数含义#1.2map()中的返回值，参数含义#1.3reduce()中的返回值，参数含义#2.filter()+map()+reduce()结合使用案例#3.filter()+map()+reduce()优势#4.如果这篇文章对你有帮助，请点个赞吧，收藏也可以哦 #1.filter(),map(),reduce()使用的场景都是数组对象 例如，我们很多时候操作数组的时候会有很繁琐，经过一系
js filter() es6 方法总结
热门推荐
bossxu_的博客
06-21 9万+
1.创建一个数组，判断数组中是否存在某个值 var newarr = [ { num: 1, val: 'ceshi', flag: 'aa' }, { num: 2, val: 'ceshi2', flag: 'aa2' } ] console.log(newarr.filter(item =&gt; item.num===2 )) 2.去掉空数组空字符串、unde...
32-vue的父传子props属性基本使用（对象形式）可类型限制，验证，默认值
weixin_43472934的博客
01-10 2597
验证支持的类型 String Number Boolean Array Object Date Function Symbol 1、类型限制（单值） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta .
jQuery删除元素---remove()与empty()
weixin_43472934的博客
05-06 757
jQuery删除元素—remove()与empty() remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 举例：remove() <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").empty(); }); }); ...
jQuery添加元素--append()、prepend()、after()、before()以及它们的区别
weixin_43472934的博客
05-06 393
jQuery添加元素–append()、prepend()、after()、before() append() - 在被选元素的结尾插入内容 append()prepend() - 在被选元素的开头插入内容 append()after() - 在被选元素之后插入内容 append()before() - 在被选元素之前插入内容 举例：append() <script> $(d...
jQuery遍历--祖先、后代、同胞
weixin_43472934的博客
05-06 375
jQuery遍历 祖先 1、parent()—返回所有被选元素的直接父元素。 2、parents()—返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。html也算。 3、parentsUntil—返回介于两个给定元素之间的所有祖先元素。不包含两个给定的元素 　 下面的例子返回介于<span> 与<div> 元素之间的所有祖先元素： $(documen...
js中filter的高级用法
最新发布
05-11
在 JavaScript 中，`filter()` 方法用于过滤数组中的元素，返回一个新的数组，新数组中的元素是符合指定条件的数组元素。 以下是 `filter()` 的基本用法: ```javascript const arr = [1, 2, 3, 4, 5]; const filteredArr = arr.filter((num) => { return num % 2 === 0; }); console.log(filteredArr); // [2, 4] ``` 上面的代码中，`filter()` 方法遍历了原数组 `arr` 中的元素，判断每个元素是否能被 2 整除，如果可以，则将其保存到新数组 `filteredArr` 中。 除了基本用法外，`filter()` 方法还有一些高级用法，下面让我们来一一介绍。 ### 1. 使用箭头函数简化语法 当回调函数只有一行代码时，可以使用箭头函数简化语法。例如： ```javascript const arr = [1, 2, 3, 4, 5]; const filteredArr = arr.filter(num => num % 2 === 0); console.log(filteredArr); // [2, 4] ``` ### 2. 使用对象数组进行筛选 如果要对一个对象数组进行筛选，可以通过访问对象的属性来实现。例如： ```javascript const people = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 }, ]; const filteredPeople = people.filter(person => person.age > 30); console.log(filteredPeople); // [{ name: 'Charlie', age: 35 }] ``` ### 3. 使用正则表达式进行筛选 如果要对一个字符串数组进行筛选，可以使用正则表达式来实现。例如： ```javascript const arr = ['apple', 'banana', 'cherry', 'date']; const filteredArr = arr.filter(str => /^a/.test(str)); console.log(filteredArr); // ['apple'] ``` ### 4. 使用第二个参数指定回调函数中的 `this` 值 `filter()` 方法的第二个参数可以指定回调函数中 `this` 的值。例如： ```javascript const obj = { minAge: 30, people: [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 }, ], filterPeople: function() { return this.people.filter(function(person) { return person.age >= this.minAge; }, this); }, }; console.log(obj.filterPeople()); // [{ name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 }] ``` 在上面的例子中，我们使用了 `filter()` 的第二个参数来指定回调函数中的 `this` 值为 `obj` 对象本身。这样，在回调函数中就可以访问到 `obj` 对象的属性了。 ### 5. 使用 `map()` 和 `filter()` 实现链式操作 由于 `filter()` 方法返回一个新数组，因此可以与 `map()` 方法结合使用，实现链式操作。例如： ```javascript const arr = [1, 2, 3, 4, 5]; const result = arr .filter(num => num % 2 === 0) .map(num => num * 2); console.log(result); // [4, 8] ``` 在上面的例子中，我们先使用 `filter()` 方法筛选出原数组中的偶数，然后再使用 `map()` 方法将每个偶数乘以 2，最终返回一个新数组 `[4, 8]`。 希望这些高级用法能够对你理解 `filter()` 方法有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值