这次我们主要来分享 11 个在日常教程中不常被提及的 JavaScript 小技巧, 他们往往在我们的日常工作中经常出现, 但是我们又很容易忽略.
1, 过滤唯一值 Set 类型是在 ES6 中新增的, 它类似于数组, 但是成员的值都是唯一的, 没有重复的值. 结合扩展运算符 (...) 我们可以创建一个新的数组, 达到过滤原数组重复值的功能.
[JavaScript] 纯文本查看
在 ES6 之前, 我们如果想要实现这个功能的话, 需要的处理代码要多很多. 这个技巧的适用范围是数组中的数值的类型为: undefined, null, boolean, string, number. 当包涵 object, function, array 时, 则不适用.
2, 短路求值 (Short-Circuit Evaluation) 三目运算符是一个很方便快捷的书写一些简单的逻辑语句的方式,
[JavaScript] 纯文本查看
但是有些时候当逻辑复杂之后, 三目运算符书写起来可读性也会很难. 这个时候, 我们就可以使用逻辑与 (&&) 和逻辑或 (||) 运算符来改写我们的表达式.
逻辑与和逻辑或操作符总是先计算其做操作数, 只有在仅靠左操作数的值无法确定该逻辑表达式的结果时, 才会求解其右操作数. 这被称为 "短路求值(Short-Circuit Evaluation)"
工作原理与 (&&) 运算符将会返回第一个 false/'falsy'的值. 当所有的操作数都是 true 时, 将返回最后一个表达式的结果.
[JavaScript] 纯文本查看
或 (||) 运算符将返回第一个 true/'truthy'的值. 当所有的操作数都是 false 时, 将返回最后一个表达式的结果.
[JavaScript] 纯文本查看
场景举例当我们从服务器端请求数据的过程中, 我们在另一个位置来使用这个数据, 但是获取数据的状态并不知道, 如我们访问 this.state 的 data 属性. 按照常规的方式我们会先去判断这个 this.state.data 的有效性, 之后根据有效性情况分别进行区分处理.
[JavaScript] 纯文本查看
但是我们可以通过上面的方式来简写这个逻辑处理
对比发现这个方式更加的简洁方便.
3, 转换 Boolean 型常规的 boolean 型值只有 true 和 false, 但是在 JavaScript 中我们可以将其他的值认为是'truthy' 或者'falsy'的.
除了 0, "", null, undefined, NaN 和 false, 其他的我们都可以认为是'truthy'的.
我们可以通过负运算符! 将一系列的变量转换成 "boolean" 型.
[JavaScript] 纯文本查看
4, 转换 String 型我们可以通过 + 连接运算符将一个 number 类型的变量转换成 string 类型.
[JavaScript] 纯文本查看
5, 转换 Number 类型和上面对应的, 我们可以通过加法运算符 + 将一个 string 类型的变量转回为 number 类型的
[JavaScript] 纯文本查看
在某些上下文中,+ 将被解释为连接操作符, 而不是加法操作符. 当这种情况发生时(您希望返回一个整数, 而不是浮点数), 您可以使用两个波浪号:~~.(需要注意为英文格式)
一个波浪号~, 被称为 "按位不运算符", 等价于 - n - 1. 所以~ 15 = -16.
使用两个~~ 可以有效的否定运算. 这是因为 - (- n - 1) - 1 = n + 1 - 1 = n. 也就是说 ~-16 = 15
[JavaScript] 纯文本查看
6, 快速求幂从 ES7 开始, 我们可以使用幂运算符 ** 作为求幂的简写, 相对之前的 Math.pow(2, 3) 更加快捷. 这是一个很简单实用的点, 但是大部分的教程并不会专门介绍它.
[JavaScript] 纯文本查看
这不应该与 ^ 符号混淆,^ 符号通常用于表示指数, 但在 JavaScript 中是位 XOR 操作符.
在 ES7 之前, 幂的简写主要依靠的是位左移位操作符 <<, 几种写法的区别
[JavaScript] 纯文本查看
其中需要注意的是 2 << 3 = 16 等价于 2 ** 4 = 16
7, 快速 Float 转 Integer 我们平时可以使用 Math.floor(), Math.ceil()和 Math.round()将 float 类型转换成 integer 类型.
但是还有一种更快的方法可以使用 |(位或运算符)将浮点数截断为整数.
[JavaScript] 纯文本查看
| 的行为取决于处理的是正数还是负数, 所以最好只在确定的情况下使用这个快捷方式.
如果 n 是正数的, 则 n | 0 有效地向下舍入. 如果 n 是负数的, 它则有效地向上取整. 更准确地说, 该操作结果是直接删除小数点后的内容, 将浮点数截断为整数, 和上面提到的其他几个方法是有所区别的.
您还可以使用 ~~ 来获得相同的舍入效果, 如上所述, 实际上任何位操作符都会强制浮点数为整数. 这些特殊操作之所以有效, 是因为一旦强制为整数, 值就保持不变.
使用场景位或运算符可以用于从整数的末尾删除任意数量的数字. 这意味着我们不必使用这样的代码在类型之间进行转换
[JavaScript] 纯文本查看
而是可以使用下面的方式来实现我们的功能
[JavaScript] 纯文本查看
8, 类中自动绑定我们可以在类中通过使用 ES6 增加的箭头函数的方式来实现隐形绑定作用域. 而按照之前的处理, 我们需要显式的去为我们写的方法进行绑定, 类似于 this.myMethod = this.myMethod.bind(this)这样. 当我们的类中有很多方法时, 会增加大量的绑定的代码的书写. 现在我们就可以通过箭头函数的方式来简化这个过程.
[JavaScript] 纯文本查看
9, 截取数组如果您想从数组的末尾删除值, 有比使用 splice()更快的替代方法.
例如, 如果你知道原始数组的长度, 就可以通过重新定义它的 length 属性来实现截取
[JavaScript] 纯文本查看
这是一个特别简洁的解决方案. 但是, slice()方法的运行时更快. 如果速度是你的主要目标, 考虑使用下面的方式
[JavaScript] 纯文本查看
10, 获取数组中的最后的元素数组方法 slice()可以接受负整数, 如果提供它, 它将从数组的末尾开始截取数值, 而不是开头
[JavaScript] 纯文本查看
11, 格式化 JSON 代码我们可能在处理一些 JSON 相关的处理时很多时候都会使用到 JSON.stringify, 但是你是否意识到它可以帮助缩进 JSON 呢?
stringify()方法接受两个可选参数: 一个 replacer 函数和一个 space 值, replacer 函数可以用来过滤显示的 JSON.
space 值接受一个整数, 表示需要的空格数或一个字符串(如'\t'来插入制表符), 它可以使读取获取的 JSON 数据变得容易得多.
[JavaScript] 纯文本查看
总的来说, 我希望当您看到这些技巧时能够和我第一次看到它们一样觉得有用. 如果您有自己发现的小技巧, 也希望能够留言中写下, 我们一起来分享.
来源: http://www.jianshu.com/p/35750bebec59