JavaScript综合练习4

JavaScript 综合练习 4

1. 案例演示

QQ录屏20240207213549 -original-original

2. 代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>js综合案例4</title></head><body><button id="like">通过好评排序</button><button id="price">通过价格排序</button><ul id="list"></ul><script>const sales = [{name: "张三",like: 30,price: 100,},{name: "李四",like: 60,price: 66,},{name: "王五",like: 10,price: 102,},];// 拿到list对象const list = document.getElementById("list");// 拿到button对象const like = document.getElementById("like");const price = document.getElementById("price");// 优化技巧 消除重复 事不过三// 定义一个删除元素，删除所有的li标签 将删除函数封装起来const removeLis = () => {// 删除所有的li标签const lis = document.querySelectorAll("li");console.log(lis);lis.forEach((li) => {list.removeChild(li);});};// 定义一个重新渲染的函数 将渲染函数封装起来const reRenderList = (array) => {removeLis();// 然后用新的数组去渲染列表array.forEach((sale) => {const li = document.createElement("li");li.innerHTML = `${sale.name}-----${sale.like}-----${sale.price}`;list.appendChild(li);});};const ordered = (array, attr) => {return array.sort((a, b) => {return a[attr] - b[attr];});};reRenderList(sales);// onclick事件，注册按钮点击like.onclick = () => {// 对于对象排序，需要取出对象中的值来进行比较const result = ordered(sales, "like");// 然后用新的数组去渲染列表reRenderList(result);};price.onclick = () => {// 对于对象排序，需要取出对象中的值来进行比较const result = ordered(sales, "price");// 然后用新的数组去渲染列表reRenderList(result);};</script></body>
</html>