js数组高阶函数——filter()方法

⭐一般来说,filter() 方法用于过滤数组中的元素,并返回一个新数组。

语法:

array.filter(function(value, index, arr), thisValue)

返回值:
返回一个新数组,其中包含符合条件的元素。以下会举5个例子,看懂例子,基本就掌握了。

-------------------------------------------------------------⭐----------------------------------------------------------------

5个例子说明一切

⭐⭐⭐例1

假设我们有一个数字数组,现在想要过滤出其中所有大于等于5的数字:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8];
let result = numbers.filter(function(num) {
    return num >= 5;
});
console.log(result);   // 输出:[5, 6, 7, 8]

上述代码中使用匿名函数定义了过滤条件,并将其作为第一个参数传递给 filter() 方法。最终结果保存在变量 result 中,并输出到控制台中。
-------------------------------------------------------------⭐----------------------------------------------------------------

⭐⭐⭐例2

				let arr = [{
					id: 1,
					name: '神墓'
				}, {
					id: 2,
					name: '完美世界'
				}, {
					id: 1,
					name: '长生界'
				}, {
					id: 7,
					name: '遮天'
				}, {
					id: 1,
					name: '不死不灭'
				}]
				console.log(arr.filter(item => item.id == 1));
				

打印结果:

上面这个例子,我们将数组中每一项id为1的筛选出来。后端有SQL语句可以查询,前端也可以通过这样的方式来实现查询,筛选。

也有别的写法,数组不变:

			let fe = arr.filter((item)=function (){
				return (item.id ==1 )
			})
			console.log(fe);

这样写,和上面打印的结果一模一样。
-------------------------------------------------------------⭐----------------------------------------------------------------

⭐⭐⭐例3

			const words = ['赏', '花', '赏', '月', '赏', '秋','香'];
			const result = words.filter(word => word != '赏');
			console.log(result);

上面例子中,我们挑出了数组words中不是赏字的所有字

-------------------------------------------------------------⭐----------------------------------------------------------------

⭐⭐⭐例4

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);

上面的例子中,我们筛选words数组中的每一项元素的长度大于6的元素,因为每一个元素都是个单词,是个字符串,字符串也有长度,所以这样也可以过滤出我们想要的。

-------------------------------------------------------------⭐------------------------------------------------------------------

⭐⭐⭐例5

			function isBigEnoughcount(value) {
				return value >= 10;
			}
			const filtered = [12, 5, 8, 130, 44].filter(isBigEnoughcount);
			console.log(filtered);

这个例子中,声明一个数组,并过滤,执行的逻辑是一个条件。条件为值大于等于10,也就是说,我们声明了一个数组,并且筛选了数组中每一项大于10的数字。

在 React 中实现搜索框筛选,可以通过以下步骤来实现: 1. 创建一个包含搜索框和数据列表的组件。 2. 在组件的 state 中设置一个变量来存储输入框中的搜索关键字。 3. 创建一个筛选函数,该函数接受数据列表和搜索关键字作为参数,并返回一个筛选后的结果列表。 4. 在组件的 render 方法中,根据搜索关键字和筛选函数返回的结果渲染数据列表。 下面是一个简单的例子: ```javascript class SearchComponent extends React.Component { constructor(props) { super(props); this.state = { keyword: '', }; } handleSearch = (event) => { this.setState({ keyword: event.target.value, }); }; filterData = (dataList, keyword) => { return dataList.filter((data) => data.name.toLowerCase().includes(keyword.toLowerCase()) ); }; render() { const filteredData = this.filterData(this.props.dataList, this.state.keyword); return ( <div> <input type="text" onChange={this.handleSearch} /> <ul> {filteredData.map((data) => ( <li key={data.id}>{data.name}</li> ))} </ul> </div> ); } } ``` 在上面的例子中,我们创建了一个名为 `SearchComponent` 的组件,该组件包含一个输入框和一个数据列表。在组件的 state 中,我们设置了一个名为 `keyword` 的变量来存储搜索关键字。在输入框的 `onChange` 事件中,我们更新了 `keyword` 变量的值。 我们还创建了一个名为 `filterData` 的筛选函数,该函数接受数据列表和搜索关键字作为参数,并返回一个筛选后的结果列表。在组件的 render 方法中,我们调用了 `filterData` 函数来获取筛选后的数据列表,并根据该列表渲染了数据项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值