这些不为人知的JavaScript特性，你知道多少？

这些不为人知的JavaScript特性，你知道多少？

图片
做者｜Viral Shah
译者｜无明
JavaScript 一般被认为是最容易入门却最难以掌握的编程语言。我彻底赞同这种说法。这是由于 JavaScript 是一门很是古老却又很是灵活的语言。它有着各类各样神秘的语法和古老的特性。我是一个 JavaScript 老用户，直到如今，我仍然会时不时地发现一些我历来都不知道的隐藏语法或技巧。
图片
我将在这篇文章中列出一些不为人知的 JavaScript 特性。虽然其中一些在 strict 模式下是无效的，但它们仍然是有效的 JavaScript 代码。但请注意，我不建议你使用全部这些特性。虽然它们看起来很酷，但若是你真的使用了这些特性，颇有可能会让你的队友吐血。
全部相关的代码均可以在这里（https://gist.github.com/viral-sh/98813f83f4afe9dce5a74e176f88724f）找到，祝你编程愉快！
注意：我不会说起诸如 Hoisting、闭包、代理、原型继承、async/await、生成器，等等。虽然这些特性可能不太好理解，但它们实际上是众所周知的。
void 运算符
JavaScript 提供了一个一元运算符 void，你可能已经看到过它的这种用法，好比 void(0) 或 void 0。它的做用只有一个——计算其右边的表达式并返回 undefined。使用“0”只是一种惯例，你不必定要使用“0”，它能够是任何有效的表达式，如 void，它仍然会返回 undefined。
图片
为何要建立一个特殊的关键字来返回 undefined，而不是直接返回 undefined？这彷佛有点多余，不是吗？
实际上，在 ES5 以前，你能够在大多数浏览器中为给 undeunfined 赋值，好比 undeunfined = “abc”。在那个时候，使用 void 是一种确保老是可以返回 undefined 的方法。
构造函数的括号是可选的
在调用构造函数时，类名后面的括号是可选的（前提是你不须要传递任何参数）！
下面的代码都是有效的 JS 语法，而且会给你彻底相同的结果！
图片

能够跳过 IIFE 的括号

IIFE（当即调用函数表达式）的语法对我来讲老是有点奇怪。那些括号都有什么做用？
那些额外的括号只是为了告诉 JavaScript 解析器，后面的代码是一个函数表达而不是一个函数。知道了这一点，咱们就有不少方法能够跳过这些额外的括号，并仍然可使用有效的 IIFE。
图片
void 运算符告诉解析器后面的代码是函数表达式。所以，咱们能够跳过函数定义周围的括号。咱们还可使用任何一元运算符（void、+、!、-，等等），它们都是有效的！
你可能会想，一元运算符不会影响 IIFE 返回的结果吗？
它确实会影响返回的结果。但若是你关心结果，并但愿将结果赋给在某个变量，那么首先你就不须要额外的括号。
图片
咱们添加这些括号只是为了更好的可读性。
with 语句

JavaScript 也支持 with 块？with 其实是 JS 的一个关键字。with 块的语法以下：

with (object)
   statement 
// for multiple statements add a block
with (object) {
   statement
   statement
   ...
}

with 将“对象”的全部属性添加到用于计算语句的做用域链中。
图片
with 块看起来很是酷，它甚至比对象解构更好，但其实并不尽然。
一般不鼓励使用 with 语句，由于它已经被弃用。在 strict 模式下是被彻底禁止的。事实证实，使用 with 块会带来一些性能和安全方面的问题。

Function 构造函数

function 语句并非定义新函数的惟一方法，你可使用 Function() 构造函数和 new 运算符动态定义函数。
图片
最后一个参数是函数的字符串化代码，前面的其余参数是函数的参数。
Function 构造函数是 JavaScript 中全部构造函数的祖先。甚至 Object 的构造函数也是 Function。而 Function 本身的构造函数也是 Function 自己。所以，若是调用 object.constructor.constructor…足够多的次数，最后将得到 Function 构造函数。
函数属性
咱们都知道，函数是 JavaScript 的一等对象。所以，咱们固然能够向函数添加自定义属性。这样作是彻底有效的。然而，它不多被这样使用。
那么，咱们何时会这么作呢？

可配置的函数

假设咱们有一个叫做 greet 的函数。咱们但愿它可以根据不一样的区域设置打印出不一样的问候语。区域设置也应该是可配置的。咱们能够在某处维护一个全局区域环境变量，或者咱们也可使用函数属性来实现这个函数，以下所示：

