JavaScript中的单个竖线是什么意思？

Question

这个表达式在JS中意味着什么？

Value |= this.value

Answer 1

这将在位中this.value和已存储的位之间执行按位ORValue,然后将结果存储回Value.

var Value = 42;  // 00101010
Value |= 96;     // 01100000
window.alert(Value);  // 01101010 -> 106

Answer 2

它是二进制"OR",就像在C或C++或Java中一样.在这种情况下,它在其赋值运算符形式中使用,所以

value |= this.value

表示this.value并且value都被转换为32位整数,并执行按位OR运算.如果value为10和this.value操作之前分别为3(即,01010与011在二进制)的结果将是11(01011二进制).

Javascript中的二进制逻辑运算符在Javascript中是值得注意的,因为工作是在整数值上执行的.

术语"逐位"可能比"二进制"更准确.操作作用于数值的每个位,特别是强制转换为带符号的32位整数的数值.结果也是一个带符号的32位整数(根据规范).

但是,"静止"的JavaScript编号始终是64位二进制浮点值.因此,虽然使用32位整数数学计算,但按位运算符的结果以浮点形式存储.这是因为32位整数的范围可以在64位浮点中舒适而精确地拟合.

Answer 3

正如其他人所指出的,这是按位OR运算符.但是,我不认为人们在Javascript中对数值使用太多 - 通常 - 你没有在Javascript中做很多计算.为了更好地了解此运算符的用途,请考虑用户需要填写多个文本字段中至少一个的更常见的情况.

假设你有这个HTML:

<input type="text" class="phone-nr" id="home-phone-nr-1" />
<input type="text" class="phone-nr" id="home-phone-nr-2" />
<input type="text" class="phone-nr" id="home-phone-nr-3" />
<input type="text" class="phone-nr" id="mobile-phone-nr-1" />
<input type="text" class="phone-nr" id="mobile-phone-nr-2" />
<input type="text" class="phone-nr" id="mobile-phone-nr-3" />

用户可以选择填写多个电话号码,但必须至少提供一个.

最简单的方法(在这种情况下使用jQuery)是:

var valid = false;
$('.phone-nr').each(function(i, item){
  valid |= $(item).val();
}); // untested code

valid如果至少有一个带有类的输入字段具有phone-nr非空值,则为true .

如果必须填写每个字段(更常见的要求),可以使用按位AND运算符执行此操作:

var valid = true;
$('.phone-nr').each(function(i, item){
  valid &= $(item).val();
}); // untested code

valid仅当所有输入字段都有值时才会为true .

如果至少需要填写单个字段,但不能超过一个,则可以使用XOR运算符:

var valid = false;
$('.phone-nr').each(function(i, item){
  valid ^= $(item).val();
}); // untested code

在我看来,这些是Javascript中按位运算符的真实用法.

Answer 4

我找到的那个运算符的一些实际用途:

( 3|0 ) === 3;             // ????? ????? ?? ????????
( 3.3|0 ) === 3;           // ? ??????? ????? ??????????? ??????? ?????
( 3.8|0 ) === 3;           // ?? ?????????, ? ?????? ??????????? ??????? ?????
( -3.3|0 ) === -3;         // ? ??? ????? ? ? ????????????? ??????? ?????
( -3.8|0 ) === -3;         // ? ??????? Math.floor(-3.3) == Math.floor(-3.8) == -4
( "3"|0 ) === 3;           // ?????? ? ??????? ????????????? ? ????? ??????
( "3.8"|0 ) === 3;         // ??? ???? ????? ?? ????????????? ??????? ?????
( "-3.8"|0 ) === -3;       // ? ??? ????? ? ? ????????????? ??????? ?????
( NaN|0 ) === 0;           // NaN ?????????? ? ????
( Infinity|0 ) === 0;      // ?????????? ? ???? ?????????? ? ? ??????????????,
( -Infinity|0 ) === 0;     // ? ? ????? ??????????????,
( null|0 ) === 0;          // ? ? null,
( (void 0)|0 ) === 0;      // ? ? undefined,
( []|0 ) === 0;            // ? ? ?????? ????????,
( [3]|0 ) === 3;           // ?? ?????? ? ????? ?????? ?????????? ? ?????,
( [-3.8]|0 ) === -3;       // ? ??? ????? ? ????????????? ??????? ?????,
( [" -3.8 "]|0 ) === -3;   // ? ? ??? ????? ? ??????????? ????? ?? ?????,
( [-3.8, 22]|0 ) === 0     // ?? ?????? ? ??????????? ??????? ????? ??????????
( {}|0 ) === 0;                // ? ???? ????? ?????????? ?????? ??????
( {'2':'3'}|0 ) === 0;         // ??? ?? ??????
( (function(){})|0 ) === 0;    // ? ???? ????? ?????????? ?????? ???????
( (function(){ return 3;})|0 ) === 0;

对我来说还有一些魔力:

3 | '0px' === 3;