JavaScript前端开发时数值运算的小技巧

1.格式化金钱值

const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const money = ThousandNum(20190214);
// money => "20,190,214"

2.取整代替正数的Math.floor()，代替负数的Math.ceil()

const num1 = ~~ 1.69;
const num2 = 1.69 | 0;
const num3 = 1.69 >> 0;
// num1 num2 num3 => 1 1 1

3.转数值只对null、""、false、数值字符串有效

const num1 = +null;
const num2 = +"";
const num3 = +false;
const num4 = +"169";
// num1 num2 num3 num4 => 0 0 0 169

4.精确小数

const RoundNum = (num, decimal) => Math.round(num * 10 ** decimal) / 10 ** decimal;
const num = RoundNum(1.69, 1);
// num => 1.7

5.取最小最大值

const arr = [0, 1, 2];
const min = Math.min(...arr);
const max = Math.max(...arr);
// min max => 0 2

6.是否为空对象

const obj = {};
const flag = DataType(obj, "object") && !Object.keys(obj).length;
// flag => true

7.判断数据类型

function DataType(tgt, type) {
 const dataType = Object.prototype.toString.call(tgt).replace(/\[object (\w+)\]/, "$1").toLowerCase();
 return type ? dataType === type : dataType;
}
DataType("liner"); // "string"
DataType(2020630); // "number"
DataType(true); // "boolean"
DataType([], "array"); // true
DataType({}, "array"); // false

8.克隆数组

const _arr = [0, 1, 2];
const arr = [..._arr];
// arr => [0, 1, 2]

9.合并数组

const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const arr = [...arr1, ...arr2];
// arr => [0, 1, 2, 3, 4, 5];

10.去重数组

const arr = [...new Set([0, 1, 1, null, null])];
// arr => [0, 1, null]

11.截断数组

const arr = [...new Set([0, 1, 1, null, null])];
// arr => [0, 1, null]

12.交换赋值

let a = 0;
let b = 1;
[a, b] = [b, a];
// a b => 1 0

13.克隆对象

const _obj = { a: 0, b: 1, c: 2 }; // 以下方法任选一种(本人偏爱第一种，简单明了，与克隆数组几乎一样)
const obj = { ..._obj };
const obj = JSON.parse(JSON.stringify(_obj));
// obj => { a: 0, b: 1, c: 2 }

14.合并对象

const obj1 = { a: 0, b: 1, c: 2 };
const obj2 = { c: 3, d: 4, e: 5 };
const obj = { ...obj1, ...obj2 };
// obj => { a: 0, b: 1, c: 3, d: 4, e: 5 }

为什么 obj 不是 {a:0,b:1,c:2,d:4,e:5}而是上面结果 下面相同的例子就可以说明

