189 8069 5689
之前对js的一些涉及到二进制的运算符一直似懂非懂，看到了就一脸懵逼，还得去控制台算一下。然后最近看算法的时候又看到了这个运算符，这里就简单介绍一下学习这些位运算符的过程。
洛江网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作，到程序开发，运营维护。创新互联自2013年起到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
注意： 以下运算均不涉及到小数。
先说这句话是什么意思。左移位是二进制的一种运算，就是在不改变二进制数值32位长度的前提下，将每位的数字都向左移动，左边移出去的直接丢弃，右边空出来的位置用0填充。无符号就是保持符号位不变，即本来是正数，移位后一样为正数。
这里以 7 2 为例。
首先将7转为二进制是 0000 0000 0000 0000 0000 0000 0000 0111 .
然后对其向左移两位.
得到值为 0000 0000 0000 0000 0000 0000 0001 1100 .
转换为十进制为 28.即 7 2 = 28 。
然后我们对以上的运算过程做一个处理，将这些二进制转换为我们熟悉的十进制。
对移位后的算式进行合并项可得到 2^4 + 2^3 + 2^2 = (2^2 + 2^1 + 2^0) * 2^2 ，即 2^4 + 2^3 + 2^2 = (2^2 + 2^1 + 2^0) * 2^2 = 7 * 2^2 。由此我们可得出 7 2 = 7 * 2^2 = 28 。
我们通过计算几个简单的左移位运算，与标准答案进行比较，验证一下这个结论。
在控制台中以上几个算式的结果为
答案完全一致。说明我们的结论是正确的。当然这个结论 仅限于那些二进制移位不会左移移出的数字的简单运算 。当我们遇到一些简单的可以口算的左移位运算时就可以使用这个结论快速得到结果，如果对于 99999 66 这种较复杂的运算你也用这个结论计算，也没有人会介意。
下面我们看一下负数的左移位运算。以 -66 2 为例。
首先，我们先复习一下负数如何转换为二进制。
负数转换为二进制的步骤有三：
然后对其向左移两位.
得到值为 1111 1111 1111 1111 1111 1110 1111 1000 .然后我们将其转换成十进制。
转换为十进制为 -264.即 -66 2 = -264 。
刚刚我们计算 -66 的二进制得到的是 1111 1111 1111 1111 1111 1111 1011 1110 。我们在控制台验证一下我们得到的这个二进制。
我们比较一下下面几个算式。
是的没错，进行无符号左移位运算时，当两个数的绝对值相等时，其相同位数的移位的绝对值一定相等。
这里以 666 3 为例。
首先将666转换为二进制是 0000 0000 0000 0000 0000 0010 1001 1010 。
然后对其向右移三位。
得到值为 0000 0000 0000 0000 0000 0000 0101 0011 .
转换为十进制为 83.即 666 3 = 83 。
然后我们对以上的运算过程做一个处理，将这些二进制转换为我们熟悉的十进制。
这个规律好像不太好总结？
这里以 -666 3 为例。
因为是有符号的运算，所以这里不再适用上一小节说的js的特殊处理。先将-666转换为二进制。
即-666的二进制形式为 1111 1111 1111 1111 1111 1101 0110 0110 ，然后对其进行有符号右移位运算
移位后得到的值为 1111 1111 1111 1111 1111 1111 1010 1100 ，是一个负值，我们将其转成十进制。
我们对此结果进行验证。
可见，我们的运算是完全正确的。
这里我们以 666 3 为例。
首先将666转换为二进制是 0000 0000 0000 0000 0000 0010 1001 1010 。
然后对其向右移三位。
得到值为 0000 0000 0000 0000 0000 0000 0101 0011 .
转换为十进制为 83.即 666 3 = 83 。
这里以 -666 3 为例。
因为是有符号的运算，所以这里不再适用上一小节说的js的特殊处理。先将-666转换为二进制。
即-666的二进制形式为 1111 1111 1111 1111 1111 1101 0110 0110 ，然后对其进行有符号右移位运算
移位后得到的值为 0001 1111 1111 1111 1111 1111 1010 1100 ，转成十进制为536870828。
是不是超级大。因为是无符号右移位运算，所以在左边空出部分不论正负都会填充0.
我们对此结果进行验证。
可见，我们的运算是完全正确的。
注意：因为对负数进行无符号右移位运算时，所得结果很大，所以在使用过程中需要格外注意。
疑问：左移位和右移位根本都是只对位置进行了移动，那么对于 x1 k = y1 和 y2 k = x2 中的 x1 等于 x2 ， y1 等于 y2 吗？
不一定。因为我们不能确保移动过程中被丢弃的值均为0。但凡有一个1被丢弃，就不会相等。而如果被丢弃的都是0，那么 x1 === x2 y1 === y2 。如下图所示。
这里以 66 33 为例。
首先将两个数转换为二进制是 0000 0000 0000 0000 0000 0000 0100 0010 和 0000 0000 0000 0000 0000 0000 0010 0001 。
然后对其进行与运算。
得出结果为 0.
负数的与运算与正数并无区别，不做讨论。
这里以 66 | 66 为例。
首先将两个数转换为二进制是 0000 0000 0000 0000 0000 0000 0100 0010 和 0000 0000 0000 0000 0000 0000 0100 0010 。
然后对其进行与运算。
得出结果为 66.
负数的与运算与正数并无区别，不做讨论。
这里以 66 ^ 66 为例。
首先将两个数转换为二进制是 0000 0000 0000 0000 0000 0000 0100 0010 和 0000 0000 0000 0000 0000 0000 0100 0010 。
然后对其进行与运算。
得出结果为 0.
负数的与运算与正数并无区别，不做讨论。
这里以 ~66 为例。
首先将其转换为二进制是 0000 0000 0000 0000 0000 0000 0100 0010 。
然后对其进行与运算。
将结果（ 1111 1111 1111 1111 1111 1111 1011 1101 ）转换为十进制
得出结果为 -67.
这里我们再我看几个例子。
从中我们可以看出， 位非操作就是对数字加一，然后取负 。我们可以写个简单的判断方法来验证。
位运算符运算结果非常有趣，在平时可以多加应用，但是一定要注意可能产生大数的预算，避免产生不必要的BUG。
这篇文章只是做了一个简单的介绍。后面有空了会做一下在实际开发中的应用，虽然我可能很久都遇不到。
JavaScript学习指南：JS入门教程
script type="text/javascript"
function createDIV(){
var div=document.createElement("div");//创建一个DIV
div.setAttribute("id", "div");
document.body.appendChild(div); //主要加上这句，把新建的DIV加到页面上。
var left = div.offsetLeft;
setInterval(
function () {
left -= 10;
div.style.left = left+"px";
},
50);
}
/script
这样就可以了
为什么要搞个（无符号右移）？
就是为了处理有符号数的右移。因为如果用进行右移时，对于有符号数，左边填充的是符号位（正数填充0负数填充1）。而对于，都是填充0。
就是为有符号数而生的，怎么可能不能用于有符号数呢？
HTML部分
//要移动的div(操作的对象)
div class="test" style="background:#f00;width:100px;height:100px;"/div
//按钮来触发事件
input type="button" value="移动" id="move"/
原生js实现
var btn_click=document.getElementById("move"); //获取点击按钮
var box=document.querySelector(".test");//获取要移动的div
var a=0;
btn_click.onclick=function(){
a=a+50;
box.style.left=a+'px'; //每点击一次，向右移动50px
}