题解 | #数组过滤#

数组过滤

https://www.nowcoder.com/practice/46d607f9bf64458daa8798339a7336d0

想法步骤如下：

1、获取select框内选择的选项。

2、创建一个函数1，函数的作用是从cups数组中将符合条件的元素对象的名字筛选出来，返回一个新数组。

3、创建一个函数2，函数的作用是将函数1中返回的新数组中的元素插入到DOM中去，操作DOM。

4、调用函数：函数2（函数1（cups，index））；

主要考察的是DOM和filter方法，把过程理清楚了就好了。（我也是小趴菜，请批评指正）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <select name="" id="">
            <option value="0">请选择销量范围</option>
            <option value="1">&lt100</option>
            <option value="2">100~500</option>
            <option value="3">&gt500</option>
        </select>
        <ul>
            <li>牛客logo马克杯</li>
            <li>无盖星空杯</li>
            <li>老式茶杯</li>
            <li>欧式印花杯</li>
        </ul>

        <script>
            var cups = [
                { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
                { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
                { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
                { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
            ]
            var select = document.querySelector('select');
            var ul = document.querySelector('ul');
            // 补全代码
            select.onchange = function(){
                let index = select.selectedIndex;
                
                function choose(cups,index){
                    let newArr = cups.filter(function(item){
                        switch(index){
                            case 1:return item.sales < 100;
                                break;
                            case 2:return item.sales >= 100 && item.sales <= 500;
                                break;
                            case 3:return item.sales > 500;
                        }
                    })
                    return newArr;
                }
                
                function show(arr){
                    let list = '';
                    arr.forEach(function(item){
                        list += `<li>${item.name}`
                    })
                    ul.innerHTML = list;
                }
                show(choose(cups,index))
            }
        </script>
    </body>
</html>