提升JS代码效率的11个实用技巧

本文分享11个常被忽略但日常高频使用的JavaScript技巧。

1、过滤唯一值

ES6新增的Set类型成员值唯一，结合扩展运算符（...）可创建新数组以过滤原数组重复值。


const array = [1, 2, 3, 3, 5, 5, 1];
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // [1, 2, 3, 5]

ES6前实现此功能代码较多。该技巧适用于undefined、null、boolean、string、number类型；若包含object、function、array则不适用。

2、短路求值（Short-Circuit Evaluation）

三目运算符便于书写简单逻辑，但复杂逻辑下可读性差。


x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

此时可使用逻辑与（&&）和逻辑或（||）运算符改写表达式。

逻辑操作符先计算左操作数，仅当左操作数无法确定结果时才求解右操作数。

这被称为“短路求值（Short-Circuit Evaluation）” 工作原理与（&&）运算符返回第一个false/‘falsy'值。若所有操作数均为true，则返回最后一个表达式结果。


let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3


console.log(0 && null); // Result: 0

或（||）运算符返回第一个true/‘truthy'值。若所有操作数均为false，则返回最后一个表达式结果。


let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1

console.log(0 || null); // Result: null

2.1场景举例

从服务器请求数据时，在另一位置使用数据但获取状态未知，如访问this.state的data属性。

常规方式需先判断this.state.data有效性，再根据有效性分别处理。


if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

但可通过上述方式简写该逻辑处理。


return (this.state.data || 'Fetching Data');

对比发现此方式更加简洁方便。

3、转换Boolean型

常规boolean值仅true和false，但JavaScript中其他值可视为‘truthy'或‘falsy'。

除0、“”、null、undefined、NaN和false外，其余均视为‘truthy'。可通过负运算符！将变量转换为“boolean”型。


const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"

4、转换String型

可通过+连接运算符将number类型变量转换为string类型。


const val = 1 + "";

console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

5、转换Number类型

对应前述，可通过加法运算符+将string类型变量转回为number类型。


let int = "15";
int = +int;

console.log(int); // Result: 15
console.log(typeof int); Result: "number"

某些上下文中+被解释为连接符而非加法符。若需返回整数而非浮点数，可使用两个波浪号:~~。

(需要注意为英文格式) 一个波浪号~，被称为“按位不运算符”，等价于 - n - 1。所以~15 = -16. 使用两个~~可有效否定运算。这是因为 - (- n - 1) - 1 = n + 1 - 1 = n。也就是说~-16 = 15


const int = ~~"15"

console.log(int); // Result: 15
console.log(typeof int); Result: "number"

6、快速求幂

从ES7开始，可使用幂运算符 ** 作为求幂简写，相对之前的Math.pow(2, 3)更快捷。此点简单实用，但多数教程未专门介绍。


console.log(2 ** 3); // Result: 8

不应与 ^ 符号混淆，^ 通常表示指数，但在JavaScript中是位XOR操作符。在ES7之前，幂的简写主要依靠位左移位操作符 <<，几种写法存在区别。


// 下面几种写法是等价的


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

其中需要注意的是 2 << 3 = 16 等价于 2 ** 4 = 16

7、快速Float转Integer

平时可使用Math.floor()、Math.ceil()和Math.round()将float类型转换为integer类型。但还有一种更快方法可使用|(位或运算符)将浮点数截断为整数。


console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

| 的行为取决于处理正数还是负数，故最好仅在确定情况下使用此快捷方式。若n为正数，则 n | 0 有效向下舍入。若n为负数，则有效向上取整。

更准确地说，该操作结果直接删除小数点后内容，将浮点数截断为整数，与前述其他方法有所区别。

还可使用 ~~ 获得相同舍入效果，如上所述，实际上任何位操作符都会强制浮点数为整数。这些特殊操作之所以有效，是因为一旦强制为整数，值保持不变。

7.1使用场景

位或运算符可用于从整数末尾删除任意数量数字。这意味着不必使用此类代码在类型间进行转换。


let str = "1553"; 
Number(str.substring(0, str.length - 1));

而是可使用以下方式来实现我们的功能


console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

8、类中自动绑定

可在类中通过使用ES6增加的箭头函数方式实现隐形绑定作用域。按之前处理，需显式为方法绑定，类似于 this.myMethod = this.myMethod.bind(this)。当类中有很多方法时，会增加大量绑定代码书写。现可通过箭头函数方式简化此过程。


import React, { Component } from React;
export default class App extends Compononent {
  constructor(props) {
    super(props);
    this.state = {};
  }
  myMethod = () => {
    // 隐式绑定
  }
  render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

9、截取数组

若想从数组末尾删除值，有比使用splice()更快的替代方法。例如，若知原始数组长度，可通过重新定义其length属性来实现截取。


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

此方案特别简洁。但slice()方法运行时更快。若速度为主要目标，考虑使用以下方式。


let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Result: [0, 1, 2, 3]

10、获取数组中的最后的元素

数组方法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]

11、格式化JSON代码

处理JSON相关时常用JSON.stringify，但你是否意识到它可帮助缩进JSON？stringify()方法接受两个可选参数:一个replacer函数和一个space值，replacer函数可过滤显示JSON。space值接受整数表示空格数或字符串(如't'插入制表符)，可使读取获取JSON数据容易得多。


console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));

// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

到此这篇关于JavaScript小技巧带你提升你的代码技能的文章就介绍到这了,更多相关JavaScript小技巧内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

11个实用JavaScript技巧：从去重到JSON格式化