题解 | #数组过滤#

数组过滤

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

{"html":"<!DOCTYPE html>\r\n<html lang=\"en\">\r\n    <head>\r\n        <meta charset=\"UTF-8\">\r\n    </head>\r\n    <body>\r\n        <select name=\"\" id=\"\">\r\n            <option value=\"0\">请选择价格范围</option>\r\n            <option value=\"1\"><100</option>\r\n            <option value=\"2\">100~500</option>\r\n            <option value=\"3\">>500</option>\r\n        </select>\r\n        <ul>\r\n            <li>牛客logo马克杯</li>\r\n            <li>无盖星空杯</li>\r\n            <li>老式茶杯</li>\r\n            <li>欧式印花杯</li>\r\n        </ul>\r\n\r\n        <script>\r\n            var cups = [\r\n                { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },\r\n                { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },\r\n                { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },\r\n                { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }\r\n            ]\r\n            var select = document.querySelector('select');\r\n            var ul = document.querySelector('ul');\r\n            // 补全代码\r\n            let obj = {\r\n                0:()=>[].concat(cups),\r\n                1:()=>cups.filter(item=>item.sales<100),\r\n                2:()=>cups.filter(item=>item.sales>=100&&item.sales<=500),\r\n                3:()=>cups.filter(item=>item.sales>500)\r\n            }\r\n            select.onchange = function(e){\r\n                let srr = obj[select.value]();\r\n                let len = srr.length;\r\n                if(!len)return;\r\n                let fragment = document.createDocumentFragment();\r\n                for(let i = 0; i<len;i++){\r\n                    let li = document.createElement('li');\r\n                    li.innerText = srr[i].name;\r\n                    fragment.appendChild(li)\r\n                }\r\n                ul.innerHTML = '';\r\n                ul.appendChild(fragment)\r\n                \r\n            }\r\n        </script>\r\n    </body>\r\n</html>","css":"/* html, body {\\n\\twidth: 100%;\\n\\theight: 100%;\\n\\tmargin: 0;\\n\\tpadding: 0;\\n} */","js":"// 请在这里输入代码"}

全部评论

相关推荐

头像
11-09 17:30
门头沟学院 Java
TYUT太摆金星:我也是,好几个华为的社招找我了
点赞 评论 收藏
分享
11-05 07:29
贵州大学 Java
点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务