判断数组中是否包含某一项 indexof 重复的判断不准_在大多数前端教程中很少提及的 10 条 JavaScript 技巧...

当我开始学习 JavaScript 时，我不断收藏其他人或者代码挑战网站上的优秀代码，并总结出一份巧妙代码清单。

现在，我将分享其中特别精妙的 10 条技巧。这篇文章旨在对初学者有用，但是我希望中级 JavaScript 开发人员也能从中学到新的东西。

尽管这些技巧很方便，但其中的一些技巧，在团队中使用需要特别注意，因为对于团队来说，代码的清晰度比简洁性重要。

以下就是 10 条技巧详细内容，排名不分先后。

一、数组去重

Set 对象类型和 ...(展开运算符)在 ES6 中被引入，我们可以使用这些来创建一个无重复的数组。

在 ES6 以前，去重需要更繁琐的代码。

这个技巧适用于包含基本类型的数组：undefined、null、boolean、string、number。如果数组中包含对象、函数或其他数组，则需要使用其他方法。

二、短路运算

三目运算符是一种编写条件语句的简单方法。 如图所示 ——

但有时候三目运算符也会显得复杂。这时候，我们可以考虑使用 &&(和)||(或)这两个逻辑运算符进行表达式的计算。这种方式被称作短路运算。

使用方法：

假设我们希望返回两个或多个选项中的某一个选项。

使用 && 操作符将返回第一个 false 或 falsy 的值。如果每步运算均被评估为 true，则返回最后一个表达式。

使用 || 操作符会返回第一个 true 或 truthy 的值。如果每步运算均被评估为 false，则返回最后一个表达式。

示例1：

假如我们希望返回变量的长度，但又不确定变量的类型。

我们可以使用 if/else 语句来检查变量的类型，但使用短路运算符可以更加简洁地实现：

如果变量 foo 是属于 truthy，他会被返回变量的长度，否则，会返回空数组的长度 0。(严格来讲，假如 foo === true，true.length === undefined，可能和期望有所出入。所以示例代码只适合于变量类型可能为字符串、数组、集合、undefined等)

示例2:

你是遇到过需要访问嵌套的对象属性的问题？在这种情况下，你可能不知道对象或对象的子属性是否存在，这可能会导致出现错误。

比方说，我们需要访问 this.state 中的 data 属性，但是 data 需要在请求完成前都是 undefined。

这种情况下，我们通常添加一个判断条件：

但是这显得十分繁琐。 || 操作符提供了一种更加简洁的方法。

三、布尔类型转换

除了常规的布尔值 true 和 false，JavaScript也会将其他值视为 truthy 或 falsy。

除非另有定义，除了 0、""、null、undefined、NaN 和 false 这些 falsy 值，其他全部都是 truthy。

通过 ! 运算符，我们可以轻松地在 true 和 false 之前切换，将类型转换成 boolean。

四、转换为字符串

将数字快速转换成字符串，我们可以使用 + 运算符后跟空字符串""

五、转换为数字

+ 运算符可以快速地实现数字类型转换。

这也可以将布尔值转换为数字：

另外，按位运算符 ~ 也可以实现数字类型转换，并返回一个整数。其等价于 -n-1。因此，~15 等于 -16。

而连续两个 ~~ 运算符会抵消运算。

而单个 ~ 运算符其实还有妙用。在使用 indexOf 时候，我们需要对结果和 -1 比对，以确定目标元素是否在其中：

六、幂运算

从 ES7 开始，可以将幂运算符 ** 作为 Math.pow() 的简写。以下写法是等价的：

七、快速将浮点数转换成整数

将浮点数转换成整数，我们知道有 Math.ceil() Math.floor() 或 Math.round() 方法。其实，还有一些更快的方法，那就是使用按位或 | 运算符将浮点数截取为整数。

运算符 | 的行为依赖于处理的数字是正数还是负数，所以是在确定的情况才使用这个操作符。

如果 n 为正数，则实现向下舍入，如果 n 为负数，则实现向上舍入。

当然，像上一个例子演示的，使用 ~~ 操作符同样实现相同的效果。

另外，按位或 | 运算符还能实现从整数末尾删除任意数量的数字，这意味着我们不必使用如下代码在类型之间进行转换：

使用按位或 | 操作符：

你可能疑惑这个有什么作用？如果在处理过货币国际化相关的问题时，你会碰到类似的单位转换。

例如人民币转日元，由于日元是整数的：

当然，也可以使用之前文章提到的 toLocaleString 解决。

前端面试题 | 金额格式化——银行、电商面试必考

八、截断数组

如果你想从数组的末尾截断数组，那么这里有比 splice() 更简洁的方式。

例如，当你知道数组的长度，那么可以通过重新定义数组的长度进行截断。

九、从数组的末尾获取数组

数组方法 slice() 可以使用负整数。

十、JSON 格式化

你可能使用过 JSON.stringify()，但是你有没留意它能帮助你缩进 JSON？

JSON.stringify() 接受两个参数，一个是 replacer 函数(可用于过滤显示的 JSON)，另一个是 space 值。

space 值能接受表示的空格数的整数值或一个字符串(例如 '' 制表符)，这样生成的 JSON 字符串更易于阅读。

结语

总之，我希望这些技巧能帮到你，你有自己的 JavaScript 技巧吗？欢迎评论区讨论。

建议收藏以备不时之需。

译文，有部分修改。地址：https://medium.com/@bretcameron/12-javascript-tricks-you-wont-find-in-most-tutorials-a9c9331f169d