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 ...
随机推荐
- A/B测试助力游戏业务增长
更多技术交流.求职机会.试用福利,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 中国游戏行业发展现状及挑战 国内市场增长乏力 2021年游戏销售收入2965.13亿元,同比增长6.4% ...
- 开启一个 A/B 实验到底有多简单?
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 火山引擎 A/B 测试平台 DataTester 孵化于字节跳动业务内部,在字节跳动,"万事皆 A/B, ...
- PPT 商务报告:如何建立专属PPT素材库
PPT 商务报告:如何建立专属PPT素材库 为什么建立素材库? 省事:直接套用 应对紧急环境:无网络情况下,无法搜索 提升设计思路:帮助提升思路 通用型素材库 企业型素材库 模板 灵感网站 使用场景 ...
- Spring Cloud整体架构解析
Spring Cloud整体架构 Spring Cloud的中文名我们就暂且称呼它为"春云"吧,听上去是多么朴实无华的名字,不过呢一般名字起的低调的都是厉害角色,我们就看看Spri ...
- 接口文档 token原理 jwt介绍和原理 drf-jwt快速使用
目录 昨日回顾 认证 权限 频率 全局异常处理 接口文档 接口文档编写 drf自动生成接口文档 cookies-session-token发展史 jwt介绍和原理 jwt的构成 base64的编码和解 ...
- 一个简单的例子看明白 async await Task
测试代码: 1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using Sys ...
- Codeforces Round #738 (Div. 2) (A~E)
比赛链接:Here 1559A. Mocha and Math 题意: 给定一个区间,选择区间内的值执行 & 操作使得区间最大值最小化 观察样例发现:令 x = (1 << 30) ...
- 基于 HTML5 WebGL + WebVR 的 3D 虚拟现实可视化培训系统
前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级 ...
- prefer-rest-params
使用剩余参数代替 arguments (prefer-rest-params) 剩余参数来自于ES2016.可以在可变函数中使用这个特性来替代arguments变量.arguments没有Array. ...
- 完全免费白嫖 GPT-4 的终极方案!
原文链接:https://icloudnative.io/posts/completely-free-to-use-gpt4/ GPT-4 目前是世界上最强的多模态大模型,能力甩 GPT-3.5 好几 ...