JS中位运算符的一些妙用

目录
  • 前言:
  • 1.使用左移运算符<<迅速得出2的次方
  • 2.使用^切换变量0或1
  • 3.使用&判断奇偶性
  • 4.使用!!将数字转为布尔值
  • 5.使用~、>>、<<、>>>、|来取整
  • 6.使用^来完成值交换
  • 7.使用^判断符号是否相同
  • 8.使用^来检查数字是否不相等
  • 9.n&(n-1),如果为0,说明n是2的整数幂
  • 10.使用A+0.5|0来替代Math.round()
  • String
    • 1.使用toString(16)取随机字符串
    • 2.使用split(0)
    • 3.使用.link()创建链接
    • 4.使用Array来重复字符
  • 其他一些花里胡哨的操作
    • 1.使用当前时间创建一个随机数
    • 2.一些可以替代undefined的操作
    • 3.使用Array.length=0来清空数组
    • 4.使用Array.slice(0)实现数组浅拷贝
    • 5.使用!+“1”快速判断IE8以下的浏览器
    • 6.for循环条件的简写
  • 总结

前言:

Javascript 完全套用了 Java 的位运算符,包括按位与&、按位或|、按位异或^、按位非~、左移<<、带符号的右移>>和用0补足的右移>>>。这套运算符针对的是整数,所以对 JavaScript 完全无用,因为 JavaScript 内部,所有数字都保存为双精度浮点数。如果使用它们的话,JavaScript 不得不将运算数先转为整数,然后再进行运算,这样就降低了速度。而且"按位与运算符"&同"逻辑与运算符"&&,很容易混淆。

1. 使用左移运算符 << 迅速得出2的次方

	1 << 2  // 4, 即 2的2次方
	1 << 10 // 1024, 即 2的10次方

	// 但是要注意使用场景
	a = 2e9;   // 2000000000
	a << 1;    // -294967296

2. 使用 ^ 切换变量 0 或 1

	// --- before ---
    // if 判断
    if (toggle) {
        toggle = 0;
    } else {
        toggle = 1;
    }
    // 三目运算符
    togle = toggle ? 0 : 1;

    // --- after ---
    toggle ^= 1;

3. 使用 & 判断奇偶性

	console.log(7 & 1);    // 1
    console.log(8 & 1) ;   // 0

4. 使用 !! 将数字转为布尔值

所有非0的值都是true,包括负数、浮点数:

	console.log(!!7);       // true
    console.log(!!0);       // false
    console.log(!!-1);      // true
    console.log(!!0.71);    // true

5. 使用~、>>、<<、>>>、|来取整

相当于使用了 Math.floor()

	console.log(~~11.71)     // 11
    console.log(11.71 >> 0)  // 11
    console.log(11.71 << 0)  // 11
    console.log(11.71 | 0)   // 11
    console.log(11.71 >>> 0) // 11

注意 >>> 不可对负数取整

6. 使用^来完成值交换

在 ES6 的解构赋值出来之前,用这种方式会更快(但必须是整数):

	// --- before ---
    let temp = a; a = b; b = temp; // 传统,但需要借助临时变量
    b = [a, a = b][0] // 借助数组

    // --- after --- 只能用于整数
    let a = 7
    let b = 1
    a ^= b
    b ^= a
    a ^= b
    console.log(a)   // 1
    console.log(b)   // 7

    [a, b] = [b, a]; // ES6,解构赋值

7. 使用^判断符号是否相同

只能应用与整数

	(a ^ b) >= 0; //  true 相同; false 不相同

8. 使用^来检查数字是否不相等

	// --- before ---
    if (a !== 1171) {...};

    // --- after ---
    if (a ^ 1171) {...};

9. n & (n - 1),如果为 0,说明 n 是 2 的整数幂

10. 使用 A + 0.5 | 0 来替代 Math.round()

String

1. 使用toString(16)取随机字符串

	Math.random().toString(16).substring(2, 15);

.substring() 的第二个参数控制取多少位 (最多可取13位)

2. 使用 split(0)

使用数字来做为 split 的分隔条件可以节省2字节(不实用)

	// --- before ---
    "alpha,bravo,charlie".split(",");

    // --- after ---
    "alpha0bravo0charlie".split(0);

