分享一些JavaScript中鮮為人知的隱藏語法或技巧

javaScript 通常被認為是最容易入門的語言，也是最難掌握的語言，我完全同意。這是因為 JavaScript 是一種非常古老且非常靈活的語言，它有著了神秘的語法和過時的特性。

我已經使用 JavaScript 很多年了，直到現在，我偶爾會發現一些隱藏的語法或技巧，這些是我以前不知道的。雖然這些特性可能不太為人所知，但它們仍然是眾所周知的。

注意：這裡沒有包含變數的提升、閉包、代理、原型繼承、非同步等待、產生器等。

void運算子

JavaScript 有一個一元 void 運算子。你可能看過它被用作 void(0) 或 void 0。 void的作用便是回傳undefined，在它右邊的運算元會正常計算，但無論結果是什麼，void都會回傳undefined。使用“0”只是一種慣例。不必使用' 0 '，它可以是任何有效的表達式，如void ，它仍然傳回未定義的。

// void operator
void 0                  // returns undefined
void (0)                // returns undefined
void 'abc'              // returns undefined
void {}                 // returns undefined
void (1 === 1)          // returns undefined
void (1 !== 1)          // returns undefined
void anyfunction()      // returns undefined

為什麼要創建一個特殊的關鍵字來返回undefined而不是僅僅返回undefined? 聽起來有點多餘，不是嗎?

#有趣的事實

實際上，在ES5之前，在大多數瀏覽器中，可以為原始的undefined = "abc"指派一個新值。所以，在那些日子裡，使用void是一種確保始終傳回 undefine 的原始值的方法。

建構函式括號是可選的

是的，我們在呼叫建構函式時在類別名稱後面加上的括號－完全可選!（前提是不需要將任何參數傳遞給建構函數）

下面的兩種程式碼風格都被認為是有效的JS 語法而且結果都是一樣!

// Constructor with brackets
const date = new Date()
const month = new Date().getMonth()
const myInstance = new MyClass()

// Constructor without brackets
const date = new Date
const month = (new Date).getMonth()
const myInstance = new MyClass

可以省略IIFE（立即執行函數）的括號

IIFE (立即呼叫的函數表達式)的語法對我來說總是有點奇怪，為什麼要有那麼多的括號？

實際上，這些額外的括號只是為了告訴JavaScript解析器，即將解析的的程式碼是一個函數表達式，而不是函數。知道了這一點，你可以想像，有很多方法可以省略那些額外的括號，仍然可以使用 IIFE 有效的工作。

// IIFE

(function () {
  console.log('正常形式的 IIFE 调用')
})()

// 清爽的 IIEF 
void function() {
  console.log('酷酷的 IIFE 调用')
}()

void 運算子告訴解析器程式碼是函數運算式。因此，我們可以跳過函數定義周圍的括號。你猜怎麼著? 我們可以使用任何一元運算子(void， ， !， -等等)，這仍然有效!

這是不是比原始的寫法簡單而且B 格多了呢？

但是，如果你是個敏銳的觀察者，你可能會想，一元運算子不會影響 IIFE 回傳的結果嗎？

它會影響結果。但好消息是，如果你只要的回傳的結果並將其儲存在某個變數中，那麼就不需要額外的括號。

with 的宣告

JavaScript 有一個with語句區塊， with 其實是JS中的關鍵字。 with 區塊的語法如下：

with 語句可以方便地用來引用某個特定物件中已有的屬性，但不能用來為物件新增屬性。要為物件建立新的屬性，必須明確地引用該物件。

有趣的事實

with 區塊看起來很酷，對吧? 它甚至比物件銷毀更好。好吧,其實不是。

通常不鼓勵使用 with 語句，因為它已被棄用，在嚴格模式下完全禁止。事實證明，使用 with 區塊會增加語言中的一些效能和安全性問題。

函數建構子

函數語句不是定義新函式的唯一方法，可以使用function()建構子和new 運算子動態定義函式。

有趣的事實

Function 建構子是 JavaScript 中所有建構子的母親。甚至 Object 的建構子也是 Function 建構子。而 Function 自己的建構子也是 Function 本身。 

因此，呼叫 object.constructor.constructor ...足夠多次將最終在 JavaScript 中的任何物件上傳回Function建構函數。

函数属性

我们都知道函数是JavaScript中的第一类对象。因此，没有人阻止我们向函数添加自定义属性。在 JS 中这样做是有效的，然而，它很少被使用。

