主持人 > 博客 > 网络新闻 > 大多数教程都忽略的 12 个 JavaScript 技巧

大多数教程都忽略的 12 个 JavaScript 技巧

大多数教程都忽略的 12 个 JavaScript 技巧

当我开始学习 JavaScript 时，我做的第一件事就是列出了一些可以帮助我节省时间的技巧。 我从其他程序员、不同的网站和手册中发现了它们。

在本文中，我将向您展示 12 种改进和加速 JavaScript 代码的好方法。 在大多数情况下，它们是通用的。

我们提醒： 对于“Habr”的所有读者 - 使用“Habr”促销代码注册任何 Skillbox 课程可享受 10 卢布的折扣。

技能箱推荐： 实践课程 “移动开发者专业版”.

过滤唯一值

数组

ES6 中引入了 Set 对象类型，以及..., 扩展运算符，我们可以使用它来创建一个仅包含唯一值的新数组。

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Result: [1, 2, 3, 5]

在正常情况下，需要更多代码来执行相同的操作。

此技术适用于包含基本类型的数组：未定义、null、布尔值、字符串和数字。 如果您正在使用包含对象、函数或其他数组的数组，则需要不同的方法。

缓存数组的长度（以周期为单位）

循环

当您学习 for 循环时，您将遵循标准过程：

for (let i = 0; i < array.length; i++){
  console.log(i);
}

但是，使用此语法时，for 循环每次迭代都会重复检查数组的长度。

有时这可能很有用，但在大多数情况下，缓存数组的长度会更有效，这需要对其进行一次访问。 我们可以通过定义一个长度变量来做到这一点，我们在其中定义变量 i，如下所示：

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

原则上，几乎与上面相同，但是通过增加循环大小，我们将节省大量时间。

短路额定值（麦卡锡额定值）

条件运算符

三元运算符是编写简单（有时不那么简单）条件语句的快速有效的方法：

x > 100？ “100以上”：“100以下”；
x > 100？ (x>200? "200以上": "100-200之间"): "100以下";

但有时即使是三元运算符也比所需的更复杂。 我们可以使用“and”&&和“or”来代替|| 布尔运算符以更简洁的方式计算某些表达式。 它通常被称为“短路”或“短路额定值”。

怎么开动这个

假设我们只想返回两个或多个条件之一。

使用 && 将返回第一个假值。 如果每个操作数的计算结果均为 true，则将返回最后计算的表达式。

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

使用|| 将返回第一个真值。 如果每个操作数的计算结果为 false，则将返回最后计算的值。

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

例1

假设我们想要返回变量的长度，但我们不知道它的类型。

在这种情况下，您可以使用 if/else 来检查 foo 是否是正确的类型，但此方法可能太长。 所以，还是采取我们的“短路”比较好。

return (foo || []).length;

如果变量 foo 具有合适的长度，则将返回该长度。 否则我们会得到 0。

例2

您在访问嵌套对象时遇到问题吗？ 您可能不知道某个对象或其子属性之一是否存在，这可能会导致问题。

例如，我们想要访问 this.state 中的 data 属性，但直到我们的程序返回获取请求后数据才被定义。

根据我们使用它的位置，调用 this.state.data 可能会阻止应用程序启动。 为了解决这个问题，我们可以将其包装在条件表达式中：

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

更好的选择是使用“或”运算符。

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

我们无法更改上面的代码以使用&&。 'Fetching Data' && this.state.data 运算符将返回 this.state.data，无论它是否未定义。

可选链条

当尝试返回树结构深处的属性时，人们可能会建议使用可选链接。 那么，问号符号？ 仅当属性不为 null 时才可用于检索该属性。

例如，我们可以重构上面的示例来获取 this.state.data?..()。 也就是说，只有当值不为空时才返回数据。

或者，如果状态是否定义很重要，我们可以返回 this.state?.data。

转换为布尔值

类型转换

除了普通的布尔函数 true 和 false 之外，JavaScript 还将所有其他值视为 true 或 falsy。

除非另有说明，JavaScript 中的所有值都是 true，除了 0、""、null、undefined、NaN，当然还有 false。 后者是虚假的。

我们可以使用 ! 运算符轻松地在两者之间切换，该运算符还将类型转换为布尔值。

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

转换为字符串

类型转换

从整数到字符串的快速转换可以按如下方式完成。

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

转换为整数

类型转换

我们像这样执行逆变换。

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

该方法还可以用于将布尔数据类型转换为常规数值，如下所示：

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

在某些情况下，+ 可能会被解释为串联运算符而不是加法运算符。 为了避免这种情况，您应该使用波浪号：~~。 该运算符相当于-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"

<快速力量

操作方式

从 ES7 开始，您可以使用幂运算符 ** 作为幂的简写。 这比使用 Math.pow(2, 3) 快得多。 这看起来很简单，但是这一点包含在技术列表中，因为它并没有到处提到。

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

请勿将其与 ^ 符号混淆，后者通常用于求幂。 但在 JavaScript 中，这是 XOR 运算符。

在 ES7 之前，** 快捷方式只能用于使用按位左移运算符 << 的以 2 为底的幂：

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

例如，2 << 3 = 16 相当于 2 ** 4 = 16。

浮点数转整数

操作/类型转换

如果需要将浮点数转换为整数，可以使用 Math.floor()、Math.ceil() 或 Math.round()。 但还有一种更快的方法，为此我们使用 |，即 OR 运算符。

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

行为 | 很大程度上取决于您处理的是正数还是负数，因此只有当您对自己所做的事情充满信心时，此方法才适用。

n | 0 删除小数点分隔符之后的所有内容，将浮点数截断为整数。

您可以使用 ~~ 获得相同的舍入效果。 强制转换为整数后，该值保持不变。

删除尾随数字

OR 运算符可用于从数字中删除任意数量的数字。 这意味着我们不需要像这样转换类型：

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

自动链接

课程

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 = () => {
    // This method is bound implicitly!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

阵列修剪

数组

如果需要从数组中删除值，有比 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]

但还有另一种方法，而且更快。 如果速度对您来说很重要，那么我们的选择如下：

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]

打印数组的最后一个值

数组
该技术需要使用 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 代码

JSON

您可能已经使用过 JSON.stringify。 您知道它有助于格式化您的 JSON 吗？

stringify() 方法采用两个可选参数：一个替换函数（可用于过滤显示的 JSON）和一个空格值。

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

仅此而已，我希望所有这些技术都是有用的。 你还知道哪些技巧呢？ 将它们写在评论中。

技能箱推荐：

来源： habr.com

添加评论