ES5 中新增的方法（数组方法，字符串方法，对象方法）以及查询商品案例

最新推荐文章于 2021-09-24 00:16:48 发布

Pop–

最新推荐文章于 2021-09-24 00:16:48 发布

阅读量120

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45026839/article/details/115099311

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

方法
查询商品案例

把数据渲染到页面中 (forEach)
根据价格显示数据（filter）
根据商品名称显示数据（some）

效果：代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <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>
            // 利用新增数组方法操作数据
            var data = [{
                id: 1,
                pname: '小米',
                price: 3999
            }, {
                id: 2,
                pname: 'oppo',
                price: 999
            }, {
                id: 3,
                pname: '荣耀',
                price: 1299
            }, {
                id: 4,
                pname: '华为',
                price: 1999
            },];
            // 获取元素
            var tbody = document.querySelector('tbody');
            var search = document.querySelector('.search-price');
            var start = document.querySelector('.start');
            var end = document.querySelector('.end');
            var find = document.querySelector('.search-pro');
            var product = document.querySelector('.product');
            setDate(data);
            // 1.渲染页面
            function setDate(myData) {
                tbody.innerHTML = '';
                myData.forEach(function (value) {
                    //  创建tr元素 行
                    var tr = document.createElement('tr');
                    // 给行里面添加td例
                    tr.innerHTML = '<td>' + value.id + '</td><td> ' + value.pname + ' </td><td>' + value.price + '</td>';
                    tbody.append(tr);
                });
            }

            // 2.点击搜索 进行价格查询 使用filter()筛选 给搜索添加点击事件 点击之后进行筛选 先输入筛选范围值
            search.addEventListener('click', function () {
                var newData = data.filter(function (value) {
                    return value.price >= start.value && value.price <= end.value;
                });
                // 把筛选完之后的对象渲染到页面中
                setDate(newData);
            });
            // 3.点击查询 按照商品名称查询 使用some() 方法 返回布尔值 找到了就退出遍历 给查询添加点击事件
            //  // 如果查询数组中唯一的元素, 用some方法更合适,因为它找到这个元素,就不在进行循环,效率更高
            find.addEventListener('click', function () {
                var newData = data.some(function (value) {
                    if (product.value == value.pname) {
                        return true;// return 后面必须写true  
                    }
                });
                // 把拿到的数据渲染到页面中
                setDate(newData);
            });

        </script>
    </body>

</html>

forEach() 和 some() 的区别

如果查询数组中唯一的元素, 用some方法更合适

在some 里面遇到 return true 就是终止遍历迭代效率更高
filter 里面 return 不会终止迭代
return 后面必须写true，如果是false 会一直找下去

Pop–

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES5 中新增的方法（数组方法，字符串方法，对象方法）以及查询商品案例

方法查询商品案例把数据渲染到页面中 (forEach)根据价格显示数据（filter）根据商品名称显示数据（some）效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met..
复制链接

扫一扫