日常开发的一些骚操作……

321 阅读3分钟

注:以下代码在项目中请谨慎使用

一:位运算符:

在javascript中,位运算只对整数起作用,如果一个运算数不是整数,会自动转为整数后再运行。

JavaScript内部,数值都是以64位浮点数的形式储存,但是做位运算的时候,是以32位带符号的整数进行运算的,并且返回值也是一个32位带符号的整数。


1.^按位异或运算符(交换两整数的值):

常规操作:

let a = 10;
let b = 20;
let temp = a;
a = b;
b = temp;
//或
b = [a,a=b][0];

按位异或交换值:

let a = 10;
let b = 20;
a^=b;
b^=a;
a^=b;


2.^按位异或运算符(比较两数是否相等):

/*常规判断*/
if(a != b) console.log('不相等');
/*按位异或*/
if(a^b) console.log('不相等');

这个很好理解,就不再画图解释了

3.1|按位或运算符(实现Math.floor()):

let a = 10.9;
console.log(a|0);
//10

注意文章开头说的这句话:在javascript中,位运算只对整数起作用,如果一个运算数不是整数,会自动转为整数后再运行。


3.2|按位或运算符(实现Math.round()):

let a = 10.1;
console.log(a+0.5|0);
//10
let b = 10.9;
console.log(b+0.5|0);
//11

和上面3.1同理

4.&按位与运算符(使用 & 判断奇偶性)

console.log(11&1)//1奇数
console.log(10&1)//0偶数



5.<<左移运算符(迅速得出2的次方)

console.log(1<<2)//4
console.log(1<<3)//8



二:VUE中如何在组件外部调用生命周期


VUE提供了@hook可以允许我们在组件外部监听组件内声明周期的执行并执行一系列操作

在我们使用第三方组件库时,这个特性非常好用


比如监听子组件内数据变化或子组件销毁时同时销毁监听事件

三:VUE的watch

1.watch立即触发:

我们在实现列表输入搜索时,可以通过watch监听输入框绑定的值来触发搜索,但在监听时,首次获取数据还需要在created或mounted中进行第一次获取列表的操作

VUE提供了配置watch立即触发的属性,这样就可以省略部分代码


2.监听随心而动,随时取消,随时开启

有这么一个需求:监听页面表单变化,若变化,则在点击保存时弹出提示

常规思路watch深度监听表单,当表单元素值发生变化后,点击保存时弹出提示

但是有一个问题,接口返回表单数据后,数据回填,首次就会触发watch,导致触发保存提示

那么有同学就要说了,我们可以给一个标识,接口返回后,改变标识,监听时再判断标识是否改变,巴拉巴拉巴拉…………

其实这里VUE提供了一种可以控制watch监听开启/取消的API

可以使用this.$watch来执行监听,this.$watch会返回一个unwatch的方法,调用unwatch就可以取消监听。

下面是伪代码: