请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

JavaScript数组filter方法

 
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)
       }
   }
)

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。