3. 使用.link() 创建链接

一个鲜为人知的方法,可以快速创建 a 标签

	// --- before ---
    let b = `<a herf="www.google.com">google</a>`;

    // --- after ---
    let b =  google .link( www.google.com );

4. 使用 Array 来重复字符

    // --- before ---
    for (let a = "", i = 7; i--;) a+= 0;

    // --- after ---
    let b = Array(7).join(0); // "0000000"let c = Array(7).join( La ) // "LaLaLaLaLaLa"

    // ES6
    let d = "0".repeat(7); // "0000000"

其他一些花里胡哨的操作

1. 使用当前时间创建一个随机数

    // --- before ---
    let b = 0 | Math.random() * 100

    // --- after ---
    let a;
    a = new Date % 100; // 两位随机数
    a = new Date % 1000; // 三位随机数
    a = new Date % 10000; // 四位随机数...依次类推
    // 不要在快速循环中使用,因为毫秒可能没有变化;

2. 一些可以替代 undefined 的操作

3. 使用 Array.length = 0 来清空数组

4. 使用 Array.slice(0) 实现数组浅拷贝

5. 使用 !+“1” 快速判断 IE8 以下的浏览器

6. for 循环条件的简写

    // --- before ---
    for(let i = 0; i < arr.length; i++) {...}

    // --- after ---
    for(let i = arr.length; i--;) {...} // 注意 i-- 后面的分号别漏了

总结

