知っておくべき6つのJavaScript機能
公開: 2020-09-241年ちょっと前に、グーテンベルクで快適に開発するために知っておくべき5つの「新しい」JavaScript機能について話しました。 そこで、オブジェクトと配列の破棄とは何か、矢印関数を作成する方法、spread演算子とrest演算子とは何かなどを学びました。 幸運なことに、JavaScriptにはまだたくさんの機能があり、それらに慣れると、よりわかりやすく簡潔なコードを書くのに役立ちます。
今日は、6つの本当にクールなJavaScript機能を紹介します。 演算子、変数スコープ、promise、非同期関数…それらすべてを学ぶ準備はできていますか？
＃1演算子を使用したJavaScriptのオプションの連鎖?.
オプションの連鎖演算子を使用すると、オブジェクトがundefinedまたはnullである可能性がある場合に、オブジェクトの属性に簡単にアクセスできます。 たとえば、次のようなオブジェクトがあるとします。
const toni = { name: 'Antonio', details: { age: 35, }, }; toniのageにアクセスするには、最初にdetails属性にアクセスし、次にageにアクセスします。
function getAge( person ) { return person.details.age; } 前の関数で私たちが抱えている問題は、あなたにとって目新しいことではないと確信していますが、私たちがそのpersonに期待するプロパティが常にそこにあるとは限らないということです。 つまり、 personまたはperson.detailsのいずれかがundefinedの場合、上記の関数はタイプエラーをトリガーします。
getAge( toni ); // 35 getAge( {} ); // Uncaught TypeError: person.details is undefined通常、いくつかのセーフガードを追加することで、この問題を克服します。
function getAge( person ) { if ( ! person ) { return; } if ( ! person.details ) { return; } return person.details.age; } getAge( toni ); // 35 getAge( {} ); // undefined 明らかにそれを修正します。 残念ながら、結果として得られる関数はより複雑で、本当に重要なことから注意をそらすノイズの多いコードがたくさんあります。 軌道に戻り、より簡単な方法でソリューションを修正するには、オプションの連鎖演算子?. ：
function getAge( person ) { return person?.details?.age; } getAge( toni ); // 35 getAge( {} ); // undefined 基本的に、この演算子は、 undefinedまたはnullでない限り、各プロパティにアクセスします。 存在しないオブジェクトのプロパティにアクセスしようとするとすぐに、 undefinedを返します。
＃2ヌル合体演算子（ ?? ）
||では、次の演算子を使用してデフォルト値を変数に設定するのは非常に簡単です。 、 正しい？ 違う！ これはすべて完了しましたが、注意しないと予期しない副作用が発生する可能性があります…
たとえば、Reduxストアに、ユーザーが設定した値を取得できるセレクターがあるとします。 ユーザーがまだ値を指定していない場合（つまり、値がundefinedの場合）、 ||を使用してデフォルト値を返します。 ：
function getValue( state ) { return state.value || 5; }ここで、ユーザーが何らかの値を設定した後、前の関数で得られるもののいくつかの例を見てみましょう。
// No setValue( x )... getValue(); // 5 setValue( 2 ); getValue(); // 2 setValue( 1 ); getValue(); // 1 setValue( 0 ); getValue(); // 5 おっと！ 最後のケースに到達するまで、すべて正常に機能しました。 どうやら、ユーザーが値を0に設定すると、関数の結果は5になります。 なんで？ まあ、理論的根拠はかなり明白ですxが「偽の」値である場合に限り、 x||yはyを返します。 undefinedは誤った値であるため、これは通常正常に機能します。 しかし、たとえばfalseや0もそうです。
実際には、デフォルト値がない場合にのみdefault値を設定したかったのです。 したがって、値があるかどうかを確認するためのセーフガードを追加できます。
function getValue( state ) { if ( undefined === state.value ) return 5; return state.value; }また、気になる場合は、三項演算子を使用して記述することもできます。
function getValue( state ) { return undefined === state.value ? 5 : state.value; } しかし、繰り返しになりますが、どちらのソリューションもコードを不必要に複雑にします。 変数にデフォルト値を割り当てるには、ヌル合体演算子を使用する必要があります?? 、これは、左側の部分がnullまたはundefinedの場合にのみ、右側の部分を返します。
function getValue( state ) { return state.value ?? 5; }そして、驚き-驚き！、結果はまさに私たちが望んでいたものです：
// No setValue( x )... getValue(); // 5 setValue( 2 ); getValue(); // 2 setValue( 1 ); getValue(); // 1 setValue( 0 ); getValue(); // 0ちなみに、この演算子は割り当てと組み合わせて使用できます。 たとえば、これは次のとおりです。
value = value ?? 5;これと同等です：
value ??= 5;＃3約束と非同期関数
PromiseはJavaScriptに実装されたメカニズムであり、非同期操作、つまり結果がすぐに利用できない操作を操作するときにソースコードを簡素化できます。 たとえば、サーバーからデータを取得する場合、サーバーが要求を受信して処理し、応答を返送するのを待つ必要があるため、応答が瞬時に行われないことは明らかです。
古いJavaScriptバージョンとライブラリ（jQueryなど）では、これをコールバックで実装するために使用していました。 アイデアは非常に単純でした。リクエスト自体とともに、レスポンスが利用可能になったときに呼び出される関数（コールバック）を定義します。 このように、非同期操作（つまり、サーバーからのデータの取得）が完了すると、ライブラリが関数を呼び出し、ロジックが再開されます。
jQuery.ajax( { url: 'https://server.com/wp-json/wp/users/1', success: ( user ) => { console.log( user ); }, } );単一の分離されたリクエストのみをトリガーする場合、このソリューションは非常にエレガントで便利です。 しかし、さらにリクエストを実行する必要があるとすぐに、物事はすぐに汚れます。 たとえば、2人の異なるユーザーをリクエストする場合は、コールバックをネストする必要があります。
jQuery.ajax( { url: 'https://server.com/wp-json/wp/v2/users/1', success: ( user1 ) => { jQuery.ajax( { url: 'https://server.com/wp-json/wp/v2/users/2', success: ( user2 ) => { console.log( user1, user2 ); }, } ); }, } );Promiseは、この問題の解決策です。特定の結果をすぐに取得できない場合（たとえば、サーバーから何かを取得する場合など）、JavaScriptPromiseをすぐに返すことができます。 このオブジェクトは実際の値のラッパーであり、その値が将来のある時点で利用可能になるという「約束」を意味します。
たとえば、promiseを使用して最初のスニペットを書き直すとすると、次のようになります。
const promise = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/1', } ); promise.then( ( user ) => console.log( user ) ); ご覧のとおり、 wp.apiFetchはサーバーからユーザー1をフェッチする必要がありますが、すぐに結果が得られます。 ただし、結果はユーザー自身ではなく、リクエストが完了するとユーザーに解決されるpromiseです。 したがって、私たちがしなければならないのは、promiseが解決されたときにpromiseの応答を処理するコールバックを作成することだけです。
あなたは今、これは私たちが以前持っていたものからそれほど難しくないと思っているかもしれませんね？ 結局のところ、私たちはまだコールバックを使用しています…しかし、複数のリクエストを組み合わせ始めると、これがどれほど役立つかがわかります。
const promise1 = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/1', } ); const promise2 = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/2', } ); Promise.all( [ promise1, promise2 ] ).then( ( [ user1, user2 ] ) => console.log( user1, user2 ); ); promiseを使用して、2つの並列要求を起動してユーザー1と2を取得し、 Promise.allを使用して両方のpromiseが解決されるのを待つことができました。 ネストされたコールバックを含むスパゲッティコードは含まれていません。
さて、約束についての素晴らしいことはまだ来ていません。 いくつかのシンタックスシュガーを使用してJavaScriptPromiseを操作し、同期的に見える非同期コードを記述できます。 あなたがしなければならないのはasyncキーワードを使って非同期関数を定義することだけです、そして突然物事はずっと簡単になります：
async function logTwoUsers( id1, id2 ) { const user1 = await wp.apiFetch( { url: '…' + id1 } ); const user2 = await wp.apiFetch( { url: '…' + id2 } ); console.log( user1, user2 ); } 非同期関数内で非同期操作を呼び出すときはいつでも、 awaitキーワードを使用してその結果を待つことができます。 覚えておくべき唯一のことは、 async関数を定義すると、その結果は常に約束になるということです。
async function getNumberFive() { return 5; } const p = getNumberFive(); // a promise p.then( console.log ); // prints "5" ＃ letとconstを使用する場合の可変スコープ
おそらくすでにご存知のように、 letおよびconstキーワードを使用して変数を宣言できるようになりました。 前者は変数を定義し、後者は定数を定義します。
let x = 1; console.log( x ); // 1 x = 2; console.log( x ); // 2 const y = 1; console.log( y ); // 1 y = 2; // Uncaught TypeError: invalid assignment to const 'y' console.log( y ); // 1 letとvarは同じものであると考えたくなるかもしれません。どちらのキーワードでも、非定数変数を宣言できるからです。 しかし、それらの間には実質的な違いがあります：それらの範囲。 letとconstを使用すると、変数のスコープはそれが定義されているブロックになります。 varでは、それは関数全体です。
function fn() { if ( true ) { var x = 1; let y = 2; const z = 3; }//end if console.log( x ); // 1 console.log( y ); // Uncaught ReferenceError: y is not defined console.log( z ); // Uncaught ReferenceError: z is not defined } ＃ JSON.parseを使用する場合のデータ変換
JSON.parse関数は、JSON文字列を解析し、JavaScriptオブジェクトを作成します。 例えば：
const x = JSON.parse( '{"x":1,"a":[1,2,3]}' ); // Object { x: 1, a: [ 1, 2, 3 ] } ほとんどの人がそれについて知らないのは、それがreviverと呼ばれる2番目の引数をサポートしているということです。 このパラメーターは、解析される要素ごとに実行される関数であり、値を自由に操作できます。 たとえば、次のようなJSON文字列を想像してみてください。
const json = '{"name":"David","birthday":"1985-12-01T10:00:00.000Z"}'; JSON.parseをそのまま使用すると、 nameとbirthdayの2つの文字列属性を持つオブジェクトが生成されます。 しかし、 JSON.parseにreviver関数を提供すると、 birthdayがDateとして解析されることを確認できます。
const user = JSON.parse( json, ( key, value ) => 'birthday' === key ? new Date( value ) : value ) ＃6 Undesrcore文字を使用したソースコードの数値セパレータ（ _ ）
今日の最後のヒントは、数値区切り文字です。 人間が理解しやすいように数字を書くことを可能にする提案（現在はステージ4）があります。 たとえば、次の数字がどれくらい大きいか本当にわかりますか？
10000000000 2189719.25 千単位の区切り文字を使用できれば、解釈がはるかに簡単になります。 そして、それはまさにアンダースコアを使用して実行できることです_ ：
10_000_000_000 2_189_719.25概要
JavaScriptに含まれるすべての新しいツールと機能に慣れれば、より良いJavaScriptコードを書くことができます。 今日、私たちはこのプログラミング言語で何が可能かといういくつかの例を見てきました。 あなたが何か新しいことを学んだことを願っています。もしあなたがそれを気に入ったら、それを同僚と共有することを忘れないでください。 また近いうちにお会いしましょう！
UnsplashのSamDanTruongによる注目の画像。