实用的JS小技巧

记录几个在公众号看到的小技巧，源自前端之巅公众号

1. 在循环中缓存数组长度

// 一般我们遍历数组都是这样写的
for(let i = 0; i < arr.length; i ++){
  console.log("xxx");
}

// 然鹅这样每次遍历都要获取一次arr.length，在第一轮遍历的时候缓存下来
// 对于长数组，可以有效提高性能。
for(let i = 0, length = arr.length; i < length; i ++){
  console.log("xxx");
}

2. 短路求值

先明确一个概念，JS中的falsy值指的是 == false的值（划重点，两个等于号）
falsy值：false undefined null 0 "" NaN

我们可以用 && 和 || 来进行短路求值

a && b 可以返回第一个 falsy值。如果所有操作数的值都不是falsy值，将返回最后一个表达式的值。

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

1. demo1：返回一个变量的length属性，如果该变量没有length属性，返回0

// 常规写法
function getLength(){
  if(a.length !== undefined){
    return a.length;
  }else {
    return 0;
  }
}
// 清爽写法
function getLength(){
  return a.length || 0;
}

3. 任意类型转布尔

!! variable

4. 任意类型转数字

+ variable

5. 任意类型转字符串

variable + ""

6. 幂运算

2 ** 3
// 注意 ^ 在JS中表示异或