JS21. 数组过滤
描述
请补全JavaScript代码，要求根据下拉框选中的条件变换重新渲染列表中展示的商品，且只展示符合条件的商品。HTML/CSS/JavaScript 解法, 执行用时: 1692ms, 内存消耗: 77888KB, 提交时间: 2022-02-10
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n</head>\n\n<body>\n <select name=\"\" id=\"\">\n <option value=\"0\">请选择销量范围</option>\n <option value=\"1\"><100</option>\n <option value=\"2\">100~500</option>\n <option value=\"3\">>500</option>\n </select>\n <ul>\n <li>牛客logo马克杯</li>\n <li>无盖星空杯</li>\n <li>老式茶杯</li>\n <li>欧式印花杯</li>\n </ul>\n\n <script>\n var cups = [\n { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },\n { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },\n { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },\n { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }\n ]\n var select = document.querySelector('select');\n var ul = document.querySelector('ul');\n // 补全代码\n var str = '';\n select.onchange = function () {\n str = '';\n let val = this.value;\n showList(val);\n }\n function showList(val) {\n switch (val) {\n case '1':\n var arr = cups.filter((ele) => { return ele.sales < 100; }); break;\n case '2':\n var arr = cups.filter((ele) => { return ele.sales >= 100 && ele.sales <= 500; }); break;\n case '3':\n var arr = cups.filter((ele) => { return ele.sales > 500; }); break;\n }\n for (let i = 0; i < arr.length; i++) {\n str += `<li>${arr[i].name}</li>`\n }\n ul.innerHTML = str;\n }\n </script>\n</body>\n\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1712ms, 内存消耗: 77864KB, 提交时间: 2022-02-08
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <select name=\"\" id=\"\">\n <option value=\"0\">请选择销量范围</option>\n <option value=\"1\"><100</option>\n <option value=\"2\">100~500</option>\n <option value=\"3\">>500</option>\n </select>\n <ul>\n <li>牛客logo马克杯</li>\n <li>无盖星空杯</li>\n <li>老式茶杯</li>\n <li>欧式印花杯</li>\n </ul>\n\n <script>\n var cups = [\n { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },\n { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },\n { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },\n { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }\n ]\n var select = document.querySelector('select');\n var ul = document.querySelector('ul');\n // 补全代码\n select.onchange = function(ev) {\n const salesFilters = [() => true, (s) => s < 100, (s) => s >= 100 && s <= 500, (s) => s > 500];\n const salesFilter = salesFilters[this.value];\n ul.innerHTML = cups.filter(c => salesFilter(c.sales)).map(c => `<li>${c.name}</li>`).join('');\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1764ms, 内存消耗: 77864KB, 提交时间: 2021-12-14
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <select name=\"\" id=\"\">\n <option value=\"0\">请选择价格范围</option>\n <option value=\"1\"><100</option>\n <option value=\"2\">100~500</option>\n <option value=\"3\">>500</option>\n </select>\n <ul>\n <li>牛客logo马克杯</li>\n <li>无盖星空杯</li>\n <li>老式茶杯</li>\n <li>欧式印花杯</li>\n </ul>\n\n <script>\n var cups = [\n { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },\n { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },\n { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },\n { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }\n ]\n var select = document.querySelector('select');\n var ul = document.querySelector('ul');\n // 补全代码\n function render(ul,cups){\n ul.innerHTML=''\n cups.forEach(item=>{\n let li=document.createElement('li')\n li.innerHTML=item.name\n ul.append(li)\n })\n}\n \nselect.onchange=function(e){\n let value=this.value\n if(value==1){\n let _cups=cups.filter(cup=>cup.sales<100)\n render(ul,_cups)\n }else if(value==2){\n let _cups=cups.filter(cup=>cup.sales>=100&&cup.sales<=500)\n render(ul,_cups)\n }else if(value==3){\n let _cups=cups.filter(cup=>cup.sales>500)\n render(ul,_cups)\n }else{\n render(ul,cups)\n }\n}\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1765ms, 内存消耗: 77864KB, 提交时间: 2022-01-22
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <select name=\"\" id=\"\">\n <option value=\"0\">请选择销量范围</option>\n <option value=\"1\"><100</option>\n <option value=\"2\">100~500</option>\n <option value=\"3\">>500</option>\n </select>\n <ul>\n <li>牛客logo马克杯</li>\n <li>无盖星空杯</li>\n <li>老式茶杯</li>\n <li>欧式印花杯</li>\n </ul>\n\n <script>\n var cups = [\n { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },\n { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },\n { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },\n { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }\n ]\n var select = document.querySelector('select');\n var ul = document.querySelector('ul');\n // 补全代码\n select.onchange = function(e) {\n var ind = select.selectedIndex\n var arr=[]\n if (ind === 0)\n var arr = cups\n if (ind === 1) {\n var arr = cups.filter(item => item.sales < 100)\n } else if (ind === 2) {\n var arr = cups.filter(item => item.sales >= 100 && item.sales <= 500)\n } else if (ind === 3) {\n var arr = cups.filter(item => item.sales > 500)\n }\n var str = ''\n arr.forEach(item => str += '<li>' + item.name + '</li>'\n\n )\n ul.innerHTML = str\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1768ms, 内存消耗: 77912KB, 提交时间: 2022-01-01
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <select name=\"\" id=\"\">\n <option value=\"0\">请选择价格范围</option>\n <option value=\"1\"><100</option>\n <option value=\"2\">100~500</option>\n <option value=\"3\">>500</option>\n </select>\n <ul>\n <li>牛客logo马克杯</li>\n <li>无盖星空杯</li>\n <li>老式茶杯</li>\n <li>欧式印花杯</li>\n </ul>\n\n <script>\n var cups = [\n { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },\n { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },\n { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },\n { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }\n ]\n var select = document.querySelector('select');\n var ul = document.querySelector('ul');\n // 补全代码\n // alert(name);\n var op = select.options;\n select.onchange = ()=>{\n var value = select.value;\n var array = [];\n var str = '';\n ul.innerHTML = str;\n switch(value){\n default:\n array = cups;\n case \"1\":\n array = cups.filter(item=>item.sales<100);\n break;\n case \"2\":\n array = cups.filter(item=>item.sales>=100 && item.sales<=500);\n break;\n case \"3\":\n array = cups.filter(item=>item.sales>500);\n break;\n }\n array.forEach(i=>{\n str+='<li>'+i.name+'</li>'; \n });\n ul.innerHTML = str;\n \n }\n </script>\n </body>\n</html>","libs":[]}