摘要：概述這里講的數(shù)組是指數(shù)據(jù)結(jié)構(gòu)中的數(shù)組，而不是專指中的數(shù)組，只是使用來探究數(shù)據(jù)結(jié)構(gòu)中的數(shù)組，因為我覺得比較方便。

這里講的數(shù)組是指數(shù)據(jù)結(jié)構(gòu)中的數(shù)組，而不是專指js中的數(shù)組，只是使用js來探究數(shù)據(jù)結(jié)構(gòu)中的數(shù)組，因為我覺得js比較方便。

數(shù)組是啥？看圖：

數(shù)組有兩個要素：

索引：圖中的0，1，2，3，4

數(shù)據(jù)：圖中的data1-data5
可以通過索引找到某個數(shù)據(jù)，然后對這個數(shù)據(jù)操作，而這里的數(shù)據(jù)是泛指，因為數(shù)組是一種通用的數(shù)據(jù)結(jié)構(gòu)，可以存儲任意的數(shù)據(jù)，比如數(shù)字、對象、字符串，甚至數(shù)組也可以。

數(shù)組的操作

搜索

添加/更新

刪除

js中數(shù)組的初始化很簡單，方式也很多:

[] // []
[1,2,3,4,5,6,7] //[1,2,3,4,5,6,7]
new Array() //[]
new Array(10) // [ 10 empty items]
new Array(1,2,3,4,6) // [1,2,3,4,5,6]
Array.from([1,2,3,4,5],(a)=>a*2) // [2,4,6,8,10]
Array.from(new Set([1,2,3,3])) // [1,2,3]

這里我們選擇最簡單的來實現(xiàn)init：

function init() {
    return []
}

js中插入的方法也很多，每個方法也都有自己的特色，其實js的數(shù)組就已經(jīng)自帶實現(xiàn)了很多的數(shù)據(jù)結(jié)構(gòu)

let data=[]
data[0]=1 // [1]
data.push(2) // [1, 2]
data=data.concat(3) // [1, 2, 3]
data=data.concat([4],5) // [1, 2, 3, 4, 5]

我們依舊選擇最簡單索引方式，因為這比較符合數(shù)據(jù)結(jié)構(gòu)中數(shù)組的使用，push是更適合其他數(shù)據(jù)結(jié)構(gòu)的操作。

function insert(arr, index, data) {
    arr[index] = data
    return arr
}

js數(shù)組查找的方法也很多

let data = [1, 2, 3, 4, 5, 6]
data.find(d => d === 1) // 1
data[data.findIndex(d => d === 2)] //2
data.filter(d => d === 3)[0] // 3
data.forEach(d => {
    if (d === 4) {
        result = d // 4
    }
})  
for (let i = 0; i < data.length; i++) {
    if (data[i] === 5) {
        result = data[i] // 5
        break
    }
} 

for (var d of data) {
    if (d === 6) {
        result = d //6
        break
    }
}

我們依舊采用最簡單的

function find(arr, data) {
    return arr.find(d => d === data)
}

js的刪除...也有很多方法

let data = [1, 2, 3, 4, 5, 6] 
delete data[0] // [ <1 empty item>, 2, 3, 4, 5, 6 ]
data.pop() // [ <1 empty item>, 2, 3, 4, 5]
data.splice(0, 1) // [2, 3, 4, 5]

我們依舊采用最簡單的

function delete_(arr, index) {
    arr.splice(index,1)
    return arr
}

function main() {
    let arr = init()
    
    arr = insert(arr, 0, 1) // [1]
    arr = insert(arr, 1, 2) // [1, 2]
    arr = insert(arr, 2, 3) // [1, 2, 3]
    arr = insert(arr, 3, 4) // [1, 2, 3, 4]
    arr = insert(arr, 4, 5) // [1, 2, 3, 4, 5]
    arr = insert(arr, 5, 6) // [1, 2, 3, 4, 5, 6]
    
    find(arr, 1) // 1
    find(arr, 2) // 2
    find(arr, 3) // 3
    find(arr, 4) // 4
    find(arr, 5) // 5 
    
    delete_(arr, 0)
    delete_(arr, 1)
    delete_(arr, 2)
    delete_(arr, 3)
    delete_(arr, 4)
    delete_(arr, 5)
}

當(dāng)然，我們平常并不會這么使用js，這只是為了演示數(shù)組而已：

let data=[1,2,3]
data.push(4)
data.push(5)
data.push(6)
data.filter(d=>d===1)
data.splice(0,1)

效果

todoService: 該文件用來提供todo的增刪改查服務(wù)

let todoService = []

