JS操作小技巧,工作中很实用

  当我工作后遇到实际项目的一些问题后,我把我在网上发现的节省时间的技巧都列了一个清单,让刚入门的初学者和工作人员节省时间。

1、补0操作


适用场景:项目中日期的显示,需要用0或者其他字符占位。

> var time= 12;
('0' + time).slice(-2);
<<  "12"
> var number= 7;
('0' + time).slice(-2);
<<  "07"

2、数组过滤唯一值


> const array = [2, 3, 1, 2, 5, 5, 1]  
  const uniqueArray = [...new Set(array)];//Set对象类型是在ES6中引入的,配合展开操作(...)创建一个唯一值数组
<<  console.log(uniqueArray); // Result: [2, 3, 1, 5]

3、千分位划分


适用场景:项目中页面展示金额,进行千位数划分。

> const AllMoney = (value) => {
    const regExp = /(\d{1,3})(?=(\d{3})+(?:$|\.))/g;
    const money= (value + '').replace(regExp, '$1,');
    return money;
  };
<<  console.log(AllMoney(5878652221)); //Result: 5,878,652,221

4、短路运算


三元运算符是编写简单条件语句的快速方法:

a > 20? '20' : '10';
a >10 ? (a > 20 ? 'a>20' : '10-20') : '10';

但当判断条件多几重之后,三元运算符会使代码变得非常笨重,所以就出现了短路运算‘与’和‘或’(&&和||)。
eg:
使用&&将返回第一个条件为假的值。如果每个操作的值都为true,则返回最后一个的表达式。

> let one = 1, two = 2, three = 3;
  console.log(one && two && three); // Result: 3
  console.log(0 && null); // Result: 0

使用||将返回第一个条件为真的值。如果每个操作结果都为false,则返回最后一个的表达式。

> let one = 1, two = 2, three = 3;
  console.log(one || two || three); // Result: 1
  console.log(0 || null); // Result: null
  在项目中可能不知道对象或其中一个子属性是否存在,假设this.obj里面有一个age属性,但是在成功返回一个获取请求之前,age是未定义的。 
  return (this.obj.age|| 'Fetching age'); //相对于用if判断更加简洁

5、过滤 "false" 类型元素


> const result= [0, 1 -0,  'undefined',undefined, null, 'null',true, false, NaN, 'NaN'];
  result.filter(Boolean);//Result: [1, "undefined", "null", " ", true, "NaN"]

5、localStorage的取值

  localStorage.setItem('name', 'Lucas');
  localStorage.getItem('name') === localStorage.name;
  localStorage.name // Result: 'Lucas'

6、x的y次方计算

  Math.pow(2, n);//基础写法
  2 << (n - 1);  //ES7之前,只有以2为基数的幂才存在简写,使用按位左移操作符<<
  2**n;//指数运算符**
  2**5===2<<4  //true
  3**5===3<<4  //false

7、浮点数转整数


希望将浮点数转换为整数,不仅可以使用Math.floor()、Math.ceil()或Math.round(),还可以使用|(位或运算符)或者~~将浮点数截断为整数。

1.2|0  // 1
1.8|0 // 1
-1.2|0 // -1
~~true // => 1
~~1.9 // => 1
~~-1.9 // => -1
//按位或运算符还可以用于从整数的末尾删除任意数量的数字,就不需要使用substring
 console.log(7578 / 10   | 0)  // Result: 757
 console.log(7578 / 100  | 0)  // Result: 75
 console.log(7578 / 1000 | 0)  // Result: 7

8、字符串、数字转换


数字转为字符串:

将数字转换为字符串,连接运算符+后跟一组空引号""
const val = 7 + "";
console.log(val); // Result: "7"
console.log(typeof val); // Result: "string"

字符串转为数字:

使用加法运算符+
let val=+ "7.18";
console.log(val); // Result: 7.18
console.log(typeof val); // Result: "number"
也可以用于将布尔值转换为数字
+true //1
+false //0
如果想返回一个整数,而不是浮点数,可以使用~~
let int=~~ "7.18";
console.log(val); // Result: 7

如果你们有其它更好用的JS小技巧,评论出来让大家都来学习学习。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,616评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,020评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,078评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,040评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,154评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,265评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,298评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,072评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,491评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,795评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,970评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,654评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,272评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,985评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,815评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,852评论 2 351

推荐阅读更多精彩内容

  • importUIKit classViewController:UITabBarController{ enumD...
    明哥_Young阅读 3,790评论 1 10
  • 运算符是处理数据的基本方法,用来从现有的值得到新的值。JavaScript 提供了多种运算符,本章逐一介绍这些运算...
    徵羽kid阅读 671评论 0 0
  • 版权声明:本文为 gfson 原创文章,转载请注明出处。注:作者水平有限,文中如有不恰当之处,请予以指正,万分感谢...
    gfson阅读 2,928评论 0 6
  • # Python关键字 部分单词没有分类整理按照顺序整理的 ``` statements语句 print输出 qu...
    ZhouLang阅读 587评论 0 0
  • 走进秋天,触摸一地飘零的思念,迎接一树落花的烂漫。
    酒分阅读 97评论 0 1