具备静态变量的函数
另外一个相似的例子，假设你想要实现一个生成一系列有序数字的数字生成器。一般，你会使用 Class 或 IIFE，并使用一个静态计数器变量来跟踪最后一个值。这样咱们就能够限制对计数器的访问，并避免使用额外的变量来污染全局命名空间。
可是，若是咱们但愿可以灵活地读取甚至是修改计数器，而且不污染全局命名空间呢？
咱们仍然能够建立一个 Class，带有一个计数器变量和一些额外的方法来读取它，或者咱们可使用函数的属性。

参数属性

我相信大多数人都知道函数的 arguments 对象。它是一种相似于数组的对象，全部函数都包含了它。它包含了在调用函数时传给函数的全部参数，但它也有一些其余有趣的属性：

• arguments.callee：指当前调用的函数；
• arguments.callee.caller：指调用当前函数的函数。
  
  注意：尽管 ES5 禁止在 strict 模式下使用 callee 和 caller，但在不少编译库中仍然很常见。

  标记模板字面量

  除非你与世隔绝，不然你必定据说过模板字面量。模板字面量是 ES6 的众多很酷的补充特性之一。可是，你知道标记模板字面量吗？
  
  在使用标记模板字面量时，你能够经过向模板字面量添加自定义标记来更好地控制如何将模板字面量解析为字符串。标记只是一个解析器函数，它获取字符串模板中全部的字符串和值。标记函数负责返回最终的字符串。
  在下面的示例中，咱们的自定义标记——highlight，解释模板字面量的值，并使用元素将解释的值包装在结果字符串中，以突出显示。
  

  Getter 和 Setter

  JavaScript 对象的大部分东西是很简单的。假设咱们有一个 user 对象，而且咱们使用 user.age 来访问它的 age 属性，若是定义了 age 属性，咱们就会获得它的值，若是没有，咱们就会获得 undefined。
  可是，它也可能不会这么简单。JavaScript 对象也有 Getter 和 Setter 的概念。咱们能够编写自定义的 Getter 函数来返回咱们想要的任何东西，而不是直接返回对象的值。设置值也是同样的。
  这样咱们在获取或设置字段时就拥有了一些强大的概念，如虚拟字段、字段验证、反作用，等等。

Getter 和 Setter 并非 ES5 的新增功能，它们一直都存在。ES5 只是为它们添加了方便的语法。

逗号运算符

JavaScript 提供了一个逗号运算符，咱们能够用它在一行中编写由逗号分隔的多个表达式，并返回最后一个表达式的结

let result = expression1, expression2,... expressionN

这里全部的表达式都会被计算，并将 expressionN 返回的值赋给 result 变量。
你可能已经在 for 循环中使用了逗号运算符：

for (var a = 0, b = 10; a <= 10; a++, b--)

有时候，在一行中编写多个语句会有所帮助：

function getNextValue() {
    return counter++, console.log(counter), counter
}

或者用它编写很短的 lamda 表达式：

const getSquare = x => (console.log (x), x * x)

加号运算符

你是否曾经想过快速将字符串转换为数字？
只需在字符串前面加上加号便可。
加号运算符也适用于负数、八进制、十六进制、指数。它甚至能够将 Date 或 Moment.js 对象转换为时间戳！

!! 运算符

从技术上讲，它并非一个单独的 JavaScript 运算符。它的效果与使用两次 JavaScript 否认运算符是同样的。
!! 是将任何表达式转换为布尔值的一个巧妙的技巧。
若是表达式是真值，则返回 true，不然返回 false。

~ 运算符

没有人会关心位运算符，由于咱们几乎不多会用它！但它确实有一些使用场景！
当与数字一块儿使用时，好比~N => -(N + 1)。这个表达式只在 N == -1 时结果为“0”。
咱们能够在 indexOf(…) 函数前面加一个~ 来进行布尔检查，看看一个项是否存在于 String 或 Array 中。

注意：ES6 和 ES7 分别在 String 和 Array 中添加了一个新的.includes() 方法。固然，它比使用~ 运算符检查项目是否存在于 Array 或 String 中更清晰一些。

标签语句

JavaScript 也有标签语句的概念。咱们能够在 JavaScript 中使用标签来命名循环和代码块。而后，咱们能够在 break 或 continue 时经过这些标签返回到以前的代码。
在嵌套循环中使用标签语句会很是方便，咱们也可使用它们来将代码组织成代码块或建立可 break 的代码块。

注意：与其余一些语言不一样，JavaScript 中没有 goto。所以，咱们只能使用在 break 和 continue 中使用标签。
英文原文：
https://blog.usejournal.com/little-known-features-of-javascript-901665291387活动推荐2019 年 4 月 25-27 日北京国际会议中心，QCon 与您相约得到启发，共同关注行业趋势与工程实践。点击 「阅读原文」 或识别二维码了解 QCon 十周年精心策划，早鸟 7 折立减 2640 元，有任何问题欢迎联系票务小姐姐 Ring：电话 010-53935761，微信 qcon-0410