JavaScript 高效开发：11个实用技巧与最佳实践

1、过滤唯一值

Set类型是在ES6中新增的，它类似于数组，但是成员的值都是唯一的，没有重复的值。结合扩展运算符（...）我们可以创建一个新的数组，达到过滤原数组重复值的功能。

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

场景举例

在从服务器请求数据并在其他位置使用的场景中，数据获取状态可能未知，例如访问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型

标准的布尔值仅包含true和false，但在JavaScript中，其他类型的值也可被隐式转换为‘truthy’或‘falsy’。

除了0、“”、null、undefined、NaN和false之外，其余值均可被视为‘truthy’。

我们可以利用逻辑非运算符！将一系列变量显式转换为布尔类型。

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为负数，则等效于向上取整。更准确地说，该操作直接删除小数点后的内容，将浮点数截断为整数，这与前文提到的其他舍入方法有所区别。

您也可以使用~~获得相同的舍入效果。如上所述，任何位操作符都会强制将浮点数转换为整数，而转换后的值保持不变，因此这些特殊操作才有效。

使用场景

位或运算符可用于从整数末尾删除任意数量的数字。这意味着我们无需使用复杂的类型转换代码即可实现该功能。

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值可接受一个整数，表示所需的空格数，或一个字符串（如' '）以插入制表符，这能显著降低获取JSON数据的阅读难度。

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

到此这篇关于JavaScript小技巧的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持本站。