/**
 * 獲取所有的 todo

 */
function getAll() {
    return todoService
}

/**
 * 添加一個 todo 到 todo 列表中
 * @param todo
 */
function add(todo) {
    todo.id = todoService.length
    todoService.push(todo)
}

/**
 * 根據(jù) todo 的 id 刪除一個 todo
 * @param id
 * @private
 */
function delete_(id) {
    todoService.splice(findIndexById(id), 1)
}

/**
 * 根據(jù)一個修改過的 todo 更新 todo
 * @param todo
 */
function update(todo) {
    todoService[findIndexById(todo.id)] = {...todo}
}

/**
 * 根據(jù)內(nèi)容篩選符合條件的 todo
 * @param content
 * @returns {*[]}
 */
function find(content) {
    return todoService.filter(todo => todo.content === content)
}

/**
 * 根據(jù) id 獲取這個 id 在 todoList 中的索引
 * @param id
 * @returns {number}
 */
function findIndexById(id) {
    return todoService.findIndex(todo => todo.id === +id)
}

```

視圖

    

        

            
            

                添加
                搜索
                更新
            
        
        

            

            
        
    
    

引入todoService

初始化變量

        let $btnAdd = window.document.getElementById("btnAdd")
        let $btnSearch = window.document.getElementById("btnSearch")
        let $btnUpdate = window.document.getElementById("btnUpdate")
        let $ulTodoList = window.document.getElementById("ulTodoList")
        let $inputContent = window.document.getElementById("inputContent")
        let updateTodo

完成添加按鈕的點(diǎn)擊事件

當(dāng)用戶輸入內(nèi)容并點(diǎn)擊添加的時候，會根據(jù)輸入內(nèi)容創(chuàng)建一個新的todo，并調(diào)用add將新的todo保存到todoList中，接著調(diào)用render將所有的todo渲染到dom中，最后清空輸入框。

       $btnAdd.onclick = () => {
            let content = $inputContent.value
            add({content: content})
            render([...getAll()])
            $inputContent.value = ""
        }

完成搜索按鈕點(diǎn)擊事件

當(dāng)用戶輸入內(nèi)容并點(diǎn)擊搜索按鈕的時候，會根據(jù)輸入的內(nèi)容調(diào)用find，該函數(shù)返回了所有內(nèi)容和輸入內(nèi)容相同的todo，將這些todo渲染到dom中就獲得了搜索之后的todo，最后清空輸入框。

$btnSearch.onclick = () => {
            let content = $inputContent.value
            render(find(content))
            $inputContent.value = ""
        }

完成todoLsit的渲染

為了方便，該函數(shù)直接將ul的子元素全部清空，然后根據(jù)傳入的todoList重新渲染子元素，其中為每個一個todo創(chuàng)建了一個刪除按鈕和更新按鈕。刪除按鈕點(diǎn)擊的時候講調(diào)用delete_將這個 todo從todoList中移除，更新按鈕點(diǎn)擊的時候只會將當(dāng)前的todo保存到變量中，準(zhǔn)備進(jìn)行更新操作

function render(todoList) {
            $ulTodoList.innerHTML = ""
            todoList.map((todo) => {
                let $li = document.createElement("li")
                $li.className = "mt-2"
    
                let $span = document.createElement("span")
                $span.innerText = todo.content
    
                let $btnDelete = document.createElement("button")
                $btnDelete.innerText = "刪除"
                $btnDelete.className = "btn btn-danger m-2"
                $btnDelete.onclick = () => {
                    delete_(todo.id)
                    render([...getAll()])
                }
    
                let $btnUpdate = document.createElement("button")
                $btnUpdate.innerText = "更新"
                $btnUpdate.className = "btn btn-warning m-2"
                $btnUpdate.onclick = () => {
                    updateTodo = {...todo}
                    $inputContent.value = todo.content
                }
    
                $li.appendChild($btnDelete)
                $li.appendChild($btnUpdate)
                $li.appendChild($span)
                $ulTodoList.appendChild($li)
            })
        }

完成更新按鈕點(diǎn)擊事件

render中更新按鈕點(diǎn)擊的時候已經(jīng)將要更新的todo保存到updateTodo中，當(dāng)用戶修改輸入框內(nèi)容并點(diǎn)擊更新的時候，就會將舊的todo和新的todo合并成更新后的todo，然后調(diào)用update去更新這個todo，接著再render一次，最后清空輸入框

 $btnUpdate.onclick = () => {
            update({...updateTodo, content: $inputContent.value})
            render([...getAll()])
            $inputContent.value = ""
        }

源代碼：https://github.com/followWinter/data-structure