题解 | #数组过滤#

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');
        // 补全代码
        const createElement = array => {
            const fragment = document.createDocumentFragment()
            array.map(value => {
                const li = document.createElement("li")
                li.innerHTML = value.name
                fragment.appendChild(li)
            })
            return fragment
        }

        select.onchange = () => {
            switch (select.value) {
                case "1": {
                    const array = cups.filter(value => value.sales < 100)
                    Array(...ul.children).map(value => {
                        value.remove()
                    })
                    ul.appendChild(createElement(array))
                    break;
                }
                case "2": {
                    const array = cups.filter(value => value.sales >= 100 && value.sales < 500)
                    Array(...ul.children).map(value => {
                        value.remove()
                    })
                    ul.appendChild(createElement(array))
                    break;
                }
                case "3": {
                    const array = cups.filter(value => value.sales > 500)
                    Array(...ul.children).map(value => {
                        value.remove()
                    })
                    ul.appendChild(createElement(array))
                    break;
                }
            }
        }