【练习】关于filter以及渲染调用思想

 //渲染函数，封装，设置arr为形参
	function render (arr) {
		let str = ''
 //foreach不遍历不返回值
		arr.forEach(item => {
 //解构出传回来的数据（文章没有表明）
		const {name,price,picture} = item	
		str+=`
		<div class="item">
		  <img src="${picture}" alt="">
		  <p class="name">${name}</p>
		  <p class="price">${price}</p>
		</div>
		      `	
			
		})
		document.querySelector('.list').innerHTML = str
		
	}
 //调用函数把实参传回形参
    render(goodsList)

首先渲染的封装函数

   其次再进行TAB栏的过滤筛选

   //过滤筛选，直接简洁写法进行匿名函数的事件委托
	 document.querySelector('.filter').addEventListener('click', e=>{
	//解构target,dataset=CSS内的data-index（目的熟悉写法）
		 const {tagName,dataset} = e.target
		 if(tagName === 'A'){

			 //如果填写let arr = []的话，点击a标签的第四个就会出现空白不渲染函数
			let arr = goodsList
             //CSS内标签为data-index（标识数）
			if (dataset.index === '1') {
             //进行filter过滤，用arr接受return的返回值
			arr = goodsList.filter(item => item.price>0&&item.price<=100)
             //用if叠加也可以执行，不过用else if可读性更高				
			} else if (dataset.index === '2'){
			arr = goodsList.filter(item => item.price>=100&&item.price<=300)	
			}else if (dataset.index === '3'){
			arr = goodsList.filter(item => item.price>300)	
			}
             //此为第四个标签（全部区间）点击后直接重新渲染上一个封装函数
			render(arr)
		 }
		
		 
	 })