码迷,mamicode.com
首页 > 编程语言 > 详细

[Algorithms] Tree Data Structure in JavaScript

时间:2018-12-18 11:10:08      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:date()   form   repeat   col   algo   amp   print   let   structure   

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

*/

 

[Algorithms] Tree Data Structure in JavaScript

标签:date()   form   repeat   col   algo   amp   print   let   structure   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!