javascript 使用小技巧！

1. 短路求值

使用三元运算符可以很快地写出条件语句，例如：

let res = 100 == '100' ? 'yes' : 'no'   // 'yes'
let res = 100 === '100' ? 'yes' : 'no'   // 'no'

但有时候三元运算符仍然很复杂，我们可以使用逻辑运算符 && 和 || 来替代，让代码更简洁一些。这种技巧通常被称为“短路求值”。假设我们想要返回两个或多个选项中的一个，使用 && 可以返回第一个 false。如果所有操作数的值都是 true，将返回最后一个表达式的值。

let a = 1, b = 2, c = 3;
console.log( a && b && c )   // 3
console.log( null && 0 )   // null

使用 || 可以返回第一个 true。如果所有操作数的值都是 false，将返回最后一个表达式的值。

let a = 1, b = 2, c = 3;
console.log( a || b || c )   // 1
console.log( null || 0 )   // 0

除了短路求值，在实际开发中， || 还可以用来做数据边界兜底

比如我们想要返回一个变量的 length，但又不知道变量的类型或者变量拿到的是undefined。

return ( Array.isArray(data) || typeof data === 'string' || [].length)

这样，如果data是数字或者不是拥有length的对象，那么返回0，如果有length返回该对象的length。这样不会因为未知属性而造成程序无法运行。

对象转布尔都为真，[]是对象所以也为真，[].legnth 为 0 。
但数组转数字不是这样，[] => 0 , [1] => 1 , [1, 2, 3] => NaN

还有访问嵌套对象属性时遇到的问题，你可能不知道对象或某个子属性是否存在，所以经常会碰到让你头疼的错误。假设我们想要访问 this.state 中的一个叫作 data 的属性，但 data 却是 undefined 的。在某些情况下调用 this.state.data会导致 App 无法运行。

return (this.state.data || 'default')

这里 default 写成你预期需要的类型。这样不管得到的值是不是有问题，程序都可以正常运行。

2. 快速幂运算

从 ES7 开始，可以使用 ** 进行幂运算，比使用 Math.power(2,3) 要快得多。

console.log( 2 ** 3 )   // 8

但要注意不要把这个运算符于 ^ 混淆在一起了，^ 通常用来表示指数运算，但在 JavaScript 中，^ 表示位异或运算。在 ES7 之前，可以使用位左移运算符 << 来表示以 2 为底的幂运算：

Math.pow(2, n)
2 << (n - 1)
2 ** n

例如，2 << 3 = 16 等同于 2 ** 4 = 16。

3. 快速取整

我们可以使用 Math.floor()、Math.ceil() 或 Math.round() 将浮点数转换成整数，但有另一种更快的方式，即使用位或运算符 |。

console.log(-139.1 | 0)  // -139
console.log(-139.7 | 0)  // -139
console.log(139.6 | 0)  // 139
console.log(139.4 | 0)  // 139
// 结果都是向下取整

也可以使用~~ 达到同样的效果。

console.log( ~~-139.1 )   // -139
console.log( ~~-139.7 )   // -139
console.log( ~~139.6 )    // 139
console.log( ~~139.4 )    // 139
// 结果一样都是向下取整

按位异或和位移操作符也可以取整，可以自己去尝试下。

4. 获取数组最后的元素

数组的 slice() 方法可以接受负整数，并从数组的尾部开始获取元素。

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

5. 格式化 JSON

你之前可能使用过 JSON.stringify，但你是否知道它还可以用来给 JSON 添加缩进？stringify() 方法可以接受两个额外的参数，一个是函数（形参为 replacer），用于过滤要显示的 JSON，另一个是空格个数（形参为 space）。space 可以是一个整数，表示空格的个数，也可以是一个字符串（比如’\t’表示制表符），这样得到的 JSON 更容易阅读。尤其是后台返回数量大的时候，不用每项都用鼠标点开看了。

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// 或者这样
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 4));
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

6. 混淆代码格式化

现在的代码都会经过 uglify 压缩混淆，有时你可能在生产环境中遇到问题，但是你的source maps没有部署在服务器上。

Chrome 可以将你的 Javascript 文件美化为更易阅读的格式。虽然代码不会像你的真实代码那样有用，但至少你可以看到发生了什么。

用 Sources 打开混淆代码后最下面有个{}，点一下就会格式化代码。

7. debugger

一旦执行到这行代码，Chrome 会在执行时自动停止。 你甚至可以使用条件语句加上判断，这样可以只在你需要的时候运行。后续的调试步骤和断点调试没什么区别。

if (thisThing) {
    debugger;
}

8. 代码执行时长

使用 console.time() 和 console.timeEnd() 来标记循环耗时

console.time('Timer1');
 
var items = [];
 
for(var i = 0; i < 100000; i++){
   items.push({index: i});
}
 
console.timeEnd('Timer1');
// Timer1: 25.840087890625ms
// 会打印出从开始到结束用了多少时间