Teilen Sie einige wenig bekannte versteckte Syntax oder Techniken in JavaScript

JavaScript wird oft als die Sprache angesehen, mit der man am einfachsten anfangen kann und die am schwersten zu beherrschen ist, und ich kann dem nur zustimmen. Dies liegt daran, dass JavaScript eine sehr alte und sehr flexible Sprache mit obskurer Syntax und veralteten Funktionen ist.

Ich verwende JavaScript seit vielen Jahren und bis jetzt finde ich gelegentlich versteckte Syntax oder Tricks, von denen ich nicht wusste, dass sie existieren. Obwohl diese Eigenschaften weniger bekannt sind, sind sie dennoch bekannt.

Hinweis: Variablenförderung, Schließungen, Proxys, prototypische Vererbung, asynchrones Warten, Generatoren usw. sind hier nicht enthalten.

Void-Operator

JavaScript verfügt über einen unären Void-Operator. Möglicherweise haben Sie es als void(0) oder void 0 gesehen. Die Funktion von void besteht darin, undefiniert zurückzugeben. Der Operand auf der rechten Seite wird normal berechnet, aber unabhängig vom Ergebnis gibt void undefiniert zurück. Die Verwendung von „0“ ist lediglich eine Konvention. Es ist nicht notwendig, „0“ zu verwenden, es kann ein beliebiger gültiger Ausdruck sein, wie z. B. void , es wird trotzdem undefiniert zurückgegeben.

// 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

Warum ein spezielles Schlüsselwort erstellen, um undefiniert zurückzugeben, anstatt nur undefiniert zurückzugeben? original undefiniert = „abc“ kann ein neuer Wert zugewiesen werden. Damals war die Verwendung von void eine Möglichkeit sicherzustellen, dass immer der ursprüngliche Wert von undefiniert zurückgegeben wurde.

Konstruktorklammern sind optional

Ja, die Klammern, die wir beim Aufruf des Konstruktors nach dem Klassennamen hinzufügen – völlig optional (vorausgesetzt, es müssen keine Parameter an den Konstruktor übergeben werden)

unten Beide Codierungsstile gelten als gültige JS-Syntax und die Ergebnisse sind die gleichen!

// 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

Sie können die Klammern von IIFE (sofort ausgeführte Funktion) weglassen.

IIFE (sofort aufgerufener Funktionsausdruck) funktioniert für mich. Es ist immer ein bisschen seltsam, warum es so viele Klammern gibt ?

Eigentlich dienen diese zusätzlichen Klammern nur dazu, dem JavaScript-Parser mitzuteilen, dass der zu analysierende Code ein Funktionsausdruck und keine Funktion ist. Wenn Sie das wissen, können Sie sich vorstellen, dass es viele Möglichkeiten gibt, diese zusätzlichen Klammern wegzulassen und dennoch effizient mit IIFE zu arbeiten.

// IIFE

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

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

), das funktioniert immer noch!

Ist das einfacher als die ursprüngliche Schreibmethode und hat es mehr B-Zellen?

Aber wenn Sie ein aufmerksamer Beobachter sind, denken Sie vielleicht: Beeinflussen unäre Operatoren nicht das von IIFE zurückgegebene Ergebnis? void 操作符告诉解析器代码是函数表达式。因此，我们可以跳过函数定义周围的括号。你猜怎么着? 我们可以使用任何一元运算符(void， +， !， -等等

Es wird die Ergebnisse beeinflussen. Die gute Nachricht ist jedoch, dass Sie die zusätzlichen Klammern nicht benötigen, wenn Sie das Ergebnis einfach zurückgeben und in einer Variablen speichern.

with-Deklaration

JavaScript verfügt über einen with-Anweisungsblock und with ist eigentlich ein Schlüsselwort in JS. Die Syntax des with-Blocks lautet wie folgt:

Die with-Anweisung kann bequem zum Verweisen auf Eigenschaften verwendet werden, die bereits in einem bestimmten Objekt vorhanden sind, sie kann jedoch nicht zum Hinzufügen von Eigenschaften zum Objekt verwendet werden. Um neue Eigenschaften für ein Objekt zu erstellen, müssen Sie explizit auf das Objekt verweisen.

Fun Fact

mit Blöcken sieht cool aus, oder? Es ist sogar besser als Objektzerstörung. Nun ja, nicht wirklich.

Von der Verwendung der with-Anweisung wird generell abgeraten, da sie veraltet und im strikten Modus völlig verboten ist. Es stellt sich heraus, dass die Verwendung mit Blöcken einige Leistungs- und Sicherheitsprobleme in der Sprache erhöht.

Funktionskonstruktor

Funktionsanweisungen sind nicht die einzige Möglichkeit, neue Funktionen zu definieren. Funktionen können dynamisch mit dem Konstruktor function() und dem Operator new definiert werden.

Fun Facts

Der Funktionskonstruktor ist die Mutter aller Konstruktoren in JavaScript. Sogar der Konstruktor von Object ist ein Funktionskonstruktor. Und der eigene Konstruktor von Function ist auch Function selbst.

Wenn Sie also object.constructor.constructor... mehrmals genug aufrufen, wird schließlich der Funktionskonstruktor für jedes Objekt in JavaScript zurückgegeben.

函数属性

我们都知道函数是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对象的时间戳!

!! Operator

Technisch gesehen handelt es sich nicht um einen separaten JavaScript-Operator. Es handelt sich lediglich um den doppelt verwendeten JavaScript-Umkehroperator.

Wenn der Ausdruck ein wahrer Wert ist, geben Sie true zurück, andernfalls geben Sie false zurück.

~ NICHT-OPERATOREN

Seien wir ehrlich – niemand interessiert sich für bitweise Operatoren. Wann können wir es verwenden?

Hier ist ein alltäglicher Anwendungsfall über den Tilde- oder Bitwise-Not-Operator.

Es stellt sich heraus, dass der NOT-Operator funktioniert, wenn er mit Zahlen ~N => -(N+1) verwendet wird. Dieser Ausdruck ergibt nur dann „0“, wenn N -1 ist.

Wir können dies ausnutzen, indem wir ~ vor die Funktion indexOf(…) setzen, um eine boolesche Prüfung durchzuführen, ob das Element in einem String oder Array vorhanden ist.

Hinweis: ES6 und ES7 haben eine neue .include()-Methode in Strings bzw. Arrays hinzugefügt. Dies ist natürlich eine sauberere Methode als der Tilde-Operator, um zu überprüfen, ob ein Element in einem Array oder String vorhanden ist. Die Verwendung von

Tags

break- und continue-Anweisungen kann in Verbindung mit der lebel-Anweisung verwendet werden, um zu einer bestimmten Stelle im Code zurückzukehren. Wird für verschachtelte Schleifen verwendet, um die Anzahl der Schleifen zu reduzieren.

Empfohlenes Tutorial: „JavaScript-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonTeilen Sie einige wenig bekannte versteckte Syntax oder Techniken in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!