es6数组方法find()、findIndex() filter()的总结
find()查找符合条件数组的元素(只能够找出第一个符合条件的)
// 查找出大33的元素.
// find查找第一个符合条件的数组元素(只查找出第一个 找不到返回undefined)
// 它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件,当条件成立为true时,返回该元素。
// 回调函数有三个参数。value:当前的数组元素。index:当前索引值。arr:被查找的数组。
let arr = [11, 22, 33, 44, 45, 66, 77, 88];
let firstArr = arr.find((v) => {
return v > 34
});
console.log(firstArr); //输出44
// 找到下标为1的那个元素
let conarr = [1, 3, 4, 5, 6, 7, 8, 9, 10];
let newArr = conarr.find((value, index, arr) => {
return index == 1;
})
console.log(newArr); //3
查找符合数组元素的下标(只能够找出第一个符合条件的)
// findIndex()与find()的使用方法相同,只是当条件为true时findIndex()返回的是索引值,而find()返回的是元素
// 如果没有符合条件元素时findIndex()返回的是-1,
// 注意find()方法返回的是 undefined
let arr2 = [11, 22, 33];
let newarr1 = arr2.findIndex((v, i, arr) => {
return v > 22;
})
console.log(newarr1) // 输出小标是2
filter()查找符合条件的元素数组,(返回多个只要符合条件)
// filter()与find()使用方法也相同。同样都接收三个参数。不同的地方在于返回值。
// filter()返回的是符合条件的元素数组。通常用于过滤
// find()只返回第一个满足条件的元素。如果条件不满足,返回的是undefined. 满足条件返回第一个元素(只返回一个)
//filter()条件不满足返回的是一个空数组,而find()返回的是undefined,满足条件返回符合元素的数组(返回多个)
let arr3 = [{
book: "三国演义",
id: "180001",
price: 44,
},
{
book: "幻城",
id: "180002",
price: 30
},
{
book: "西游记",
id: "180003",
price: 41
}
];
let newarr4 = arr3.filter((v, i, arr) => {
return v.price > 40
})
console.log(newarr4)
在一个数组中删除某一个特定的值。如在下面的数组中删除小明。返回一个新的数组
let arr5 = ['小明', '张三', '李四', '王武'];
let arrindex6 = arr5.findIndex((v, i, arr) => {
return v == "小明"
});
console.log(arrindex6); //输出为0,只能够找到一个
arr5.splice(arrindex6, 1); //注意呀!数组的很多基本方法,会改变原数组,同时返回被删除的那个元素。
console.log(arr5);
// ==============
// 可以将上面的代码优化一下
let arr6 = ['小明', '张三', '李四', '王武'];
arr6.splice(arr6.findIndex(v => v == "小明"), 1);
console.log(arr6);
返回被删除的那个元素
arr7= ['小明', '张三', '李四', '王武'];
console.log(arr7.splice(0,1));//返回被删除的那个元素
注意和上面的区别
arr8 = ['小明', '张三', '李四', '王武'];
arr8.splice(0, 1); //改变原数组。返回被删除的那个元素
console.log(arr8);// ["张三", "李四", "王武"]
es6数组方法find()、findIndex() filter()的总结的更多相关文章
- ES6 数组方法 forEach map filter find every some reduce
1. forEach const colors = ['red', 'blue', 'green'] colors.forEach(function (params) { console.log(pa ...
- ES6 数组方法拓展
ES6 数组方法拓展 1.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括E ...
- ES6数组方法
ES6数组方法 以下方法添加到了Array.prototype对象上(isArray除外) indexOf 类似字符串的indexOf()方法 stringObject.indexOf(searchv ...
- ES6新增的常用数组方法(forEach,map,filter,every,some)
ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...
- ES5和ES6数组方法
ES5 方法 indexOf和lastIndexOf 都接受两个参数:查找的值.查找起始位置不存在,返回 -1 :存在,返回位置.indexOf 是从前往后查找, lastIndexOf 是从后往前查 ...
- ES6数组方法总结
关于数组中forEach() .map().filter().reduce().some().every()的总结 1. forEach() let array = [1,2,3,4]; array. ...
- js数组方法forEach,map,filter,every,some实现
Array.prototype.map = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "fun ...
- js 字符串方法 和 数组方法总览
字符串方法 search() 方法搜索特定值的字符串,并返回匹配的位置. 相比于indexOf(),search()可以设置更强大的搜索值(正则表 ...
- ES6数组的扩展--Array.from()和Array.of()
一. Array.from() : 将伪数组对象或可遍历对象转换为真数组 1.何为伪数组 如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为"类 ...
- JavaScript数组方法--filter、find、findIndex
继续数组方法,今天应该到filter了. filter:filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素. 使用: var words = ['spray', 'lim ...
随机推荐
- CentOS7与centOS8的抉择
目前国内各大云服务器的默认centos 系统版本还是7,vultr,centos只有8了 官网,下载,默认也是8,作为本地主机玩的服务器,还是试一下centos8 国外下载之前版本,下载链接: 官网默 ...
- Jenkins Pipeline 流水线 - 上传文件 Publish over SSH 执行命令
Jenkins Pipeline 流水线 - 上传文件 Publish over SSH 执行命令 Jenkins插件安装 Publish over SSH 系统配置 生成代码 sshPublishe ...
- git一个空分支
如果不想要当前创建的分支拥有创建节点之前的内容,就需要一个完全为空的分支,可以参考知乎这篇文章. 使用git checkout -b命令创建的分支是有父节点的,这意味着新的分支包含了历史提交,所以我们 ...
- QE01/QA11/QA02屏幕增强
1.业务需求 需要对来料检验增加"合格数量"和"不合格数量"字段,涉及三个增强开发 2.QE01\QE02\QE03\QE51N屏幕增强 增强表 增强点BADI ...
- Step by step guide to becoming a C++ developer in 2023
https://roadmap.sh/cpp https://roadmap.sh/backend
- Codeforces Round #738 (Div. 2) (A~E)
比赛链接:Here 1559A. Mocha and Math 题意: 给定一个区间,选择区间内的值执行 & 操作使得区间最大值最小化 观察样例发现:令 x = (1 << 30) ...
- 《深入理解计算机系统》实验五 —— Perfom Lab
本次实验是CSAPP的第5个实验,这次实验主要是让我们熟悉如何优化程序,如何写出更具有效率的代码.通过这次实验,我们可以更好的理解计算机的工作原理,在以后编写代码时,具有能结合软硬件思考的能力. @ ...
- vue 路由跳转页面不刷新
vue 路由跳转页面不刷新 点击打开视频讲解地址在router-view 里边添加 :key="$route.fullPath"
- vue.draggable中文文档
http://www.itxst.com/vue-draggable/fiamvqam.html https://blog.csdn.net/a772116804/article/details/10 ...
- JVM简单概述
一.内存模型&分区 Java虚拟机在运行Java程序时,会管理着一块内存区域:运行时数据区 在运行时数据区里,会根据用途进行划分为以下模块: 1.Java虚拟机栈 2.本地方法栈 3.Java ...