JS数组方法实践——实现一个简易的todolist

本文链接：https://blog.csdn.net/KslgmrDry/article/details/120154529

用JavaScript实现一个简易的todolist.

在codepen上调试https://codepen.io/dmax0/pen/NWgbzam

在线预览https://tool.dmax.wang/JavaScriptToDoList

界面布局

界面布局这里使用tailwindcsshttps://www.tailwindcss.cn/框架

<!doctype html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="src/tailwind.css" rel="stylesheet">
</head>

<body class="grid grid-cols-5 gap-1">
  <div class="sm:col-start-2 sm:col-span-3 col-start-1 col-span-5">
    <h1 class="text-blue-200 text-left text-4xl font-mono mt-3">ToDo List</h1>

    <!--add item-->
    <div>
      <input id="input" class="mt-3  focus:outline-none ring 
                outline-none  rounded font-thin h-6 w-full " />
      <button id="add"
        class="mt-3 bg-transparent hover:bg-blue-200 text-blue-400 hover:text-white py-2 px-4 border border-blue-200 hover:border-transparent rounded">
        add
      </button>
    </div>
    
    <!--list-->
    <div class="w-full  rounded-lg shadow-lg ">
      <ul id="list"></ul>
    </div>

  </div>
  <script src="src/index.js"></script>
</body>

</html>

思路

维护一个事项数组listArray,

添加事项时，使用push方法将该事项加到数组中；

删除事项时，时用filter方法将数组中要删除的id的事项过滤掉；

修改事项状态时，如果该事项为待办状态，使用reduce方法，

将listArray数组通过id将该事项状态切换为完成状态，其他事项不变，

完成状态切换成待办状态同理。

每个操作最后将listArray的元素渲染出来。

//获取dom元素
const add = document.getElementById('add'),
    list = document.getElementById('list'),
    input = document.getElementById('input');

// 事项数组
let listArray = [];
//每个事项的唯一标识
let identity = 0;

未完成事项状态

function notDoneItem(id,content) {
    return {
        id : id,
        content : content,
        elem :  
            `<li class="flex items-center justify-between p-3 mt-2 bg-blue-100" id=${id}>
                    <input type="checkbox"  onclick="itemIsDone(${id})" id="input${id}">
                    <label for="input${id}"><p id="p${id}">${content}</p></label>
                <button 
                    class="bg-transparent hover:bg-red-300 text-red-700 hover:text-white py-2 px-4 border border-red-300 hover:border-transparent rounded"
                        onclick="deleteItem(${id++})">
                    delete
                </button>
            </li>`,
    };
}

已完成事项状态

function isDoneItem(id,content){
    return {
        id : id,
        content : content,
        elem :  
            `<li class="flex items-center justify-between p-3 mt-2 bg-green-100" id=${id}>
                    <input type="checkbox"  onclick="itemNotDone(${id})" checked="true" id="input${id}">
                    <label for="input${id}"><p id="p${id}" class="line-through">${content}</p></label>
                <button 
                    class="bg-transparent hover:bg-red-300 text-red-700 hover:text-white py-2 px-4 border border-red-300 hover:border-transparent rounded"
                        onclick="deleteItem(${id++})">
                    delete
                </button>
            </li><label for=${id}></label>`,
    };
}

将数组listArray中的元素渲染出来

function showListItem() {
    list.innerHTML = '';
    return listArray.forEach(item => {
        list.innerHTML += item.elem;
    })
}

添加事项

add.addEventListener('click', () => {
    if (input.value.trim()) {
        listArray.push(notDoneItem(identity++,input.value.trim()));
        showListItem();
        input.value = '';
    }

})

删除事项

function deleteItem(index) {
    listArray = listArray.filter(item => {
        
        return item.id != index;
    })
    if (listArray.length === 0) {
        identity = 0;
    }
    showListItem();
}

事项状态切换

function itemIsDone(index) {
    
    listArray = listArray.reduce((arrlist,cur) => {
        if (cur.id === index){
            arrlist.push(isDoneItem(cur.id,cur.content));

        }else{
            arrlist.push(cur);
        }

        return arrlist;
    },[]);
    
    showListItem();

    
}


function itemNotDone(index) {
    listArray = listArray.reduce((arrlist,cur) => {
        if (cur.id === index){
            arrlist.push(notDoneItem(cur.id,cur.content));
        }else{
            arrlist.push(cur);
        }

        return arrlist;
    },[]);
    showListItem();
}