JS常用函数和技巧

1. console.time()，console.timeEnd()

这两个方法用于计时，可以算出一个操作所花费的准确时间。

console.time('Array initialize');

var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
};

console.timeEnd('Array initialize');
// Array initialize: 1914.481ms

2. $(selector) 返回第一个匹配的元素，等同于 document.querySelector() 如果页面脚本对 $ 有定义，则会覆盖原始的定义。比如，页面里面有 jQuery，控制台执行$(selector)就会采用 jQuery 的实现，返回一个数组
3. $$(selector) 返回选中的 DOM 对象，等同于 document.querySelectorAll
4. getEventListeners(object) 方法返回一个对象，该对象的成员为 object 登记了回调函数的各种事件（比如 click 或 keydown），每个事件对应一个数组，数组的成员为该事件的回调函数
5. keys(object) 方法返回一个数组，包含 object 的所有键名。values(object) 方法返回一个数组，包含 object 的所有键值。Object.keys 只返回对象自身的可遍历属性的全部属性名，如 length 不可遍历不返回，Object.getOwnPropertyNames() 则会返回 length 属性
6. Chrome 浏览器中，当代码运行到debugger语句时，就会暂停运行，自动打开脚本源码界面

for(var i = 0; i < 5; i++){
  console.log(i);
  if (i === 2) debugger;
}

7. 如果Object方法的参数是一个对象，它总是返回该对象，即不用转换，利用这一点，可以写一个判断变量是否为对象的函数。

function isObject(value) {
  return value === Object(value);
}

isObject([]) // true
isObject(true) // false

8. 由于 JavaScript 没有提供计算对象属性个数的方法， 可用 Object.keys(obj).length
9. 字符串 [object Object] 本身没有太大的用处，但是通过自定义 toString 方法，可以让对象在自动类型转换时，得到想要的字符串形式

var obj = new Object();

obj.toString = function () {
  return 'hello';
};

obj + ' ' + 'world' // "hello world"

数组、字符串、函数、Date 对象都分别部署了自定义的 toString 方法，覆盖了 Object.prototype.toString 方法。

[1, 2, 3].toString() // "1,2,3"

'123'.toString() // "123"

(function () {
  return 123;
}).toString()
// "function () {
//   return 123;
// }"

(new Date()).toString()
// "Tue May 10 2016 09:11:31 GMT+0800 (CST)"

使用 Object.prototype.toString 方法，通过函数的 call 方法，可以在任意值上调用这个方法，帮助我们判断这个值的类型（防止 toString 被覆盖）

不同数据类型的Object.prototype.toString方法返回值如下。

数值：返回[object Number]。
字符串：返回[object String]。
布尔值：返回[object Boolean]。
undefined：返回[object Undefined]。
null：返回[object Null]。
数组：返回[object Array]。
arguments 对象：返回[object Arguments]。
函数：返回[object Function]。
Error 对象：返回[object Error]。
Date 对象：返回[object Date]。
RegExp 对象：返回[object RegExp]。
其他对象：返回[object Object]。

利用这个特性，可以写出一个比typeof运算符更准确的类型判断函数。

var type = function (o){
  var s = Object.prototype.toString.call(o);
  return s.match(/\[object (.*?)\]/)[1].toLowerCase();
};

type({}); // "object"
type([]); // "array"
type(5); // "number"
type(null); // "null"
type(); // "undefined"
type(/abcd/); // "regex"
type(new Date()); // "date"

['Null',
 'Undefined',
 'Object',
 'Array',
 'String',
 'Number',
 'Boolean',
 'Function',
 'RegExp'
].forEach(function (t) {
  type['is' + t] = function (o) {
    return type(o) === t.toLowerCase();
  };
});

type.isObject({}) // true
type.isNumber(NaN) // true
type.isRegExp(/abc/) // true

10. toLocaleString 这个方法的主要作用是留出一个接口，让各种不同的对象实现自己版本，用来返回针对某些地域的特定的值。

var person = {
  toString: function () {
    return 'Henry Norman Bethune';
  },
  toLocaleString: function () {
    return '白求恩';
  }
};

person.toString() // Henry Norman Bethune
person.toLocaleString() // 白求恩

目前，主要有三个对象自定义了toLocaleString方法。

Array.prototype.toLocaleString()
Number.prototype.toLocaleString()
Date.prototype.toLocaleString()

