2021年前端面试：
记录前端面试中，遇到的陌生或者有趣的知识点分享给大家
目录
实现三个按钮进行切换时，修改按钮样式：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- 单选框 -->
<div>
<ul class="buttonList">
<li class="active">按钮1</li>
<li>按钮2</li>
<li>按钮3</li>
</ul>
</div>
</body>
<script>
function siblings(elm) {
var a = []; // 保存所有兄弟节点
var p = elm.parentNode.children; // 获取父级的所有子节点
for (var i = 0; i < p.length; i++) { // 循环
if (p[i].nodeType === 1 && p[i] !== elm) { // 如果该节点是元素节点与不是这个节点本身
a.push(p[i]); // 添加到兄弟节点里
}
}
return a;
}
let litag = document.getElementsByTagName('ul')[0];
litag.addEventListener('click', function(e) {
if (e.target.tagName === 'UL') {
return ;
}
e.stopPropagation();
e.target.classList.add('active');
let sibling = siblings(e.target);
for (var j = 0; j < sibling.length; j++) {
sibling[j].classList.remove('active');
}
});
</script>
<style>
.buttonList{
color: red;
}
.active{
color:blue;
background-color: lightgoldenrodyellow;
}
li{
background-color: yellow;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 10px 0;
list-style-type:none ;
display:inline-block;
}
</style>
</html>关于[]
[]==[]//false
[]!==[]//true
[]==![]//true只讲解第三个：转自https://blog.csdn.net/qiqi_77_/article/details/79456605
关于==与===的区别相信大家都很清楚啦，这理解不再赘述，今天我们来看下[]==![]的结果。
这是楼主碰到过得一个面试题，恩，华丽丽的答错了：
[]==[] //false，这个是常识，因为在两边都是相同数据类型时，==是直接比较两边数据，结果为false，因为[]属于引用类型，在两个[]分别指向不同的堆内存，不熟悉的引用类型的小伙伴请参考楼主文章：值类型引用类型；
而当前这题：
[]==![]//true
这个结果是怎么的出来的呢？
首先我们知道，！的优先级要大于==的，所以先运算右边，![]---->结果为false，
这样[]==![]就等价于于：
[]==false
再来看，这时候==两边数据类型就不相等辣，我们知道，当==两边数据类型不一致时，要先做数据类型转换，再判断，== 类型转换规则如下:
值类型 == 值类型 //相当于 Number(值类型) == Number(值类型)
引用类型 == 值类型 // 对象转化成原始类型的值，再进行比较
比较规则：数组与数值进行比较，会先转成数值，再进行比较；与字符串进行比较，会先转成字符串，再进行比较；与布尔值进行比较，两个运算子都会先转成数值，然后再进行比较。我们知道值类型之间==：
'true' == true //false，Number('true')为NAN，Number(true)为1那么本题值类型和引用类型之间==
[] == false //相当于，Number([])为0，Number(false)为0，
所以0==0//true。
过程：[]==![] ----> []==false -----> 0==0 --->//true其实更详细还可参考知乎上的一个回答：因为 [] 是对象，比较过程依ToPrimitive([]) == false 比较。ToPrimitive 默认是调用 toString 方法的，于是 ToPrimitice([]) 等于空字符串，即''==false，然后ToNumber('')==0，即0==0，true。附链接：知乎Belleve用户回答。
相等运算符（==）隐藏的类型转换，会带来一些违反直觉的结果，下面整理一些：
0 == '' // true
0 == '0' // true
2 == true // false
2 == false // false
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' \t\r\n ' == 0 // true
\t \r \n都是转义字符，空格就是单纯的空格，输入时可以输入空格
\t 的意思是 横向跳到下一制表符位置
\r 的意思是 回车
\n 的意思是回车换行
————————————————
版权声明：本文为CSDN博主「qiqi_77_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qiqi_77_/article/details/79456605
二叉树中序深度遍历和回溯算法
* Definition for a binary tree node.
* function TreeNode(val) {
* this.val = val;
* this.left = this.right = null;
* }
*/
/**
* @param {TreeNode} root
* @return {string[]}
*/
var binaryTreePaths = function(root) {
var res = [],tmp = []; //res为结果，tmp保存每次递归已遍历过的节点值
dfs(root);
return res;
function dfs(root) {
if(root == null) { //空子节点需要return
return;
}
if(root != null && root.left == null && root.right == null) { //遇到叶子节点
tmp.push(root.val);
res.push(tmp.join('->'));
tmp.pop();
return;
}
tmp.push(root.val);
dfs(root.left);
dfs(root.right);
tmp.pop();
}
};
作者：chen-ke-jie-ryan
链接：https://leetcode-cn.com/problems/binary-tree-paths/solution/dfssi-lu-qing-xi-by-chen-ke-jie-ryan/
来源：力扣（LeetCode）
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。