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


Posted in Javascript onJuly 28, 2020

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 }

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

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

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

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

Javascript 相关文章推荐
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
js实现全选和全不选
Jul 28 #Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 #Javascript
js实现全选和全不选功能
Jul 28 #Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 #Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 #Javascript
Postman如何实现参数化执行及断言处理
Jul 28 #Javascript
微信小程序实现电子签名功能
Jul 29 #Javascript
You might like
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
PHP7修改的函数
2021/03/09 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
Order by的几种用法
2013/06/16 面试题
十佳美德少年事迹材料
2014/02/05 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
追悼会悼词大全
2015/06/23 职场文书
环保宣传语大全
2015/07/13 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
Redis如何实现分布式锁
2021/08/23 Redis
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技