JavaScript: Trouble understanding logic in this while loop
Question
Noob alert! I can't seem to understand the logic inside this while loop. It is taken from O'Reilly's "JavaScript: The definitive Guide" Chapter 15.3, example 15-2. I understand that it is decrementing n with n--. But I can't understand the reasoning or theory behind it with the boolean AND operator. What is this loop saying? While n is decremented and var e exists? To me, it seems like it should be incrementing, but when I changed the -- to ++ the function always returns null. Help me to understand deeper.
var firstpara = document.getElementsByTagName("p")[0];
/**
* Return the nth ancestor of e, or null if there is no such ancestor
* or if that ancestor is not an Element (a Document or DocumentFragment e.g.).
* If n is 0 return e itself. If n is 1 (or
* omitted) return the parent. If n is 2, return the grandparent, etc.
*/
function parent(e, n) {
if (n === undefined) n = 1;
while (n-- && e) e = e.parentNode;
if (!e || e.nodeType !== 1) return null;
return e;
}
parent(firstpara, 1); //returns <body>...</body> which is the parent node in my testpage
3 answers
solution1
1 2016-04-10 16:57:31
It returns the n th parent of the <p> tag.
Suppose this is the sample code.
<div class="outer">
<div class="inner">
<p>Sample Code</p>
</div>
</div>
parent(firstpara,1) would give you the first ancestor, which is <div class="inner">...</div> in this sample.
parent(firstpara,2) would give you the second ancestor, which is <div class="outer">...</div> in this sample.
parent(firstpara,0) would give you the same tag, ie, <p>...</p>
finally, parent(firstpara,10000) would give you null because such ancestor does not exist(probably).
I hope I made it clear.
solution2
1 2016-04-10 17:03:07
The while conditional statement consists of two parts, n-- and e . As long as both are true, the loop continues. For the first part, it is false if (n--) == 0. Otherwise it is true. The 2nd part is true if e is defined. The first part is probably what you are hung up on. It is basically a short hand way of doing two statements: n = n - 1; followed by if (n != 0 AND e exists) then continue looping (pseudocode).
solution3
0 ACCPTED 2016-04-10 16:59:01
Assuming the double-asterisks are attempts at producing bold text in the example we are left with:
while (n-- && e) e = e.parentNode;
The n-- counts down the generation... once it hits zero it becomes false and therefore stops the loop. The -- will decrement the zero leaving -1, but that's OK as it was the value of n before the decrement that was tested.
The "e" also stops the loop if the nodes run out early as no value is false.
The && assures that n must still be positive AND an e exists to continue the while. Either bing false will end the loop.
Paranoid me would code the loop more like:
while (n-- > 0 && e) e = e.parentNode;
This assures that, no matter what, the code will not fail in strange ways. This is a general rule of loops I learned long ago and apply to all loops.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.