11个鲜为人知的JavaScript高效技巧与最佳实践

过滤数组中的唯一值

1、过滤数组中的唯一值

Set数据结构自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等引用类型，由于Set基于严格相等（===）判断，该方法可能无法达到预期的去重效果。

利用短路求值简化逻辑判断

2、利用短路求值简化逻辑判断

三目运算符是编写简单条件逻辑的便捷方式，

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

然而，当嵌套逻辑变得复杂时，三目运算符的可读性会显著下降。此时，利用逻辑与（&&）和逻辑或（||）运算符的特性来重构表达式，往往能提升代码的清晰度。

逻辑与和逻辑或运算符遵循“短路求值”原则：它们优先计算左侧操作数，仅当左侧操作数的值不足以确定整个表达式的结果时，才会计算右侧操作数。

工作原理

逻辑与（&&）运算符会返回第一个“假值”（falsy，如0、null、undefined等）。如果所有操作数均为“真值”（truthy），则返回最后一个表达式的结果。

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

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

逻辑或（||）运算符会返回第一个“真值”（truthy）。如果所有操作数均为“假值”，则返回最后一个表达式的结果。

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

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

场景举例

在从服务器请求数据并在其他位置使用的场景中，数据获取状态可能未知（例如访问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中，其他值可根据上下文被隐式转换为“真值”或“假值”。

除了0、空字符串（""）、null、undefined、NaN和false这些“假值”外，其余所有值均被视为“真值”。

我们可以利用逻辑非运算符（!）将各类变量强制转换为布尔类型。

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()将浮点数转换为整数。

然而，还有一种更快的方法：利用位或运算符（|）将浮点数截断为整数。

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

| 运算符的行为取决于处理的是正数还是负数，因此建议仅在明确数值范围的情况下使用此快捷方式。

若n为正数，n | 0会有效地向下舍入；若n为负数，则有效地向上取整。更准确地说，该操作直接删除小数点后的内容，将浮点数截断为整数，这与上述其他舍入方法有所区别。

此外，您还可以使用 ~~ 获得相同的舍入效果。如前所述，任何位运算符都会强制将浮点数转换为整数。这些特殊操作之所以有效，是因为一旦强制为整数，数值本身保持不变。

使用场景

位或运算符可用于从整数末尾删除任意数量的数字。这意味着我们无需使用substring等方法在类型间进行转换。

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、类中自动绑定this

在ES6类中，可以通过使用箭头函数来隐式绑定作用域。而在之前的处理方式中，我们需要显式地为方法绑定this，例如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]

JSON格式化与总结

11、格式化JSON代码

在处理JSON相关逻辑时，我们常使用JSON.stringify。但你是否意识到，该方法还能用于美化（缩进）JSON输出？

stringify()方法接受两个可选参数：一个replacer函数和一个space值。replacer函数可用于过滤要显示的JSON数据。

space值可以接受一个整数（表示空格数）或一个字符串（如'\t'用于插入制表符），这能极大地方便读取获取的JSON数据。

总的来说，希望这些技巧能像初次发现时一样为您带来启发。如果您有自己发现的小技巧，欢迎在留言中分享，让我们共同交流。

以上所述是小编给大家介绍的11个教程中不常被提及的JavaScript小技巧详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！