到此这篇关于JavaScript前端开发时数值运算的小技巧的文章就介绍到这了,更多相关JavaScript前端开发时数值运算内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript数值类型知识汇总

    整数 十进制 二进制 以零为开头,后面接一个小写或大写的拉丁文字母B(0b或者是0B) 八进制 以0开头,然后是八进制数字序列(0-7) , 如果字面值中的数值超出范围,那么前导0将被忽略,后面的数值当作十进制解析. 十六进制 十六进制字面值的前两位必须是 0x,后跟任何十六进制数字(0-9 及 A-F).其中,字母 A-F可以大写,也可以小写: 浮点数 保存浮点数需要的内存空间是保存整数值的两倍,因此ECMAScript会不失时机的将浮点数转换为整数值. var floatNum1 = 1.;

  • js中Number数字数值运算后值不对的解决方法

    问题: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎么可能多出这么小数点出来. 我Google了一下,发现原来这是JavaScript浮点运算的一个bug. 比如:7*0.8 JavaScript算出来就是:5.6000000000000005 解决方法:网上找到了一些解决办法,就是重新写了一些浮点运算的函数. 下面就把这

  • JS比较两个数值的大小实例

    一般情况下: if(2 > 10) { alert("不正确!"); } 此比较不会是想要的结果:它相当于2 >1,把10的第一位取出来比较. 解决方法: if(eval(2) > eval(10)) { alert("不正确!"); } eval()函数用于在不引用任何特定对象的情况下计算代码字符串. <script> function check() { var num1=document.form1.num1.value; var

  • js 两数组去除重复数值的实例

    实例如下: //两数组去除重复数值 mergeArray: function(arr1, arr2) { for (var i = 0; i < arr1.length; i++) { for (var j = 0; j < arr2.length; j++) { if (arr1[i] === arr2[j]) { arr1.splice(i, 1); //利用splice函数删除元素,从第i个位置,截取长度为1的元素 } } } //alert(arr1.length) for (var

  • js中字符型和数值型数字的互相转化方法(必看)

    js中字符型和数值型数字的互相转化方法(必看)

    数值型的数字字符型数字之间如何互相转化呢,其实有个很简便的方法: 比如字符串"123.45"和数值型123.45. 字符串型只要在前面加个+好就可以了. 数值型只要在后面加个空字符串""就可以了. 上图: 以上这篇js中字符型和数值型数字的互相转化方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • js构建二叉树进行数值数组的去重与优化详解

    前言 本文主要介绍了关于js构建二叉树进行数值数组的去重与优化的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 常见两层循环实现数组去重 let arr = [11, 12, 13, 9, 8, 7, 0, 1, 2, 2, 5, 7, 11, 11, 7, 6, 4, 5, 2, 2] let newArr = [] for (let i = 0; i < arr.length; i++) { let unique = true for (let j = 0; j

  • JavaScript前端开发时数值运算的小技巧

    1.格式化金钱值 const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); const money = ThousandNum(20190214); // money => "20,190,214" 2.取整代替正数的Math.floor(),代替负数的Math.ceil() const num1 = ~~ 1.69; const num2 = 1.6

  • JavaScript开发的七个实用小技巧(很有用)

    目录 1. 数组求和 2. 使用 length 属性更改数组 3. 数组元素随机打乱 4. 过滤唯一值 5. 逗号运算符 6. 使用数组解构交换数据元素 7. 使用 && 代替 If 条件判断为真的条件 总结 本文译文,采用意译. 下面这些方法对于我来说很有作用,自从我发现了这些操作. 1. 数组求和 假设你有下面的数字数组:let numbers = [2,52,55,5]. 计算求和,我们会想到使用 for,是吧. 但是我们可以使用这行代码完成let sum = numbers.red

  • JavaScript前端开发之实现二进制读写操作

    关于javascript前端开发之实现二进制读写操作的相关介绍,请看以下内容详解,本文介绍的非常详细,具有参考价值. 由于种种原因,在浏览器中无法像nodejs那样操作二进制. 最近写了一个在浏览器端操作读写二进制的帮助类 !function (entrance) { "use strict"; if ("object" === typeof exports && "undefined" !== typeof module) {

  • 处理JavaScript值为undefined的7个小技巧

    前言 我刚刚开始学习JavaScript时,大约是八年前,当时我对于undefined 和 null 比较困惑 ,因为他们都表示空值. 他们有什么明确的区别吗?他们似乎都可以定义一个空值,而且 当你进行 在做null ===undefined 的比较时,结果是true. 现在的大多数语言,像Ruby, Python or Java,他们有一个单独的空值(nil 或 null),这似乎才是一个合理的方式. 而在JavaScript里,当你要获取一个变量或对象(未初始化)的值时,js引擎会返回 un

  • Javascript调试之console对象——你不知道的一些小技巧

    Javascript调试之console对象——你不知道的一些小技巧

    前言 写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量. 但是相信很多人也就只用过console.log()这一个方法,今天我们就一起来看看console对象还有哪些比较有用的方法.由于本篇文章是跟控制台有关,代码就直接在控制台展现而没有另外用新文件展示. 不同级别日志 通过console对象的不同方法,可以在控制台上输出不同级别的日志信息,它们会采用不同的标志来展示,如下图所示. 不同级别的日志

  • 学习JavaScript一定要知道的3个小技巧

    目录 一.神奇的扩展运算符 1.拷贝数组 2.合并数组 3.展开对象 二.进行空检查的最佳方法 1.可选链操作符 2.空值合并运算符 三.使用 .map()..reduce() 和 .filter() 前言: 通常在 Angular 或 React 项目中,code review 时看到一些老式的 JavaScript 代码,就会将开发人员归类为初学者.但是,如果您知道以下 3 个技巧,您将被视为现代 JavaScript 的尤达大师.那么,让我们开始我们的旅程吧! 一.神奇的扩展运算符 扩展运

  • python 提高开发效率的5个小技巧

    很多时候学习是一种难者不会,会者不难的事情. 下面的5个python技巧是性价比极高的知识点,一学就会,不难但是相当管用. 使用交互模式 使用python -i xxxx.py可以直接进入python的交互模式,可以很方便的调用xxxx.py中定义的方法和函数,特别适合调试没有main()方法的文件,强力推荐. 使用pdb进行调试 很多从c++/java转到python的同学可能对python没有断点功能相当失望. 其实python自带的pdb库就可以解决这个问题. 看这个例子. def sum

  • 浅谈JavaScript前端开发的MVC结构与MVVM结构

    浅谈JavaScript前端开发的MVC结构与MVVM结构

    MVC Model–View–Controller (MVC)是一种把信息展现逻辑和用户交互分离的计算机用户界面开发模式:Model包含应用的数据和业务逻辑:Controller负责把用户的输入,转换为命令传递给Model和View;这是维基百科的解释: 这种模式最初是由Trygve Reenskaug在使用Smalltalk-80(1979)工作时设计的,刚开始叫做Model-View-Controller-Editor:后来通过<Design Patterns: Elements of Re

  • 分享12个Vue开发中的性能优化小技巧(实用!)

    分享12个Vue开发中的性能优化小技巧(实用!)

    目录 前言 1.长列表性能优化 1.不做响应式 2.虚拟滚动 2.v-for遍历避免同时使用v-if 3.列表使用唯一key 4.使用v-show复用DOM 5.无状态的组件用函数式组件 6.子组件分割 7.变量本地化 8.第三方插件按需引入 9.路由懒加载 10.keep-alive缓存页面 11.事件的销毁 12.图片懒加载 总结 前言 性能优化,是每一个开发者都会遇到的问题,特别是现在越来越重视体验,以及竞争越来越激烈的环境下,对于我们开发者来说,只完成迭代,把功能做好是远远不够的,最重要

  • javascript同步服务器时间和同步倒计时小技巧

    javascript同步服务器时间和同步倒计时小技巧

    之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能 一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个很大的问题,那就是每隔一秒 去请求服务器,这样如果用户多了,服务器就会崩溃(内存占用率会很大),所以在我看来,这种方法不可行,我这里给出一种解决方案,能够实现同步服务器时间.同步倒计时,却不占用服务器太多资源,下面我给写实现的思路: 第一步,当用户第一次浏览页面时,服务器首先获取当前时间并显示在页

随机推荐