DAY5

filter筛选数组方法

<script >
        //filter 筛选数组
        var arr=[12,66,4,88];
        var newArr=arr.filter(function(value,index){
            return value>=20;
                     //return value%2===0--------取出偶数
        });
        console.log(newArr);

    </script>

----->输出：66，88

some（）方法：（返回值是一个布尔值）

<script >
        //filter 筛选数组
        var arr=[12,6,4,8];
        arr.some(function(value){
            return value>=20;
        });
        //----->flase
        console.log(flag);
        var arr1=['red','pink','blue'];
        var flag1=arr1.some(function(value){
            return value='pink';
        });
        console.log(flag1);
        //------->true

    </script>

如果找到了第一个满足条件的元素，则终止循环，不再继续查找

//filter 也是查找满足条件的元素，返回的 是一个数组，而且是把所有满足条件的元素返回回来
//some也是查找满足条件的元素是否存在，返回的是一个布尔值，如果查找到第一个元素满足就终止循环

查询方法的案例：

图片发布于简书app

<script >
        //利用新增数组方法操作数据
        var data=[{
            id=1,
            pname:"小米",
            price:3999
        },{
            id=2,
            pname="oppo",
            price:999
        },{
            id=3,
            pname="荣耀",
            price:1299
        },{
            id=4,
            pname="华为",
            price=1999

        },];
        //获取相应的元素
        var tbody=Document.querySelector("tbody");
        var search_price=Document.querySelector('.search_price');
        var start=Document.querySelector('.start');
        var end =Document.querySelector('.end');
        var product=Document.querySelector('.product');
        var search_pro=Document.querySelector('search_pro')
        setDate(data);

        //把数据渲染到页面中
        function setDate(mydata){
            //先清空与拿来tbody里面的数据
            tbody.innerHTML='';
            mydata.forEach(function(value){
            var tr=Document.createElement('tr');
            tr.innerHTML='<td>'+value.id+'</td><td>'+value.pname+'</td><td>'+value.price+'</td>';
            tbody.appendChild(tr);
          });
        }
        //3当我们点击了按钮，就可以根据我们的商品价格去筛选数组里面的对象
        search_price.addEventListener('click',function(){
            var newData=data.filter(function(value){
                return value.price=start.value&&value.price<=end.value;
                //把筛选完的对象渲染到页面中
                

            });
            setDate(newData);
        });
        //4.如果商品名称查找商品
        //如果查询数组中唯一的 元素，用some方法会更合适，因为它找到这个元素就不再进行循环，效率高
        search_pro.addEventListener('click',function(){
            var arr=[];
            data.some(function(value){
                if(value.pname===product.value){
                    arr.push(value);
                    return true; //return 后面必须写true
                }
            });
            //把拿到的数据渲染到页面中
            setDate(arr);
        })


    </script>