iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS中位运算符的一些妙用
  • 216
分享到

JS中位运算符的一些妙用

2024-04-02 19:04:59 216人浏览 泡泡鱼
摘要

目录前言:1. 使用左移运算符 << 迅速得出2的次方2. 使用 ^ 切换变量 0 或 13. 使用 & 判断奇偶性4. 使用 !! 将数字转为布尔值5. 使用~

前言:

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位运算符妙用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JS中位运算符的一些妙用

本文链接: https://www.lsjlt.com/news/142842.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS中位运算符的一些妙用
    目录前言:1. 使用左移运算符 << 迅速得出2的次方2. 使用 ^ 切换变量 0 或 13. 使用 & 判断奇偶性4. 使用 !! 将数字转为布尔值5. 使用~...
    99+
    2022-11-13
  • JS ES6展开运算符的几个妙用
    目录1. 添加属性2. 合并多个对象3. 移除对象属性4.动态移除属性5. 调整属性顺序6. 设置属性默认值7: 属性重命名8. 还有更秀的操作1. 添加属性 复制对象的同时,为其添...
    99+
    2022-11-12
  • JavaScript中7种位运算符在实战的妙用
    目录位运算符按位非 ~按位与 &按位或 |按位异或 ^左移 <<有符号右移 >>无符号右移 >>>实战中的妙用1.判断奇偶数2. 使...
    99+
    2022-11-13
  • JS位运算符怎么用
    这篇文章主要介绍了JS位运算符怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JS位运算符怎么用文章都会有所收获,下面我们一起来看看吧。按位与(AND)&将数字转换成二进制,然后进行与操作,再转换回...
    99+
    2023-06-27
  • JS位运算符的使用方法有哪些
    本篇内容主要讲解“JS位运算符的使用方法有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS位运算符的使用方法有哪些”吧!1. 使用左移运算符 << 迅速得出2的次方1 ...
    99+
    2023-06-29
  • JS中一些高效的魔法运算符总结
    JavaScript 现在每年都会发一个新版本,里面也会新增一些操作更加便利、高效的运算符。今天我们就来盘点下几个高效的魔法运算符。 1. 可选链运算符 之前当我们想要使用某个结构...
    99+
    2022-11-12
  • js如何使用位运算符来取整
    小编给大家分享一下js如何使用位运算符来取整,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!使用~、>>、<<、>>>、|...
    99+
    2023-06-27
  • C#中有哪些移位运算符
    今天就跟大家聊聊有关C#中有哪些移位运算符,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。C#移位运算符中的<< 和 >> 运算符用于执行移位运算。shift-...
    99+
    2023-06-18
  • JavaScript的按位运算符有哪些
    本篇内容主要讲解“JavaScript的按位运算符有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript的按位运算符有哪些”吧!JavaScr...
    99+
    2022-10-19
  • C#中的位运算符怎么用
    本文小编为大家详细介绍“C#中的位运算符怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“C#中的位运算符怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。实例请看下面的实例,了解 C# 中所有可用的位运算...
    99+
    2023-06-17
  • java中位运算符的应用范围有哪些
    java中位运算符的应用范围有哪些?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。常用的java框架有哪些1.SpringMVC,Spring Web MVC是一种基于Java的...
    99+
    2023-06-14
  • 一文总结JS中逻辑运算符的特点
    目录Js中的逻辑运算符描述JS逻辑运算符的特点1. 取反 !2. 逻辑与 &&3. 逻辑或 ||总结 Js中的逻辑运算符 JavaScript中有三个逻辑运...
    99+
    2022-11-13
  • Java中的位运算符全解
    目录1. &(按位与运算符)2. |(按位或运算符)3. ^(异或运算符)4. <<(左移运算符)5. >> (右移移运算符)6. ~(取反运算符)7...
    99+
    2022-11-13
  • Java中的位运算与移位运算有哪些
    本篇内容介绍了“Java中的位运算与移位运算有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!位运算按位“与” &规则: 如果两个...
    99+
    2023-06-22
  • C#支持的位运算符有哪些
    本篇内容主要讲解“C#支持的位运算符有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“C#支持的位运算符有哪些”吧!位运算符位运算符作用于位,并逐位执行操作。&、 | 和 ^ 的真值表...
    99+
    2023-06-17
  • JS中使用扩展运算符的方法有哪些
    本篇内容主要讲解“JS中使用扩展运算符的方法有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS中使用扩展运算符的方法有哪些”吧!复制数组我们可以使用展开操...
    99+
    2022-10-19
  • java中一元运算符有哪些
    java中的一元运算符有:1.递增运算符,数值加1;2.递减运算符,数值减1;java中的一元运算符有以下两种递增运算符(++)java中递增运算符的作用是用于对数值加1,并返回一个数值。int x = 1;y1 = x ++; //返回 ...
    99+
    2022-10-12
  • c语言中的移位运算符
    移位运算符在程序设计中,是位操作运算符的一种。移位运算符可以在二进制的基础上对数字进行平移。 c语言中提供了两种移位运算符: 左移运算符:<< 右移运算符:>&...
    99+
    2022-11-12
  • js位运算在实际中如何使用
    这篇文章主要介绍了js位运算在实际中如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇js位运算在实际中如何使用文章都会有所收获,下面我们一起来看看吧。什么是位运算从现代计算机中所有的数据二进制的形式存储在...
    99+
    2023-06-29
  • 一起盘点JavaScript中一些强大的运算符
    目录前言一、??空值合并运算符二、??=空赋值运算符三、?.可选链操作符四、?:三元运算符五、逻辑与(&&)和逻辑或(...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作