HTML

<ul>
            
</ul>
<form>
    <div>
        姓名：<input type="text" name="name" id="name" value="" />
        电话号码：<input type="text" name="phonenumber" id="phonenumber" value="" />
        <input type="button" value="添加" id="add" onclick="Add()"/>
    </div>
    <div>
        姓名：<input type="text" id="searchName"/>
        <input type="button" name="search" id="search" value="搜索" onclick="Search()" />
    </div>
    <div>
        姓名：<input type="text" id="name3"/>
        电话号码：<input type="text" id="phonenumber3"/>
        <input type="button" name="del" id="del" value="删除" onclick="Delete()" />
    </div>
</form>

css

li{
    list-style: none;
    overflow: hidden;
}
li div{
    width: 150px;
    float: left;
}

JS

构造函数写法

var data = [{name:"李娜",phone:"15866936545",{name:"king",phone:"15869253647"}];
function PhoneBook(data){
            this.data = data;
        }
        //呈现数据的方法
        PhoneBook.prototype.showData = function(){
            var html = '';
            for(let i = 0;i<this.data.length;i++){
                html +="<li><div class='name'>"+this.data[i].name+"</div><div class='phonenumber'>"+this.data[i].phone+"</div></li>";   
            }
            document.getElementsByTagName("ul")[0].innerHTML=html;
        }
        PhoneBook.prototype.addData = function(name,phone){
            var obj={name,phone}
            this.data.push(obj);
        }
        PhoneBook.prototype.searchData = function(name){
            for(let i=0;i<this.data.length;i++){
                if(name == this.data[i].name){
                    alert("该联系人电话号码为："+this.data[i].phone);
                }
            }
            document.getElementById("searchName").value=""
        }
        PhoneBook.prototype.deleteData = function(name,phone){
            for (let i=0;i<this.data.length;i++) {
                if(name == this.data[i].name && phone==this.data[i].phone){
                    this.data.splice(i, 1);
                    i--;
                }
            }
        }
        var newBook = new PhoneBook(data);
        newBook.showData()
        function Add(){
            var name = document.getElementById('name').value;
            var phone = document.getElementById('phonenumber').value;
            newBook.addData(name,phone)
            newBook.showData()
        };
        function Search(){
            var name = document.getElementById("searchName").value;
            newBook.searchData(name);
        }
        function Delete(){
            var name = document.getElementById('name3').value;
            var phone = document.getElementById('phonenumber3').value;
            newBook.deleteData(name,phone);
            newBook.showData()
        }

类的方法

var data = [{name:"李娜",phone:"15866936545"},{name:"king",phone:"15869253647"}];
class PhoneBook{
            constructor(data){
                this.data = data;
            }
            showData(){
                    var html = '';
                for(let i = 0;i<this.data.length;i++){
                    html +="<li><div class='name'>"+this.data[i].name+"</div><div class='phonenumber'>"+this.data[i].phone+"</div></li>";   
                }
                document.getElementsByTagName("ul")[0].innerHTML=html;
            }
            addData(name,phone){
                var obj={name,phone}
                this.data.push(obj);
            }
            searchData(name){
                for(let i=0;i<this.data.length;i++){
                    if(name == this.data[i].name){
                        alert("该联系人电话号码为："+this.data[i].phone);
                    }
                }
                document.getElementById("searchName").value=""
            }
            deleteData(name,phone){
                for (let i=0;i<this.data.length;i++) {
                    if(name == this.data[i].name && phone==this.data[i].phone){
                        this.data.splice(i, 1);
                        i--;
                    }
                }
            }
        }
        var newBook= new PhoneBook(data);
        newBook.showData()
        function Add(){
            var name = document.getElementById('name').value;
            var phone = document.getElementById('phonenumber').value;
            newBook.addData(name,phone)
            newBook.showData()
        };
        function Search(){
            var name = document.getElementById("searchName").value;
            newBook.searchData(name);
        }
        function Delete(){
            var name = document.getElementById('name3').value;
            var phone = document.getElementById('phonenumber3').value;
            newBook.deleteData(name,phone);
            newBook.showData()
        }

写的不好，希望大家多多指点