网站首页 > 知识剖析 正文
// 1 filter 过滤
// filter中的函数有一个要求,必须返回一个boolean值,
// 当返回是true时,函数内部会自动将这次回调的n加入到新的数组中
// 当返回是false时, 函数内部会过滤掉这次的n。
// 例:取数组中小于100的数。
const nums = [10,20,30,40,100,120,200];
let newNums = nums.filter(function(n){
return n < 100;
});
console.log(newNums);
// 2 map 将数据进行变化,可以省去循环的过程
let newNum2 = newNums.map(function(n){
return n*2;
});
// 3 reduce函数的使用
// 对数组中的内容进行汇总
// 可以传两个参数,function(preValue,n){} = 第一个参数, 0 = 第二个参数
// 现在newNums有四个值[10,20,30,40]
// 进行四次循环,
// 第一次循环 preValue=0,n=10
// 第二次循环 如果返回100,那preValue就=100, n=20
// 第三次循环 如果返回100,那preValue就=100, n=30
// 第四次循环 如果返回100,那preValue就=100, n=40
// preValue就是得到上一次函数的返回值
newNums.reduce(function(preValue,n){
return 100
},0);
//例
// 第一次循环 preValue=0,n=10
// 第二次循环 preValue=10,n=20
// 第三次循环 preValue=30,n=30
// 第四次循环 preValue=60,n=40,最后再相加=100
let total = newNums.reduce(function(preValue,n){
return preValue+n;
},0); // 1000
// 我们将上面三个函数写在一起,最后=100
let total = nums.filter(function(n){
return n < 100
}).map(function(n){
return n * 2
}).reduce(function(preValue,n){
return preValue+n;
},0);
// 最后简写
let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre,n) => pre + n);
猜你喜欢
- 2024-11-14 vue.js正确使用百度地图的方案 vue百度地图自定义控件
- 2024-11-14 七爪源码:如何在 JavaScript 中将 JSON 转换为地图
- 2024-11-14 在地图上创建热力图的方法 怎么用热力图选址
- 2024-11-14 快速了解 ES6 的Map与WeakMap es6 map使用场景
- 2024-11-14 Vue3 + TS + Leafletjs 打造企业级原神大地图
- 2024-11-14 好东西一起用,Cesium.js真是让3D地图尖叫的神奇框架!
- 2024-11-14 为 Next.js 项目创建站点地图文件
- 2024-11-14 JavaScript 轻松获取 Map 中的某个 key
- 2024-11-14 何时使用 Map 来代替普通的 JS 对象
- 2024-11-14 看了几十篇论文实现了个专业算法,用threejs做了个人员定位系统
- 04-29php开发者composer使用看这一篇就够了
- 04-29引用和变量声明在不同语言中的实作
- 04-29PHP 没你想的那么差
- 04-29Ubuntu linux 上的 Nginx 和 Php 安装
- 04-29CentOS下通过yum搭建lnmp(单版本PHP)
- 04-29为什么 PHP8 是个高性能版本
- 04-29PHP8函数包含文件-PHP8知识详解
- 04-29使用无参数函数进行命令执行
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)