扩充原型对象方法实例（foreach、sort、filter方法

作者: 开着五菱宏光的小白 | 来源:发表于2020-05-14 13:33 被阅读0次

扩充原型对象方法实例（foreach、sort、filter方法
原型继承
封装自己的reduce、foreach、filter、sort、
原型指向可以改变
函数中this指向问题以及this四大绑定原则
javascript中面向对象编程－创建对象之原型模式
JavaScript中原型的简单语法
JavaScript数组：数组遍历
原生JS（类的扩充和类型检验）
js高级程序设计笔记9

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
</head>

<body>
    <div class="search layui-form" lay-filter="search">
        <div style="width: 860px;margin: 100px auto">
            <div class="price layui-inline">
                <div class="layui-inline">
                    <label class="layui-form-label">范围</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"
                            required lay-verify="required">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input"
                            required lay-verify="required">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="price">搜索</button>
                </div>
            </div>
            <div class="name layui-inline">
                <div class="">
                    <label class="layui-form-label">按名称搜索</label>
                    <div class="layui-input-inline">
                        <input required placeholder="请输入类型" autocomplete="off" class="layui-input" name="name">
                    </div>
                    <div class="layui-inline">
                        <div class="layui-btn name">搜索</div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-btn desc">价格排序</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table" style="width: 700px;margin: 0 auto">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>产品名称</th>
                        <th>价格</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
    var flag = true;
    Array.prototype.price = function (type, atr) {
        var compare = function (atr) {
            return function (a, b) {
                var value1 = a[atr];
                var value2 = b[atr];
                return value1 - value2
            }
        }
        var arr = this.sort(compare(atr));
        if (type == 1) {
            return arr;
        } else {
            return arr.reverse();
        }
    }
    layui.use(['form'], function () {
        var form = layui.form;
        form.on('submit(price)', function (data) {
            var arr1 = arr.filter(function (item) {
                return Number(data.field.price_min) <= Number(item.price) && Number(item
                    .price) <= Number(data.field.price_max)
            })
            console.log(arr1)
            edit(arr1);
        })
    });

    $('.name.layui-btn').click(function () {
        if ($('input[name="name"]').val() == '') {
            layer.msg('品牌不能为空');
            return;
        }
        var arr1 = arr.filter(function (item) {
            return item.name == $('input[name="name"]').val();
        })
        edit(arr1);
    })


    var arr = [{
        id: 1,
        name: '小米',
        price: 3999
    }, {
        id: 2,
        name: 'oppo',
        price: 999
    }, {
        id: 3,
        name: '荣耀',
        price: 1299
    }, {
        id: 4,
        name: '华为',
        price: 1999
    }];

    edit(arr);

    function edit(arr) {
        var str = '';
        arr.forEach(function (item) {
            str +=
                `           <tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.price}</td>
                    </tr>`
        })
        $('tbody').html(str);
    }

    $('.desc').click(function () {
        if (flag) {
            flag = false;
            arr.price(1, 'price');
            edit(arr);
        } else {
            flag = true;
            arr.price(0, 'price')
            edit(arr);
        }

    })
</script>

</html>