[Algorithms] Tree Data Structure in JavaScript

In a tree, nodes have a single parent node and may have many children nodes. They never have more than one parent nor point to any siblings.

The most common tree structure you see is a web page. The underlying structure is often called the "DOM tree". The html element forms the root of our tree, with children of head and body, so on and so forth. In this lesson, we‘ll create a quick example of a DOM tree with our tree data structure.

function crateNode (key) {
    let children = [];
    return {
        key,
        children,
        addChild (cKey) {
            const childNode = crateNode(cKey)
            this.children.push(childNode)
            return childNode;
        }
    }
}

function createTree (rootKey) {
    const root = crateNode(rootKey);

    function print () {
        let result = ‘‘;

        function traverse (node, visitFn, depth) {
            visitFn(node, depth);

            if (node.children.length) {
                node.children.forEach(n => traverse(n, visitFn, depth + 1))
            }
        }

        function addKeyToResult(node, depth) {
            result +=
              result.length === 0
                ? node.key
                : `\n${‘ ‘.repeat(depth * 2)}${node.key}`
        }

        traverse(root, addKeyToResult, 0)

        return result;
    }
    return {
        root,
        print
    }
}

const dom = createTree(‘html‘)
const head = dom.root.addChild(‘head‘)
const body = dom.root.addChild(‘body‘)
const title = head.addChild(‘title - egghead Tree Lesson‘)
const header = body.addChild(‘header‘)
const main = body.addChild(‘main‘)
const footer = body.addChild(‘footer‘)
const h1 = header.addChild(‘h1 - Tree Lesson‘)
const p = main.addChild(‘p - Learn about trees!‘)
const copyright = footer.addChild(`Copyright ${new Date().getFullYear()}`)

console.log(dom.print())

/*
html
  head
    title - egghead Tree Lesson
  body
    header
      h1 - Tree Lesson
    main
      p - Learn about trees!
    footer
      Copyright 2018

*/

原文地址:https://www.cnblogs.com/Answer1215/p/10134940.html

时间: 2024-10-07 16:46:11

[Algorithms] Tree Data Structure in JavaScript的相关文章

CDOJ 483 Data Structure Problem DFS

32‘20 Data Structure Problem Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/483 Description Data structure is a fundamental course of Computer Science, so that each contestant is highly likely to solve this data s

[LeetCode][JavaScript]Add and Search Word - Data structure design

Add and Search Word - Data structure design Design a data structure that supports the following two operations: void addWord(word) bool search(word) search(word) can search a literal word or a regular expression string containing only letters a-z or 

Use the Right Algorithm and Data Structure

Use the Right Algorithm and Data Structure Jan Christiaan "JC" van Winkel A big bank with many branch offices complained that the new computers it had bought for the tellers were too slow. This was in the time before everyone used electronic ban

(Data structure)Implement Trie And Add and Search Word

Implement Trie (Prefix Tree) Implement a trie with insert, search, and startsWith methods. Note:You may assume that all inputs are consist of lowercase letters a-z solution: class TrieNode { // Initialize your data structure here. boolean isEnd; Trie

Add and Search Word - Data structure design

https://leetcode.com/problems/add-and-search-word-data-structure-design/ Design a data structure that supports the following two operations: void addWord(word) bool search(word) search(word) can search a literal word or a regular expression string co

HDU 4217 Data Structure?(线段树 or 树状数组啊)

题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4217 Problem Description Data structure is one of the basic skills for Computer Science students, which is a particular way of storing and organizing data in a computer so that it can be used efficiently

[LeetCode] Add and Search Word - Data structure design 添加和查找单词-数据结构设计

Design a data structure that supports the following two operations: void addWord(word) bool search(word) search(word) can search a literal word or a regular expression string containing only letters a-z or .. A . means it can represent any one letter

Java for LeetCode 211 Add and Search Word - Data structure design

Design a data structure that supports the following two operations: void addWord(word)bool search(word) search(word) can search a literal word or a regular expression string containing only letters a-z or .. A . means it can represent any one letter.

[转]Data Structure Recovery using PIN and PyGraphviz

Source:http://v0ids3curity.blogspot.com/2015/04/data-structure-recovery-using-pin-and.html -------------------------------- Data Structure Recovery using PIN and PyGraphviz ? This is a simple POC PIN tool to recover data structures in dynamically lin