SOURCE

console 命令行工具 X clear

                    
>
console
window.onload = function() {
    function $$(id) {
        return document.querySelector(`#${id}`);
    }

    let list = [
        {name: "funlee", age: 16},
        {name: "Jack", age: 17},
        {name: "Bob", age: 20},
        {name: "Lucy", age: 22},
    ], 
    insertBtn = $$('insert'), 
    getBtn = $$('get'), 
    delBtn = $$('del'),
    currentBtn = $$('current'),
    result = $$('result');
    result.innerHTML = `当前 list 为:<br />${JSON.stringify(list)}`;

    /**
     * 插入数据
     * @param {string} name 
     * @param {number} age 
     * @param {number} index
     */
    function insertItem(name, age, index) {
        const obj = {};
        obj.name = name;
        obj.age = age;
        if(index < 0 || index > list.length) {
            alert(`非法的索引位置:${i}`);
            return;
        } else {
            for(let k = list.length - 1; k > index - 1; k--) {
                list[k + 1] = list[k];
            }
            list[index] = obj;
            result.innerHTML = `${result.innerHTML}<br />从索引${index}处插入一个元素<br />${JSON.stringify(list)}`
        }
    }
    /**
     * 获取数据
     * @param {number} index
     */
    function getItem(index) {
        if(index < 0 || index > list.length - 1) {
            alert(`非法的索引位置:${index}`);
            return;
        }
        for(let k = 0; k < list.length; k++) {
            if(k === index) {
                result.innerHTML = `${result.innerHTML}<br />获取索引为 ${index} 的元素:<br />${JSON.stringify(list[k])}`;
            }
        }
    }
    /**
    * 删除数据
    * @param {number} index
    */

    function delItem(index) {
        const delList = list[index];
        if(list.length === 0) {
            alert(`线性表为空`);
            return;
        }
        if(index < 0 || index > list.length - 1) {
            alert(`非法的索引位置:${index}`);
            return;
        } else if(index < list.length - 1) {
            for(let k = index; k < list.length - 1; k++) {
                list[k] = list[k + 1];
            }
        }
        list.length--;
        result.innerHTML = `${result.innerHTML}<br />删除索引为 ${index} 的元素:<br />${JSON.stringify(list)}`;
    }

    // 点击插入
    insertBtn.addEventListener('click', () => {
        const name = $$('name').value;
        const age = $$('age').value;
        const index = parseInt($$('index').value, 10) || 0;
        if(!name || !age) {
            alert('请补全输入框');
            return;
        }
        insertItem(name, age, index);
    })
    // 点击获取
    getBtn.addEventListener('click', () => {
        const index = parseInt($$('index').value, 10);
        if(index === '') {
            alert('请输入索引');
            return;
        }
        getItem(parseInt(index, 10));
    })
    // 点击删除
    delBtn.addEventListener('click', () => {
        const index = parseInt($$('index').value, 10);
        if(index === '') {
            alert('请输入索引');
            return;
        }
        delItem(parseInt(index, 10));
    })
    // 查看当前
    currentBtn.addEventListener('click', () => {
        result.innerHTML = `${result.innerHTML}<br />当前 list 为:<br />${JSON.stringify(list)}`;
    })


}
<div>
    <h1>线性表的顺序存储结构操作实例:</h1>
    <label for="name">姓名:<input type="text" id="name" placeholder="请输入姓名" /></label>
    <label for="age">年龄:<input type="number" id="age" placeholder="请输入年龄" /></label>
    <label for="index">索引:<input type="number" id="index" placeholder="索引(从0开始)" /></label>

    <input type="button" value="插入" id="insert">
    <input type="button" value="获取" id="get">
    <input type="button" value="删除" id="del">
    <input type="button" value="查看当前list" id="current">
</div>
<div>
    <h1>展示:</h1>
    <div id="result"></div>
</div>