新聞中心
這篇文章給大家分享的是有關(guān)javascript數(shù)據(jù)結(jié)構(gòu)之多叉樹經(jīng)典操作的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。

多叉樹可以實(shí)現(xiàn)復(fù)雜的數(shù)據(jù)結(jié)構(gòu)的存儲(chǔ),通過(guò)遍歷方法可以方便高效的查找數(shù)據(jù),提高查找的效率,同時(shí)方便管理節(jié)點(diǎn)數(shù)據(jù)。javascript的DOM其實(shí)就是以多叉樹的形式存儲(chǔ)的。下面用javascript來(lái)實(shí)現(xiàn)多叉樹的數(shù)據(jù)結(jié)構(gòu)
1、創(chuàng)造一個(gè)節(jié)點(diǎn)
數(shù)據(jù)是以節(jié)點(diǎn)的形式存儲(chǔ)的:
class Node {
constructor(data) {
this.data = data;
this.parent = null;
this.children = [];
}
}2、創(chuàng)造樹
樹用來(lái)連接節(jié)點(diǎn),就像真實(shí)世界樹的主干一樣,延伸著很多分支
class MultiwayTree {
constructor() {
this._root = null;
}
}3、添加一個(gè)節(jié)點(diǎn)
function add(data, toData, traversal) {
let node = new Node(data)
// 第一次添加到根節(jié)點(diǎn)
// 返回值為this,便于鏈?zhǔn)教砑庸?jié)點(diǎn)
if (this._root === null) {
this._root = node;
return this;
}
let parent = null,
callback = function(node) {
if (node.data === toData) {
parent = node;
return true;
}
};
// 根據(jù)遍歷方法查找父節(jié)點(diǎn)(遍歷方法后面會(huì)講到),然后把節(jié)點(diǎn)添加到父節(jié)點(diǎn)
// 的children數(shù)組里
// 查找方法contains后面會(huì)講到
this.contains(callback, traversal);
if (parent) {
parent.children.push(node);
node.parent = parent;
return this;
} else {
throw new Error('Cannot add node to a non-existent parent.');
}
}4、深度優(yōu)先遍歷
深度優(yōu)先會(huì)盡量先從子節(jié)點(diǎn)查找,子節(jié)點(diǎn)查找完再?gòu)男值芄?jié)點(diǎn)查找,適合數(shù)據(jù)深度比較大的情況,如文件目錄
function traverseDF(callback) {
let stack = [], found = false;
stack.unshift(this._root);
let currentNode = stack.shift();
while(!found && currentNode) {
// 根據(jù)回調(diào)函數(shù)返回值決定是否在找到第一個(gè)后繼續(xù)查找
found = callback(currentNode) === true ? true : false;
if (!found) {
// 每次把子節(jié)點(diǎn)置于堆棧最前頭,下次查找就會(huì)先查找子節(jié)點(diǎn)
stack.unshift(...currentNode.children);
currentNode = stack.shift();
}
}
}5、廣度優(yōu)先遍歷
廣度優(yōu)先遍歷會(huì)優(yōu)先查找兄弟節(jié)點(diǎn),一層層往下找,適合子項(xiàng)較多情況,如公司崗位級(jí)別
function traverseBF(callback) {
let queue = [], found = false;
queue.push(this._root);
let currentNode = queue.shift();
while(!found && currentNode) {
// 根據(jù)回調(diào)函數(shù)返回值決定是否在找到第一個(gè)后繼續(xù)查找
found = callback(currentNode) === true ? true : false;
if (!found) {
// 每次把子節(jié)點(diǎn)置于隊(duì)列最后,下次查找就會(huì)先查找兄弟節(jié)點(diǎn)
queue.push(...currentNode.children)
currentNode = queue.shift();
}
}
}6、包含節(jié)點(diǎn)
function contains(callback, traversal) {
traversal.call(this, callback);
}回調(diào)函數(shù)算法可自己根據(jù)情況實(shí)現(xiàn),靈活度較高
7、移除節(jié)點(diǎn)
// 返回被移除的節(jié)點(diǎn)
function remove(data, fromData, traversal) {
let parent = null,
childToRemove = null,
callback = function(node) {
if (node.data === fromData) {
parent = node;
return true;
}
};
this.contains(callback, traversal);
if (parent) {
let index = this._findIndex(parent.children, data);
if (index < 0) {
throw new Error('Node to remove does not exist.');
} else {
childToRemove = parent.children.splice(index, 1);
}
} else {
throw new Error('Parent does not exist.');
}
return childToRemove;
}_findIndex實(shí)現(xiàn):
function _findIndex(arr, data) {
let index = -1;
for (let i = 0, len = arr.length; i < len; i++) {
if (arr[i].data === data) {
index = i;
break;
}
}
return index;
}完整算法
class Node {
constructor(data) {
this.data = data;
this.parent = null;
this.children = [];
}
}
class MultiwayTree {
constructor() {
this._root = null;
}
//深度優(yōu)先遍歷
traverseDF(callback) {
let stack = [], found = false;
stack.unshift(this._root);
let currentNode = stack.shift();
while(!found && currentNode) {
found = callback(currentNode) === true ? true : false;
if (!found) {
stack.unshift(...currentNode.children);
currentNode = stack.shift();
}
}
}
//廣度優(yōu)先遍歷
traverseBF(callback) {
let queue = [], found = false;
queue.push(this._root);
let currentNode = queue.shift();
while(!found && currentNode) {
found = callback(currentNode) === true ? true : false;
if (!found) {
queue.push(...currentNode.children)
currentNode = queue.shift();
}
}
}
contains(callback, traversal) {
traversal.call(this, callback);
}
add(data, toData, traversal) {
let node = new Node(data)
if (this._root === null) {
this._root = node;
return this;
}
let parent = null,
callback = function(node) {
if (node.data === toData) {
parent = node;
return true;
}
};
this.contains(callback, traversal);
if (parent) {
parent.children.push(node);
node.parent = parent;
return this;
} else {
throw new Error('Cannot add node to a non-existent parent.');
}
}
remove(data, fromData, traversal) {
let parent = null,
childToRemove = null,
callback = function(node) {
if (node.data === fromData) {
parent = node;
return true;
}
};
this.contains(callback, traversal);
if (parent) {
let index = this._findIndex(parent.children, data);
if (index < 0) {
throw new Error('Node to remove does not exist.');
} else {
childToRemove = parent.children.splice(index, 1);
}
} else {
throw new Error('Parent does not exist.');
}
return childToRemove;
}
_findIndex(arr, data) {
let index = -1;
for (let i = 0, len = arr.length; i < len; i++) {
if (arr[i].data === data) {
index = i;
break;
}
}
return index;
}
}控制臺(tái)測(cè)試代碼
var tree = new MultiwayTree();
tree.add('a')
.add('b', 'a', tree.traverseBF)
.add('c', 'a', tree.traverseBF)
.add('d', 'a', tree.traverseBF)
.add('e', 'b', tree.traverseBF)
.add('f', 'b', tree.traverseBF)
.add('g', 'c', tree.traverseBF)
.add('h', 'c', tree.traverseBF)
.add('i', 'd', tree.traverseBF);
console.group('traverseDF');
tree.traverseDF(function(node) {
console.log(node.data);
});
console.groupEnd('traverseDF');
console.group('traverseBF');
tree.traverseBF(function(node) {
console.log(node.data);
});
console.groupEnd('traverseBF');
// 深度優(yōu)先查找
console.group('contains1');
tree.contains(function(node) {
console.log(node.data);
if (node.data === 'f') {
return true;
}
}, tree.traverseDF);
console.groupEnd('contains1')
// 廣度優(yōu)先查找
console.group('contains2');
tree.contains(function(node) {
console.log(node.data);
if (node.data === 'f') {
return true;
}
}, tree.traverseBF);
console.groupEnd('contains2');
tree.remove('g', 'c', tree.traverseBF);這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行效果如下:

感謝各位的閱讀!關(guān)于“javascript數(shù)據(jù)結(jié)構(gòu)之多叉樹經(jīng)典操作的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
網(wǎng)站題目:javascript數(shù)據(jù)結(jié)構(gòu)之多叉樹經(jīng)典操作的示例分析-創(chuàng)新互聯(lián)
本文來(lái)源:http://www.dlmjj.cn/article/dpcieo.html


咨詢
建站咨詢
