明天的这个案例 应用到的es5的语法 数组的三个遍历的办法 别离是 forEach filter and some 这个案例是让我好好领会了一下 这三个数组 亦或者是es5语法的魅力 还是遇到了一个小难点的 各位能够在代码中找找 哈哈

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style>        table {            width: 400px;            border: 1px solid #000;            border-collapse: collapse;            margin: 0 auto;        }                td,        th {            border: 1px solid #000;            text-align: center;        }                input {            width: 50px;        }                .search {            width: 600px;            margin: 20px auto;        }    </style></head><body>    <div class="search">        依照价格查问: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜寻</button> 依照商品名称查问: <input type="text" class="product"> <button class="search-pro">查问</button>    </div>    <table>        <thead>            <tr>                <th>id</th>                <th>产品名称</th>                <th>价格</th>            </tr>        </thead>        <tbody>        </tbody>    </table>    <script>    //   1.动静渲染数据    var data = [        {            id : 1,            name : 'oppo',            price : 3999        },        {            id : 2,            name : '小米',            price : 999        },        {            id : 3,            name : '光荣',            price : 1299        },        {            id : 4,            name : '华为',            price : 6999        }    ]    var tBody = document.querySelector('tbody')    // 2.1 这个函数上面还要执行一次 罗唆封装起来    function loopArr(arr) {        // 2.2先清空一下 不然前面重建表格不太好建        tBody.innerHTML = ''        arr.forEach(function (value,index) {        var tr = document.createElement('tr')        // 2.3上面依照价格查问有个小bug  进去的id 还是原来的 所以不应该取数据外面的id 新表格就应该重新排列 新的id程序        var index = index + 1        tr.innerHTML = '<td>'+ index +'</td><td>'+value.name+'</td><td>'+value.price+'</td>'        tBody.appendChild(tr)    })    }    loopArr(data)    // 第二个 版块 依照价格查问    var search = document.querySelector('.search')    search.children[2].addEventListener('click', function() {        var minVal = search.firstElementChild.value        var maxVal = search.children[1].value        // console.log(minVal, maxVal);        var datas = data.filter(function(value) {            return value.price >= minVal && value.price <= maxVal        })        // console.log(datas);        // 能找到返回胜利的数据 数组保留起的 nice 那我就从新对表格来个 调配不就完事了        // 封装好了函数 再次执行        loopArr(datas)    })    // 3.依照商品名称查问    search.lastElementChild.addEventListener('click',function() {        var str = this.previousElementSibling.value        // console.log(str);        // 3.1这里咱们就比作每个商品名称就只有一种 意思就是名称不太容易重名 所以用数组的some办法 能够更快一点        var newValue        data.some(function(value) {            // 本来打算这么做 然而调试看了一下 死活都不给我true 对上了都熟视无睹一样             /* value = value.name            return str === value.name */            if (str == value.name) {                newValue = value                return true            }        })        // console.log(newValue);        // 不倡议采纳原来数组赋值 应该创立一个新数组 这里只是图疾速一点        if (newValue != undefined) {            data = [newValue]            loopArr(data)        }    })    </script></body></html>

前端爱好者，望大佬给个内推机会！！！