js常用小技巧黑科技 - javascript(js) commonly used skill

shadowbook 发布于2019-08-26 11:59 / 3268人阅读

摘要：原文地址小数取整妙用隐式转换数字字符串转转时间戳数组多维数组转逗号分隔字符串解构交换的值扩展运算符取数组最大值生成时间字符串转数组合并对象等同于常用方法数字前补数组元素为对象的去重数组求和金钱格式化短路逻辑代替生成指定长度数组正则进阶捕

原文地址

https://github.com/TigerHee/s...

小数取整：

  1.234 | 0

  ~~1.234

  1.234 >> 0

妙用隐式转换：

数字字符串转number:

  +"123"

new Date转时间戳：

  +new Date()

数组/多维数组转逗号分隔字符串：

  ""+[1, 2 , 3, 3, [2, 3, 4]]

解构：

交换a,b的值：

  var a=1;
  var b=2;
  [a, b] = [b, a];
  console.log("a ===", a);
  console.log("b ===", b);

扩展运算符：

取数组最大值：

  Math.max(...[1,2,3])

生成时间：

  new Date(...[2018,6,4])

字符串转数组：

  method 1: 
  [..."string"]
  
  method 2: 
  Array.from("string")

合并对象：

  let obj1 = {a:1, b:2};
  let obj2 = {b:3, c:4};

  Object.assign(obj1, obj2)
    等同于
  {...obj1, ...obj2}

常用方法：

数字前补0：

  preFixNum(num, length) {
    return (Array(length).join("0") + num).slice(-length);
  }

数组元素为对象的去重：

  [...new Set(arr.map(v => JSON.stringify(v)))].map(v => JSON.parse(v))

数组求和：

  var arr = [1,2,3,4,5];
  
  method 1: 
  var sum = eval(arr.join("+"));
  
  method 2: 
  var sum = arr.reduce((prev,cur) => prev + cur);

金钱格式化：

  let money = 11111;
  
  method 1: 
  money.toLocaleString("en-US");
  
  method 2: 
  Intl.NumberFormat().format(money);
  
  method 3: 
  String(money).replace(/B(?=(d{3})+(?!d))/g, ",");

短路逻辑代替if：

  isTrue && console.log(1);

RGB to Hex：

  function RGBtoHEX(rgb){
    return ((1<<24) + (rgb.r<<16) + (rgb.g<<8) + rgb.b).toString(16).substr(1);
  }

生成指定长度数组：

  Array.from(new Array(10).keys());

正则进阶：

捕获括号：

  匹配 "tigerHee" 并且记住匹配项
  /(tigerHee)/

非捕获括号：

  匹配 "tigerHee" 但是不记住匹配项
  /(?:tigerHee)/

先行断言：

  匹配"tiger"仅仅当"tiger"后面跟着"Hee"
  /tiger(?=Hee)/

后行断言：

  匹配"Hee"仅仅当"Hee"前面是"tiger"
  /(?<=tiger)Hee/

正向否定查找：

  匹配"tiger"仅仅当"tiger"后面不跟着"java"
  /tiger(?!java)/

如果觉得有用的话，可以来个star哦

GPU云服务器云服务器 js $$.use Js技巧 js开发技巧 js实用技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107982.html

CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

Berwin 2019-08-01 17:42 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

MASAILA 2019-08-21 16:46 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

qqlcbb 2019-08-30 15:53 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0