js的那些骚操作

229 阅读2分钟

概要:主要用来收集各种碰到的骚操作,将会不断更新

关于>>> 0;

var len = t.length >>> 0; //即使在t为undefined的情况下let也会被赋值0 ,正数不变。

参考: [js中表达式 >>> 0 浅析][1] [1]: segmentfault.com/a/119000001…

'aaa.url(bbb.com),bbb.url(ccc.com)'.match(/url\((.+?)\)/) /url\((.+?)\)/.exec('aaa.url(bbb.com),bbb.url(ccc.com)') 'aaa.url(bbb.com),bbb.url(ccc.com)'.match(/url\((.+?)\)/g)

的不同

如果正则表达式不包含 g 标志,str.match() 将返回与 RegExp.exec(). 相同的结果。

对于一段字符串中有多处匹配的可以用以下格式处理

while(current = reg.exec(source)) ( let [a,b] = current; //a 为匹配的字符串 b为()里的字符串 reg.lastIndex;//当前匹配到的字符串的最后的index )

Object.entries(assets).forEach(([key,value]) => { //遍历解构利器~~~~ })

判断数组中的所有元素都大于2

[1,2,3].every(check => check >2)

关于for in 循环的特性 优先遍历属性名为数字的元素 obj = {name:'aaa', 1: 'bbb'} for(let key in obj){ if(!Object.hasOwnProperty(key)) break; console.log(key) }

结果是 1 name

取得函数参数的个数 fun(a,b,c)

fun.length =3

判断是否为数值型

Number.isNaN(input)

关于 String.replace的正则用法

replace 本身是JavaScript字符串对象的一个方法,它允许接收两个参数:

replace([RegExp|String],[String|Function])
第1个参数可以是一个普通的字符串或是一个正则表达式

第2个参数可以是一个普通的字符串或是一个回调函数

如果第1个参数是RegExp, JS会先提取RegExp匹配出的结果,然后用第2个参数逐一替换匹配出的结果

如果第2个参数是回调函数,每匹配到一个结果就回调一次,每次回调都会传递以下参数:

result: 本次匹配到的结果

$1,...$9: 正则表达式中有几个(),就会传递几个参数,$1~$9分别代表本次匹配中每个()提取的结果,最多9个

offset:记录本次匹配的开始位置

source:接受匹配的原始字符串

例:

'AVCXaa'.replace(/(\[A-Z\])(\[A-Z\])/g, 
function () {

console.dir(arguments)

})

打印结果为:

0: "AV" //本次匹配内容
1: "A"  //第一个括号的匹配内容
2: "V"  //第二个括号的匹配内容
3: 0    //其实位置
4: "AVCXaa"  //整体字符
0: "CX"
1: "C"
2: "X"
3: 2
4: "AVCXaa"

用途: fontSize => font-size

如何用正则将 kebab-case 转换成camelCase,并缓存已转换内容 (引用自vue 2.x源码)

  /**
   * Create a cached version of a pure function.
   */
   function cached (fn) {
    var cache = Object.create(null);
    return (function cachedFn (str) {
      var hit = cache[str];
      console.log(hit)
      return hit || (cache[str] = fn(str))
    })
  }

  /**
   * Camelize a hyphen-delimited string.
   */
  var camelizeRE = /-(\w)/g;
  var camelize = cached(function (str) {
    return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
  });

  console.log(camelize('ab-cd'));
  console.log(camelize('ab-cd'));

此处有一个知识点: 为什么是Object.create(null) 而不是 {} Object.create(null) 生成的是一个没有protoType的{},常用于单纯的储存字典。