关于js的冷知识、小技巧（持续更新）

8. 正确分割字符串

由于JavaScript只能处理UCS-2编码，造成所有字符在这门语言中都是2个字节，如果是4个字节的字符，会当作两个双字节的字符处理。JavaScript的字符函数都受到这一点的影响，无法返回正确结果。

比如包含emoji的字符串：🐂🍺🐂🍺🐂🍺🐂🍺

而要想正确分割这种特殊的字符串，可以使用如下方式

function splitString(string) {
  const length = string.length
  const output = []
  let index = 0
  while (index < length) {
    let charCode = string.charCodeAt(index)
    let character = string[index]
    if (charCode >= 0xD800 && charCode <= 0xDBFF) {
      output.push(character + string[++index]);
    } else {
      output.push(character);
    }
    index++
  }
  return output
}

具体原理请参考链接

8. 奇妙的隐式转换

(!+[]+[])[+!+[]]+([!![]]+[][[]])[+!+[]+[+!+[]]]+([][[]]+[])[+!+[]]; // ren

(!+[]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[+!+[]]+([][[]]+[])[+!+[]]; // tian

(![]+[])[+[]]+([][[]]+[])[+[]]; // fu

7. 关于js各种变量类型

1. function类型变量，其length值为参数个数
2. number/boolean/string类型的变量，其值一旦声明便无法改变
3. 关于数字：

42.0 === 42; // true
42.toFixed(2); // error
42..toFixed(2); // 42.00
42 .toFixed(2); // 42.00
NaN !== NaN; // true

6. 实现call、apply

Function.prototype.call = function(context) {
  if (typeof this !== "function") {
    throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
  }
  let L = arguments.length,
      args = [];
  for(let i=1;i<L;i++) {
    args.push(arguments[i]);
  }
  let fn = Symbol('fn');
  context[fn] = this;
  eval('context[fn](' + args + ')');
  delete context[fn];
}

Function.prototype.apply = function(context) {
  let args = arguments[1];
  let fn = Symbol('fn');
  context[fn] = this;
  eval('context[fn](' + args + ')');
  delete context[fn];
}

5. encodeURI 与 encodeURIComponent的区别

首先要了解下，URI (也就是网址) 中包含三种有效的字符：

• 保留字符(reserved characters)：这类字符是URI中的保留关键字符，它们用于分割URI中的各个部分，包括：";" | "/" | "?" | ":" | "@" | "&" | "=" | "+" | "$" | ","
• Mark字符(mark characters)：这类字符没有特别说明用途，可能与其他的RFC标准相关，包括："-" | "_" | "." | "!" | "~" | "*" | "'" | "(" | ")"
• 基本字符(alphanum characters)：这类字符是URI中的主体部分，它包括所有的大写字母、小写字母和数字

而 encodeURI 会将这三种字符类型之外的其他字符进行转义编码(escape)，所有的需要转义的字符都按照UTF-8编码转化成为一个、两个或者三个字节的十六进制转义字符(％x | %xx | %xxx)。
encodeURIComponent 相比 encodeURI 则是将保留字符也进行转义编码。这是为了满足当URI参数中带有URI的场景~

4. 一行代码生成随机字符串

const str = Math.random().toString(36).substr(2, 10);
console.log(str);

运行以上简短的代码，你会得到一个长度为10的随机字符串，短短一行代码得到这样的结果，可以说是很 cooooooooool 了

原理其实很简单，Math.random()获得了一个[0,1)的随机数，toString(36)将这个小数转化成了36进制的表示形式，最后substr(2,10)截取了从第2位开始的10个字符。

其中仅有的知识点，也就是小数的进制转换了。

所以实际上toString(30)、toString(20)也是可以获得随机字符串的，只不过36进制才能覆盖所有的英文字母。

很多开源库都使用此方式为DOM元素创建随机ID。

3. 将数字货币格式化的正则

let num = "19194575842775752";
num = num.replace(/(\d+?)(?=(\d{3})+\b)/g, '$1,');
console.log(num); // 19,194,575,842,775,752

2. 获取window对象

下面的代码可以在任何作用域中获得全局对象window(非严格模式下)，因为一个单独的function中的this会指向window。

var global = (function () {
   return this;
}());

1. void 666

在一些源码中会看到这样的片段

function foo() {
    // do sth.
    return void 666; // 等同于 return undefined
}

解析：void是javascript的一个操作符，它后面可以接一个表达式，并且会立即执行后面的表达式，然后统一返回undefined。

所以无论接什么数字，结果都是undefined，一般为void 0，用666或23333纯属程序员的幽默哈哈哈~

至于为什么不直接用undefined，是因为undefined是一个合法的标识符，有可能被重新赋值，所以用void更为保险。