9 つの非常に重要な使用上のヒント (コード付き)

今回は、JS を使用する際の 9 つの重要な使用スキル (コード付き) をご紹介します。実際の事例を見てみましょう。

1. 配列の末尾要素を削除します

配列の末尾要素をクリアまたは削除する簡単な方法は、配列の長さ属性値を変更することです。

const arr = [11, 22, 33, 44, 55, 66];
// truncanting
arr.length = 3;
console.log(arr); //=> [11, 22, 33]
// clearing
arr.length = 0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined

2. オブジェクトの構造化を使用して、名前付きパラメーターをシミュレートします

一連のオプションをパラメーターとして関数に渡す必要がある場合は、オブジェクト (Object) を使用して構成 (Config) を定義する傾向があります。

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
function doSomething(config) {
	const foo = config.foo !== undefined ? config.foo : 'Hi';
	const bar = config.bar !== undefined ? config.bar : 'Yo!';
 	const baz = config.baz !== undefined ? config.baz : 13;
 	// ...
}

これは古いですが、JavaScript で名前付きパラメーターをシミュレートする非常に効果的なメソッドです。ただし、doSomething での設定の処理方法は少し面倒です。 ES2015 では、オブジェクトの構造化を直接使用できます。

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
 // ...
}

このパラメータをオプションにしたい場合も、それは簡単です。

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
 // ...
}

3. オブジェクト分割を使用して配列を処理します

オブジェクト分割の構文を使用して、配列の要素を取得できます:

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
const { 2: country, 4: state } = csvFileLine.split(',');

4. switch ステートメントで範囲値を使用できます

次のテクニックを使用して、範囲値を満たす switch ステートメントを作成します:

function getWaterState(tempInCelsius) {
 let state;
 
 switch (true) {
  case (tempInCelsius  0 && tempInCelsius <p style="text-align: left;"><strong>5. 複数の非同期関数を待機します</strong></p><p style="text-align: left;"> async/await を使用する場合、Promise.all を使用して複数の非同期関数を待機できます。 </p><pre class="brush:php;toolbar:false">await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. 純粋なオブジェクトを作成します

Object からプロパティやメソッド (コンストラクター、toString() など) を継承しない、100% 純粋なオブジェクトを作成できます。

const pureObject = Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined

7. JSON コードのフォーマット

JSON.stringify は、オブジェクトを特徴付けるだけでなく、JSON オブジェクトをフォーマットして出力することもできます。

const obj = { 
 foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } 
};
// The third parameter is the number of spaces used to 
// beautify the JSON output.
JSON.stringify(obj, null, 4); 
// =>"{
// =>  "foo": {
// =>    "bar": [
// =>      11,
// =>      22,
// =>      33,
// =>      44
// =>    ],
// =>    "baz": {
// =>      "bing": true,
// =>      "boom": "Hello"
// =>    }
// =>  }
// =>}"

8. 配列から重複した要素を削除する

ES2015 には set 構文があります。 set 構文と Spread 演算を使用すると、重複した要素を簡単に削除できます:

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]

9. 多次元配列のタイル化

Spread 演算を使用すると、ネストされた多次元配列を簡単にタイル化できます:

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

残念なことに、上記の方法は 2 次元配列にのみ適用されます。ただし、再帰を使用すると、任意の次元のネストされた配列を平坦化できます。

そうです

それです!これらのヒントが、より美しい JS コードを書くのに役立つことを願っています。それでも十分でない場合は、Fundebug をアシスタントとして使用することもできます。

注目のコメント

Ethan B Martin: このスイッチの書き方は非常に巧妙ですが、お勧めしません。開発者にこの方法で JS コードを記述することを推奨しないでください。かつて私たちはエンジニアにこれを書かせましたが、その後のコードレビュー中に読み取りに関する多くの問題が発生しました。幸いなことに、私たちは時間内にそれをより読みやすいコードにリファクタリングしました。 switch と if の使用の違いを比較してみましょう:

unction flattenArray(arr) {
 const flattened = [].concat(...arr);
 return flattened.some(item => Array.isArray(item)) ? 
  flattenArray(flattened) : flattened;
}
const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr); 
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

2 番目の記述方法には、いくつかの利点があります:
A) コードの量が少なく、読みやすい B) ローカル変数とリーダーを宣言する必要がありません。この変数にどのような変更を加えたかを常に追跡する必要はありません。C) switch(true) は非常に混乱する可能性があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ローカル環境でのノードサーバーのクロスドメイン使用法の概要

DOM ドキュメントツリー内のすべてのデータを取得する方法

以上が9 つの非常に重要な使用上のヒント (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。