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);// ["张三", "李四", "王武"]
相关文章
|
6天前
|
分布式计算 JavaScript 前端开发
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
|
9月前
filter和find的区别
filter和find的区别
|
6月前
ES6系列笔记-数组方法filter(过滤)
ES6系列笔记-数组方法filter(过滤)
42 1
|
9月前
es6 filter方法的使用
es6 filter方法的使用
69 0
|
9月前
|
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
156 0
|
11月前
|
JavaScript 索引
vue 数组处理= 循环--查找过滤--添加删除--去重[.every()/.some()/.find()/.filter()/.forEach()/.map()]
vue 数组处理= 循环--查找过滤--添加删除--去重[.every()/.some()/.find()/.filter()/.forEach()/.map()]
202 0
vue 数组处理= 循环--查找过滤--添加删除--去重[.every()/.some()/.find()/.filter()/.forEach()/.map()]
|
索引
ES6——find()、findindex()、indexof、includes()以及some
find()、findindex()、indexof、includes()以及some
76 0
|
前端开发
前端学习案例16-数组方法filter&undefined和null对比2
前端学习案例16-数组方法filter&undefined和null对比2
48 0
前端学习案例16-数组方法filter&undefined和null对比2
|
前端开发
前端学习案例17-数组方法filter&undefined和null对比3
前端学习案例17-数组方法filter&undefined和null对比3
46 0
前端学习案例17-数组方法filter&undefined和null对比3
ES6常用数组方法总结(max,contant,some,every,filter,reduce,forEach,map)
1.求最大值(Math.max) 2.数组添加到另外一个数组的尾部(...扩展符) 3.复制数组 3.1数组直接赋值 3.2 es5通过concat方法进行克隆,不会影响原来数组 3.3 es6通过扩展字符串来实现克隆 4.用Object.keys清空对象的属性值 5.forEach,遍历数组,无返回值,不改变原数组 6.map遍历数组,返回新数组,不改变原数组 7.filter,过滤掉数组不符合条件的值,返回新数组,不改变原数组 8.reduce 9 some() 10.every
146 0
ES6常用数组方法总结(max,contant,some,every,filter,reduce,forEach,map)