资讯专栏INFORMATION COLUMN

JS数据结构0x001:数组

Rindia / 810人阅读

摘要:概述这里讲的数组是指数据结构中的数组,而不是专指中的数组,只是使用来探究数据结构中的数组,因为我觉得比较方便。

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_将这个 todotodoList中移除,更新按钮点击的时候只会将当前的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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98937.html

相关文章

  • React入门0x001: 环境配置和 helloworld

    摘要:概述开坑系列文章,不知道会写到什么程度,毕竟写文章并不在行,存在当做笔记做,先不讲理论,实践先行。 0x000 概述 开坑 react 系列文章,不知道会写到什么程度,毕竟写文章并不在行,存在当做笔记做,先不讲理论,实践先行。 0x001 创建项目 $ mkdir 0x001-helloworld $ cd 0x001-helloworld $ yarn init -y 0x0002 ...

    yibinnn 评论0 收藏0
  • JS数据结构0x004:链表

    摘要:概述这篇文章是说链表,链表这种数据结构非常普遍,有时候我们根本就没有意识到用的是链表啥是链表链表就是用绳子连起来的酒瓶子,酒就是数据,每个酒瓶子都连着下一个酒瓶子。 0x000 概述 这篇文章是说链表,链表这种数据结构非常普遍,有时候我们根本就没有意识到用的是链表 0x001 啥是链表 链表就是用绳子连起来的酒瓶子,酒就是数据,每个酒瓶子都连着下一个酒瓶子。 showImg(https...

    sumory 评论0 收藏0
  • es6基础0x001:箭头函数

    摘要:这就是所谓的箭头函数不绑定,而在我看来,回调函数就是箭头函数最好的归宿。 0x000 概述 箭头函数有两个作用: 更简短的写法 不绑定this 0x001 语法一表览 ()=>{} ()=>{console.log(arrow);return null} ()=>hello (num1, num2)=>num1+num2 num=>++num ()=>({name:arrow})...

    stonezhu 评论0 收藏0
  • JS数据结构0x003:队列

    0x000 概述 这篇文章说的是队列,队列的用处也贼大,削峰、限流、消息异步化等等等 0x001 什么是队列 队列就是先入先出的数组,就和平常银行排队一样,先排队的人先处理事务,如图 showImg(https://segmentfault.com/img/bVbi4Hp?w=1774&h=560);只有两个操作: 入队:将数据放入队列 出队:将数据取出并处理 0x002 初始化 js中的队列...

    xuhong 评论0 收藏0
  • JS数据结构0x002:栈

    摘要:概述今天玩得是栈,栈的用处非常广泛啊,比如函数的调用栈啊,的的的啊,之类的,一坨一坨的。 0x000 概述 今天玩得是栈,栈的用处非常广泛啊,比如函数的调用栈啊,h5的history的state的api啊,之类的,一坨一坨的。 0x001 什么是栈 栈就是一个后入先出的数组,并且这个数组只能从一端进来,再从这一端出去,就像是放在长筒纸盒里面的羽毛球,他只有两个动作 push: 将数...

    noONE 评论0 收藏0

发表评论

0条评论

Rindia

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<