JavaScript数组filter方法

全栈程序员站长

发布于 2022-09-14 09:59:53

5340

发布于 2022-09-14 09:59:53

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

1.数组filter方法作用

筛选数组,将满足条件的元素放入新数组中

2.语法 : array.filter( function ( item, index,arr) {} )

第一个参数: item,必须,当前元素的值

第二个参数 : index,可选,当前元素在数组中的索引值

第三个参数 : arr,当前元素所处的数组对象

3.filter方法特点

(1)函数执行次数 === 数组长度

(2)函数内部的return

return true : 满足筛选条件,放入新数组中

return false : 不满足条件,不放入新数组中

(3)filter方法的返回值

返回筛选之后的新数组,如果没有符合条件的元素则返回空数组

4.注意点:

(1)filter()方法不会对空数组进行检测

(2)filter()方法不会改变原始数组

5.应用场景 : 筛选数组

示例 :价格筛选

//封装函数渲染页面
const renderData = (arr) => {
    document.querySelector('.list').innerHTML = arr.map( item => 
            `<div class="item">
            <img src="${item.picture}" alt="">
            <p class="name">${item.name}</p>
            <p class="price">${item.price}</p>
            </div>`
    ).join('')
}
renderData(goodsList)
//点击事件
const aList = document.querySelectorAll('.filter a')
//遍历数组
aList.forEach( ( item,index ) => 
    item.onclick = function () {//注册点击事件
        //类名排他
        document.querySelector('.active').classList.remove('active')
        item.classList.add('active')
        //判断筛选
        if (index === 0) {//0-100
            renderData(goodsList.filter(item => item.price < 100))
        }else if (index === 1) {//100-300
            renderData(goodsList.filter(item => item.price >= 100 && item.price < 300))
        }else if (index === 2) {//100-300
            renderData(goodsList.filter(item => item.price > 300 ))
        }else {
            renderData(goodsList)
        }
    }
)

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/159291.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法