es6数组方法find()、findIndex() filter()的总结

简介: 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);// ["张三", "李四", "王武"]
相关文章
|
7月前
|
分布式计算 JavaScript 前端开发
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
|
3月前
|
索引
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
|
4月前
|
JavaScript 前端开发 索引
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数:`item`(数组项的值)、`index`(项的位置,可选)和`array`(数组本身,可选)。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
|
4月前
|
JavaScript 前端开发 索引
find 和 findIndex 的讲解和实现
`findIndex` 是 JavaScript 数组方法,用于查找数组中满足条件元素的索引。语法:`array.findIndex(callback[, thisArg])`。`callback` 定义查找条件,并可接收元素、索引和数组自身作为参数。`findIndex` 从头遍历数组,找到首个符合条件的元素即返回其索引,未找到则返回 -1。
65 2
|
6月前
|
JavaScript 前端开发
JavaScript 数组的函数 map/forEach/reduce/filter
JavaScript 数组的函数 map/forEach/reduce/filter
ES6系列笔记-数组方法reduce和forEach
ES6系列笔记-数组方法reduce和forEach
52 1
ES6系列笔记-数组方法filter(过滤)
ES6系列笔记-数组方法filter(过滤)
79 1
|
JavaScript 索引
vue 数组处理= 循环--查找过滤--添加删除--去重[.every()/.some()/.find()/.filter()/.forEach()/.map()]
vue 数组处理= 循环--查找过滤--添加删除--去重[.every()/.some()/.find()/.filter()/.forEach()/.map()]
352 0
vue 数组处理= 循环--查找过滤--添加删除--去重[.every()/.some()/.find()/.filter()/.forEach()/.map()]
|
JavaScript 索引
JS数组常用方法(超级详细,含理解) push、pop、unshift、shift、splice、slice、concat、join、revres、indexOf、sort、filter、map
JS数组常用方法(超级详细,含理解) push、pop、unshift、shift、splice、slice、concat、join、revres、indexOf、sort、filter、map
332 0
|
前端开发
前端学习案例16-数组方法filter&undefined和null对比2
前端学习案例16-数组方法filter&undefined和null对比2
65 0
前端学习案例16-数组方法filter&undefined和null对比2