摘要:概述這里講的數組是指數據結構中的數組,而不是專指中的數組,只是使用來探究數據結構中的數組,因為我覺得比較方便。
0x000 概述
這里講的數組是指數據結構中的數組,而不是專指js中的數組,只是使用js來探究數據結構中的數組,因為我覺得js比較方便。
0x001 數組數組是啥?看圖:
數組有兩個要素:
索引:圖中的0,1,2,3,4
數據:圖中的data1-data5
可以通過索引找到某個數據,然后對這個數據操作,而這里的數據是泛指,因為數組是一種通用的數據結構,可以存儲任意的數據,比如數字、對象、字符串,甚至數組也可以。
數組的操作
搜索
添加/更新
刪除
0x002 初始化js中數組的初始化很簡單,方式也很多:
[] // [] [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]
這里我們選擇最簡單的來實現init:
function init() { return [] }0x002 插入
js中插入的方法也很多,每個方法也都有自己的特色,其實js的數組就已經自帶實現了很多的數據結構
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]
我們依舊選擇最簡單索引方式,因為這比較符合數據結構中數組的使用,push是更適合其他數據結構的操作。
function insert(arr, index, data) { arr[index] = data return arr }0x003 查找
js數組查找的方法也很多
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) }0x004 刪除
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 }0x005 使用
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) }0x006 注意
當然,我們平常并不會這么使用js,這只是為了演示數組而已:
let data=[1,2,3] data.push(4) data.push(5) data.push(6) data.filter(d=>d===1) data.splice(0,1)0x007 栗子:使用數組完成todoList
效果
todoService: 該文件用來提供todo的增刪改查服務
let todoService = [] /** * 獲取所有的 todo
*/ function getAll() { return todoService } /** * 添加一個 todo 到 todo 列表中 * @param todo */ function add(todo) { todo.id = todoService.length todoService.push(todo) } /** * 根據 todo 的 id 刪除一個 todo * @param id * @private */ function delete_(id) { todoService.splice(findIndexById(id), 1) } /** * 根據一個修改過的 todo 更新 todo * @param todo */ function update(todo) { todoService[findIndexById(todo.id)] = {...todo} } /** * 根據內容篩選符合條件的 todo * @param content * @returns {*[]} */ function find(content) { return todoService.filter(todo => todo.content === content) } /** * 根據 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
完成添加按鈕的點擊事件
當用戶輸入內容并點擊添加的時候,會根據輸入內容創建一個新的todo,并調用add將新的todo保存到todoList中,接著調用render將所有的todo渲染到dom中,最后清空輸入框。
$btnAdd.onclick = () => { let content = $inputContent.value add({content: content}) render([...getAll()]) $inputContent.value = "" }
完成搜索按鈕點擊事件
當用戶輸入內容并點擊搜索按鈕的時候,會根據輸入的內容調用find,該函數返回了所有內容和輸入內容相同的todo,將這些todo渲染到dom中就獲得了搜索之后的todo,最后清空輸入框。
$btnSearch.onclick = () => { let content = $inputContent.value render(find(content)) $inputContent.value = "" }
完成todoLsit的渲染
為了方便,該函數直接將ul的子元素全部清空,然后根據傳入的todoList重新渲染子元素,其中為每個一個todo創建了一個刪除按鈕和更新按鈕。刪除按鈕點擊的時候講調用delete_將這個 todo從todoList中移除,更新按鈕點擊的時候只會將當前的todo保存到變量中,準備進行更新操作
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) }) }
完成更新按鈕點擊事件
render中更新按鈕點擊的時候已經將要更新的todo保存到updateTodo中,當用戶修改輸入框內容并點擊更新的時候,就會將舊的todo和新的todo合并成更新后的todo,然后調用update去更新這個todo,接著再render一次,最后清空輸入框
$btnUpdate.onclick = () => { update({...updateTodo, content: $inputContent.value}) render([...getAll()]) $inputContent.value = "" }0x007 資源
源代碼:https://github.com/followWinter/data-structure
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98937.html
摘要:概述開坑系列文章,不知道會寫到什么程度,畢竟寫文章并不在行,存在當做筆記做,先不講理論,實踐先行。 0x000 概述 開坑 react 系列文章,不知道會寫到什么程度,畢竟寫文章并不在行,存在當做筆記做,先不講理論,實踐先行。 0x001 創建項目 $ mkdir 0x001-helloworld $ cd 0x001-helloworld $ yarn init -y 0x0002 ...
摘要:概述這篇文章是說鏈表,鏈表這種數據結構非常普遍,有時候我們根本就沒有意識到用的是鏈表啥是鏈表鏈表就是用繩子連起來的酒瓶子,酒就是數據,每個酒瓶子都連著下一個酒瓶子。 0x000 概述 這篇文章是說鏈表,鏈表這種數據結構非常普遍,有時候我們根本就沒有意識到用的是鏈表 0x001 啥是鏈表 鏈表就是用繩子連起來的酒瓶子,酒就是數據,每個酒瓶子都連著下一個酒瓶子。 showImg(https...
摘要:這就是所謂的箭頭函數不綁定,而在我看來,回調函數就是箭頭函數最好的歸宿。 0x000 概述 箭頭函數有兩個作用: 更簡短的寫法 不綁定this 0x001 語法一表覽 ()=>{} ()=>{console.log(arrow);return null} ()=>hello (num1, num2)=>num1+num2 num=>++num ()=>({name:arrow})...
0x000 概述 這篇文章說的是隊列,隊列的用處也賊大,削峰、限流、消息異步化等等等 0x001 什么是隊列 隊列就是先入先出的數組,就和平常銀行排隊一樣,先排隊的人先處理事務,如圖 showImg(https://segmentfault.com/img/bVbi4Hp?w=1774&h=560);只有兩個操作: 入隊:將數據放入隊列 出隊:將數據取出并處理 0x002 初始化 js中的隊列...
摘要:概述今天玩得是棧,棧的用處非常廣泛啊,比如函數的調用棧啊,的的的啊,之類的,一坨一坨的。 0x000 概述 今天玩得是棧,棧的用處非常廣泛啊,比如函數的調用棧啊,h5的history的state的api啊,之類的,一坨一坨的。 0x001 什么是棧 棧就是一個后入先出的數組,并且這個數組只能從一端進來,再從這一端出去,就像是放在長筒紙盒里面的羽毛球,他只有兩個動作 push: 將數...
閱讀 3192·2023-04-26 01:39
閱讀 3345·2023-04-25 18:09
閱讀 1612·2021-10-08 10:05
閱讀 3228·2021-09-22 15:45
閱讀 2758·2019-08-30 15:55
閱讀 2393·2019-08-30 15:54
閱讀 3167·2019-08-30 15:53
閱讀 1324·2019-08-29 12:32