当我开始学习JavaScript时，我做的第一件事就是列出了一些技巧，这些技巧可以帮助我节省时间。 我在其他程序员，不同站点和手册中监视了它们。
在本文中，我将向您展示改善和加快JavaScript代码的12种绝佳方法。 在大多数情况下，它们是通用的。
我们提醒您： 对于所有“ Habr”读者来说，使用“ Habr”促销代码注册任何Skillbox课程时均可享受10,000卢布的折扣。
Skillbox建议：实用课程“ Mobile Developer PRO” 。
唯一值过滤
阵列
Set对象的类型是在ES6中引入的，它与...，即散布运算符一起使用，我们可以使用它来创建一个仅包含唯一值的新数组。
const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray);
在正常情况下，执行同一操作需要更多代码。
此技巧适用于包含原始类型的数组：未定义，空，布尔值，字符串和数字。 如果使用包含对象，函数或其他数组的数组，则将需要其他方法。
缓存的长度（以周期为单位）
循环次数
在学习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);
使用|| 将返回第一个真实值。 如果每个操作数的计算结果都为false，则将返回最后一个计算值。
let one = 1, two = 2, three = 3; console.log(one || two || three);
例子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');
我们无法更改上面的代码以使用&&。 运算符“获取数据” && this.state.data将返回this.state.data，无论是否未定义。
可选链您可以建议在尝试将属性返回到树结构深处时使用可选链。 那么，问号符号呢？ 仅当属性不为null时才可用于检索属性。
例如，我们可以通过获取this.state.data？..（）来重构上面的示例。 也就是说，仅当值不为null时才返回数据。
或者，如果状态是否定义很重要，我们可以返回this.state？.Data。
转换为布尔
类型转换
除了通常的逻辑函数true和false之外，JavaScript还将所有其他值视为true或false。
除非另有说明，否则JavaScript中的所有值都是真实的，唯一的例外是0，“”，null，未定义，NaN，当然还有false。 后者是虚假的。
我们可以使用！运算符轻松地在两者之间切换，该运算符还将类型转换为逻辑。
const isTrue = !0; const isFalse = !1; const alsoFalse = !!0; console.log(isTrue);
转换为字符串
类型转换
可以将整数快速转换为字符串，如下所示。
const val = 1 + ""; console.log(val);
转换为整数
类型转换
我们执行如下逆变换。
let int = "15"; int = +int; console.log(int);
此方法还可用于将布尔布尔数据类型转换为常规数值，如下所示：
console.log(+true);
在某些情况下，+将被解释为连接运算符，而不是加法运算符。 为避免这种情况，请使用波浪号：~~。 该运算符等效于表达式-n-1。 例如，〜15为-16。
连续使用两个波浪号会取消运算，因为-（--n-1）-1 = n + 1-1 = n。 换句话说，〜-16是15。
const int = ~~"15" console.log(int);
<快速力量
操作方式
从ES7开始，您可以使用指数运算符**作为度数的缩写。 这比使用Math.pow（2，3）快得多。 看起来很简单，但是此刻已包含在接收列表中，因为到处都没有提及。
console.log(2 ** 3);
请勿将其与通常用于取幂的符号^混淆。 但是在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);
行为| 在很大程度上取决于您要处理的是正数还是负数，因此该方法仅在对自己的工作充满信心的情况下才适用。
n | 0删除小数点分隔符之后的所有内容，将浮点数截断为整数。
您可以使用~~获得相同的舍入效果。 强制转换为整数后，该值保持不变。
我们删除尾随数字OR运算符可用于从数字中删除任何数字。 这意味着我们不需要转换类型，如下所示：
let str = "1553"; Number(str.substring(0, str.length - 1));
相反，我们只写：
console.log(1553 / 10 | 0)
自动连结
类
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 = () => {
数组修剪
阵列
如果需要从数组中删除值，那么有比splice（）更快的方法。
例如，如果您知道原始数组的大小，则可以如下重写其length属性：
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array.length = 4; console.log(array);
但是还有另一种方法，而且更快。 如果速度对您很重要，那么这是我们的选择：
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array = array.slice(0, 4); console.log(array);
输出最后一个数组值
阵列
此技术需要使用slice（）方法。
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(array.slice(-1));
JSON代码格式
杰森
您可能已经使用过JSON.stringify。 您知道它有助于格式化JSON吗？
stringify（）方法接受两个可选参数：replacer函数（可用于过滤显示的JSON）和值空间。
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
就这样，我希望所有这些技巧都是有用的。 您知道什么技巧？ 将它们写在评论中。
Skillbox建议：