那么我们什么时候要这样做?

这里有一些很好的用例。例如,

可配置函数

假设我们有一个函数叫做 greet。我们希望函数根据不同的地区打印不同的问候消息，这个区域设置也应该是可配置的。我们可以在某个地方维护全局 locale 变量，也可以使用如下所示的函数属性实现该函数

function greet () {
  if (greet.locale === 'ch') {
    console.log('中国，你好')
  } else if (greet.locale === 'jp') {
    console.log('扣你机哇!')
  } else {
    console.log('Hello World')
  }
}

greet() // Hello World
greet.locale = 'ch';
greet() // 中国，你好

具有静态变量的函数

另一个类似的例子。比方说，希望实现一个生成有序数字序列的数字生成器。通常您将使用带有静态计数器变量的 Class 或 IIFE 来跟踪最后一个值。这样我们就限制了对计数器的访问，同时也避免了使用额外的变量污染全局空间。

但是，如果我们希望能够灵活地读取甚至修改计数器，而又不污染全局空间，该怎么办呢?

我们仍然可以创建一个类，有一个计数器变量和一些额外的方法来读取它;或者我们可以偷懒，使用函数自定义的属性。

Arguments 的属性

我相信你们大多数人都知道函数中的arguments对象。它是一个类似数组的对象，可以在所有函数中使用。它具有在调用函数时传递给函数的参数列表。但它也有一些其他有趣的性质：

• arguments.callee： 当前调用的函数

• arguments.callee.caller：调用当前函数的函数

注意:虽然ES5禁止在严格模式下使用callee & caller，但在许多编译后的库中仍然很常见。所以，学习它们是值得的。

标记模板字符串

模板字符串文字是ES6中许多很酷的附加内容之一，但是，知道标记模板字符串是比较少的?

标记模板字符串允许你通过向模板字符串添加自定义标记来更好地将模板文字解析为字符串。Tag只是一个解析器函数，它获取字符串模板解释的所有字符串和值的数组，标记函数应返回最终字符串。

在下面的例子中，我们的自定义标记 —— 高亮显示，解释模板文本的值，并将解释后的值包装在结果字符串中，使用元素进行高亮显示。

Getters & Setters

在大多数情况下，JavaScript对象是简单的。假设我们有一个 user 对象，我们试图使用user访问它的age属性。使用 user.age 得到年龄属性的值，如果没有定义，我们得到未定义的值。

但是，并不一定要这么简单。JavaScript 对象具有 getter 和 setter 的概念。我们可以编写自定义Getter函数来返回我们想要的任何东西，而不是直接返回对象上的值，设置一个值也是一样。

这使我们可以在获取或设置字段时拥有强大的能力，如 virtual fields，field validations，side-effects。

逗号操作符

JavaScript有一个逗号操作符。它允许我们在一行中用逗号分隔多个表达式，并返回上一个表达式的结果。

在这里，所有表达式都将被求值，结果变量将被赋值给expressionN返回的值。

我们经常在for循环中使用了逗号操作符

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

有时在一行中编写多个语句

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

或者

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

+ 加号操作符号

想要快速地将字符串转换为数字吗?

只需在字符串前面加上+运算符。加号运算符也适用于负数、八进制、十六进制、指数值。更重要的是，它甚至可以转换 Date 或者 Moment.js对象的时间戳!

!! 運算子

從技術上講，它不是單獨的JavaScript運算子。它只是兩次使用的 JavaScript 反運算子。

如果表達式為true值，則傳回true;否則傳回false。

~ 非運算子

讓我們面對它－沒有人關心位元運算子。我們什麼時候才能使用它!

這裡有一個日常用例是關於波浪號或位元非運算子的。

事實證明，當與數字一起使用時，非運算子是有效的 ~N => -(N 1)這個表達式只有在 N為-1時才計算為 “0”。

我們可以透過將~放在theindexOf(…)函數前面來利用這一點，如果項目存在於字串或陣列中，則執行布林檢查。

注意:ES6和ES7分別在字串和陣列中加入了一個新的 .include()方法。當然，這是一種比波浪號操作符更清晰的方法來檢查一個項目是否存在於陣列或字串中。

標籤 的使用

break和continue語句都可以與lebel語句聯合使用，從而傳回程式碼中特定的位置。用於巢狀循環，減少循環次數。

推薦教學：《JavaScript影片教學》

以上是分享一些JavaScript中鮮為人知的隱藏語法或技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！