目录
vue中为什么要使用commit去提交mutation来修改state的状态
实现三个按钮进行切换时,修改按钮样式:
<!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)
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
vue中为什么要使用commit去提交mutation来修改state的状态
1.严格模式下,直接用给state赋值会报错
3.vue-dev-tool只有是用了commit之后,才可以跟踪数据的变化