到此这篇关于JS中位运算符的一些妙用的文章就介绍到这了,更多相关JS位运算符妙用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript使用位运算符判断奇数和偶数的方法

    本文实例讲述了JavaScript使用位运算符判断奇数和偶数的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • JavaScript按位运算符的应用简析

    大多数语言都提供了按位运算符,按位运算符在c,c++等语言中运用广泛,而在JS,AS等脚本语言中则没有太多的应用例子,有时候,适当的使用按位运算符会取得很好的效果.下面根据自己的认知简单的谈一下js中的位操作使用(同样适用于其他语言),如果有错误,欢迎指正. 按位运算符是把操作数看作一系列单独的位,而不是一个数字值.所以在这之前,不得不提到什么是"位":数值或字符在内存内都是被存储为0和1的序列,每个0和1被称之为1个位,比如说10进制数据2在计算机内被存储为 0 0 0 0 0 0

  • javascript运算符——位运算符全面介绍

    前面的话 位运算符是非常底层的运算,由于其很不直观,所以并不常用.但是,其速度极快,且合理使用能达到很好的效果.本文将介绍javascript中常常被忽视的运算符--位运算符 二进制表示 ECMAScript中的所有数值都以IEEE-754 64位格式存储,但位操作符并不直接操作64位的值,而是以32位带符号的整数进行运算的,并且返回值也是一个32位带符号的整数 这种位数转换使得在对特殊的NaN和Infinity值应用位操作时,这两个值都会被当成0来处理 如果对非数值应用位操作符,会先使用Num

  • JS中位运算符的一些妙用

    目录 前言: 1.使用左移运算符<<迅速得出2的次方 2.使用^切换变量0或1 3.使用&判断奇偶性 4.使用!!将数字转为布尔值 5.使用~.>>.<<.>>>.|来取整 6.使用^来完成值交换 7.使用^判断符号是否相同 8.使用^来检查数字是否不相等 9.n&(n-1),如果为0,说明n是2的整数幂 10.使用A+0.5|0来替代Math.round() String 1.使用toString(16)取随机字符串 2.使用spli

  • react 源码中位运算符的使用详解

    位运算符基本使用 按位与(&):a & b对于每一个比特位,两个操作数都为 1 时, 结果为 1, 否则为 0 按位或(|):a | b对于每一个比特位,两个操作数都为 0 时, 结果为 0, 否则为 1 按位异或(^):a ^ b对于每一个比特位,两个操作数相同时, 结果为 1, 否则为 0 按位非(~):~ a反转操作数的比特位, 即 0 变成 1, 1 变成 0 0000 0000 0000 0000 0000 0000 0000 0011 -> 3 1111 1111 111

  • 教你JS中的运算符乘方、开方及变量格式转换

    1)如何计算乘方 题一:3的4次方(不会打,请原谅 ==!!!) 3的4次方=3*3*3*3 var a = Math.pow(3,4); console.log(a); 说明:Math.pow()是用来计算乘方的语法 注意:Math的M是大写: 题二:3的4*5次方 var a =Math.pow(3,4*5); console.log(a); 2)如何计算根号 题目:根号81 var a = Math.sqrt(81); console.log(a); 变量格式转换 用户的输入 var ye

  • 浅谈JS中逗号运算符的用法

    注意: 一.由于目前正在功读JavaScript技术,所以这里拿JavaScript为例.你可以自己在PHP中试试. 二.JavaScript语法比较复杂,因此拿JavaScript做举例. 最近重新阅读JavaScript权威指南这本书,应该说很认真的阅读,于是便想把所学的东西多记录下来.后 面本人将逐步写上更多关于本书的文章. 本文的理论知识来自于JavaScript权威指南,我这里做一下整理,或者说叫笔记. 如果你的基础够好的话,完全理解不成问题,但是如果读得有些郁闷的话,可以加我的QQ:

  • js中位运算的运用实例分析

    我们可能很少在编程中用位运算,如果没深入学习,可能也很难理解.平时的数值运算,其实是要先转换成二进制再进行运算的,而位运算就是直接进行二进制运算,所以位运算的执行效率肯定是更高的.下面通过一些实例来加深对位运算的理解. 按位与(&) &&运算符我们都知道,只有两个都为真,结果才为真.&道理是一样的,只有两个数的值为1时,才返回1.例如1和3的按位与操作: 0001 &  0011   ---------     0001 只有对应的数为1时,结果才为1,其他都为0.

  • JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结

    本文实例讲述了JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作.分享给大家供大家参考,具体如下: Js 中的运算符优先级 优先级依次降低 () !.-.++.– *./.% +.- <.<=.<.>= ==.!=.===.!==. && || ?: =.+=.-=.*=./=.%= URL 编码和解码 encodeURIComponent() decodeURIComponent() encodeURI() decode

  • JavaScript中7种位运算符在实战的妙用

    目录 位运算符 按位非 - 按位与 & 按位或 | 按位异或 ^ 左移 << 有符号右移 >> 无符号右移 >>> 实战中的妙用 1.判断奇偶数 2. 使用^来完成值的交换 3. 使用~进行判断 4. 使用&.>>.|来完成rgb值和16进制颜色值之间的转换 5. 使用|.~.>>.<<.>>>来取整 本篇文章带大家了解一下JavaScript中的7种位运算符,看看如何妙用这7种位运算符,希望对

  • 浅析JS中常用类型转换及运算符表达式

    JS中的常用类型转换(一般用强制转换): 1.强制转为整数:parseInt:写法:x = parseInt(x); 2.强制转换位小为:parseFloat:写法:x = parseFloat(x); 3.检测类型:x = parseInt(x);       alert(typeof(true)); JS中常用的运算符表达式: 1.逻辑运算符(布尔型):&& 并 :|| 或 :! 非 : 2.比较运算符:==(等于) :!=(不等于) : > :< :>=(大于等于)

  • JS ES6展开运算符的几个妙用

    1. 添加属性 复制对象的同时,为其添加新的属性. 例子中复制了user对象到userWithPass,并添加了password属性. const user = { id: 110, name: 'Kayson Li'} const userWithPass = { ...user, password: 'Password!' } user //=> { id: 110, name: 'Kayson Li'} userWithPass //=> { id: 110, name: 'Kayson

  • js中不常见的运算符与操作符总结

    javaScript常用运算符和操作符总结 类别 操作符 算术操作符 +. –. *. /. %(取模) 字符串操作符 + 字符串连接   +=字符串连接复合 布尔操作符 !. &&.  ||  一元操作符 ++ . -- .  +(一元加).    -(一元减) 关系比较操作符 < . <= . >  .>=.   !=  . == .  === .  !==  按位操作符 ~ 按位非    &按位与     | 按位或     ^按位异或    <

随机推荐