var date = new Date();
date.toString() // "Tue Jan 01 2018 12:01:33 GMT+0800 (CST)"
date.toLocaleString() // "1/01/2018, 12:01:33 PM"

11. Object.prototype.hasOwnProperty 方法接受一个字符串作为参数，返回一个布尔值，表示该实例对象自身是否具有该属性

12. 包装对象还可以自定义方法和属性，供原始类型的值直接调用

String.prototype.double = function () {
  return this.valueOf() + this.valueOf();
};

'abc'.double()
// abcabc

Number.prototype.double = function () {
  return this.valueOf() + this.valueOf();
};
// 123外面必须要加上圆括号，否则后面的点运算符（.）会被解释成小数点
(123).double()

种自定义方法和属性的机制，只能定义在包装对象的原型上，如果直接对原始类型的变量添加属性，则无效，这里的包装对象是自动生成的，赋值后自动销毁，所以最后一行实际上调用的是一个新的包装对象

var s = 'abc';

s.p = 123;
s.p // undefined

13. Number.prototype.toFixed() 方法先将一个数转为指定位数的小数，然后返回这个小数对应的字符串

(10).toFixed(2) // "10.00"
10.005.toFixed(2) // "10.01"

上面代码中，10 和 10.005 转成 2 位小数，其中 10 必须放在括号里，否则后面的点会被处理成小数点。toFixed 方法的参数为小数位数，有效范围为 0 到 20，超出这个范围将抛出 RangeError 错误

14. Math.floor()，Math.ceil() 。Math.floor 方法返回小于参数值的最大整数（地板值）。Math.ceil 方法返回大于参数值的最小整数（天花板值）

Math.floor(3.2) // 3
Math.floor(-3.2) // -4

Math.ceil(3.2) // 4
Math.ceil(-3.2) // -3

// 这两个方法可以结合起来，实现一个总是返回数值的整数部分的函数。
function ToInteger(x) {
  x = Number(x);
  return x < 0 ? Math.ceil(x) : Math.floor(x);
}

ToInteger(3.2) // 3
ToInteger(3.5) // 3
ToInteger(3.8) // 3
ToInteger(-3.2) // -3
ToInteger(-3.5) // -3
ToInteger(-3.8) // -3

15. Math.round() 用于四舍五入

Math.round(0.1) // 0
Math.round(0.5) // 1
Math.round(0.6) // 1

// 等同于
Math.floor(x + 0.5)

// 注意，它对负数的处理（主要是对0.5的处理）
Math.round(-1.1) // -1
Math.round(-1.5) // -1
Math.round(-1.6) // -2

16. Math.random() 返回0到1之间的一个伪随机数，可能等于0，但是一定小于1

// 任意范围的随机数生成函数如下
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

getRandomArbitrary(1.5, 6.5)
// 2.4942810038223864

// 任意范围的随机整数生成函数如下
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

getRandomInt(1, 6) // 5

17. JSON.stringify() 用于将一个值转为 JSON 字符串。该字符串符合 JSON 格式，并且可以被JSON.parse方法还原

JSON.stringify('abc') // ""abc""
JSON.stringify(1) // "1"
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"

JSON.stringify([1, "false", false])
// '[1,"false",false]'

JSON.stringify({ name: "张三" })
// '{"name":"张三"}'

注意，对于原始类型的字符串，转换结果会带双引号

JSON.stringify(false) // "false"
JSON.stringify('false') // "\"false\""

上面代码中，如果不是内层的双引号，将来还原的时候，引擎就无法知道原始值是布尔值还是字符串

如果对象的属性是undefined、函数或XML对象，该属性会被JSON.stringify过滤

var obj = {
  a: undefined,
  b: function () {}
};

JSON.stringify(obj) // "{}"

如果数组的成员是undefined、函数或XML对象，则这些值被转成null

var arr = [undefined, function () {}];
JSON.stringify(arr) // "[null,null]"

正则对象会被转成空对象

JSON.stringify(/foo/) // "{}"

JSON.stringify 方法会忽略对象的不可遍历的属性

var obj = {};
Object.defineProperties(obj, {
  'foo': {
    value: 1,
    enumerable: true
  },
  'bar': {
    value: 2,
    enumerable: false
  }
});

JSON.stringify(obj); // "{"foo":1}"