JavaScript のあまり知られていない隠れた構文やテクニックを共有します

JavaScript は、始めるのが最も簡単な言語である一方、習得するのが最も難しい言語であるとよく考えられていますが、私もこれに同意するほかありません。これは、JavaScript が非常に古く、非常に柔軟な言語であり、難解な構文と時代遅れの機能があるためです。

私は JavaScript を長年使用してきましたが、今まで、これまで知らなかった隠された構文やトリックを発見することがあります。これらの特性はあまり知られていないかもしれませんが、それでもよく知られています。

注: 変数のプロモーション、クロージャ、プロキシ、プロトタイプの継承、非同期待機、ジェネレーターなどはここには含まれません。

void 演算子

JavaScript には単項 void 演算子があります。 void(0) または void 0 として使用されているのを見たことがあるかもしれません。 void の機能は unfineed を返すことであり、その右側のオペランドは通常通り計算されますが、結果がどのようなものであっても void は unfineed を返します。 「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

なぜ、ただ単に未定義を返すのではなく、未定義を返す特別なキーワードを作成するのですか?少し冗長に聞こえますね?

面白い事実

## 実際、ES5 より前では、ほとんどのブラウザで、元の未定義 = "abc" に新しい値を割り当てることができました。そのため、当時は、void を使用することで、元の undefined 値が常に返されるようにすることができました。

コンストラクターの括弧はオプションです

はい、コンストラクターを呼び出すときにクラス名の後に追加する括弧は完全にオプションです! (ただし、コンストラクターに渡すパラメーターは必要ありません)コンストラクター)

次の 2 つのコード スタイルは有効な 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

Yes IIFE の括弧を省略します (即時実行される関数) )

IIFE (即時に呼び出される関数式) の構文は、私にとっていつも少し奇妙に感じていました。なぜこれほど多くの括弧があるのでしょうか?

実際には、これらの追加の括弧は、解析対象のコードが関数ではなく関数式であることを JavaScript パーサーに伝えるためのものです。このことを理解すると、余分な括弧を省略しても IIFE で効率的に動作する方法がたくさんあることが想像できます。

// IIFE

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

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

void 演算子は、コードが関数式であることをパーサーに伝えます。したがって、関数定義を囲む括弧は省略できます。どう思いますか? 任意の単項演算子 (void、, !、-、etc) を使用でき、それでも機能します!

これは、元の書き方よりも単純ではないでしょうか。 B細胞が増えた?どうした?

しかし、熱心な観察者であれば、単項演算子は IIFE から返される結果に影響を与えるのではないかと考えているかもしれません。

結果に影響します。ただし、良いことに、結果を返して変数に格納するだけの場合は、余分な括弧は必要ありません。

#with 宣言

JavaScript には with ステートメント ブロックがあり、with は実際には JS のキーワードです。 with ブロックの構文は次のとおりです。

#with ステートメントは、特定のオブジェクトにすでに存在するプロパティを参照するために便利に使用できますが、次の目的で使用することはできません。オブジェクトにプロパティを追加します。オブジェクトに新しいプロパティを作成するには、オブジェクトを明示的に参照する必要があります。

楽しい事実

ブロックがあるとカッコいいですよね? オブジェクトを破壊するよりもさらに優れています。いや、そうではありません。

with ステートメントは非推奨であり、厳密モードでは完全に禁止されているため、通常は使用しないでください。 with ブロックを使用すると、言語のパフォーマンスとセキュリティの問題がいくつか増加することがわかりました。

関数コンストラクター

関数ステートメントは、新しい関数を定義する唯一の方法ではありません。関数は、function() コンストラクターと new 演算子を使用して動的に定義できます。

興味深い事実

関数コンストラクターは、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 の逆演算子を 2 回使用しただけです。

式が true 値の場合は true を返し、それ以外の場合は false を返します。

~ 非演算子

正直に言うと、ビット単位の演算子など誰も気にしません。いつ使用できますか!

ここでは、チルダまたはビット単位の NOT 演算子に関する日常的な使用例を示します。

NOT 演算子は、数値 ~N => -(N 1) とともに使用すると有効であることがわかりました。この式は、N が -1 の場合にのみ「0」と評価されます。

これを利用するには、indexOf(...) 関数の前に ~ を置きます。この関数は、項目が文字列または配列に存在するかどうかのブール チェックを実行します。

注: ES6 と ES7 では、それぞれ文字列と配列用の新しい .include() メソッドが追加されました。もちろん、これは、配列または文字列に項目が存在するかどうかをチェックするためのチルダ演算子よりもクリーンな方法です。

タグの使用

break ステートメントと continue ステートメントを lebel ステートメントと組み合わせて使用​​すると、コード内の特定の場所に戻ることができます。ループの数を減らすためにネストされたループに使用されます。

推奨チュートリアル: 「JavaScript ビデオ チュートリアル 」

以上がJavaScript のあまり知られていない隠れた構文やテクニックを共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。