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,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,arr) => {
    return v.price > 40
})
console.log(newarr4)
在一个数组中删除某一个特定的值。如在下面的数组中删除小明。返回一个新的数组
let arr5 = ['小明','张三','李四','王武'];
let arrindex6 = arr5.findIndex((v,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);// ["张三","李四","王武"]

原文地址:https://www.cnblogs.com/IwishIcould

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)