ES6の愚かなトリック

これは、ES6 JavaScript標準が提供するそれほど明白ではないクールな機能の一部に関する記事の翻訳です。 随時、記事で麻薬が発生します。そのため、すべてを質的に翻訳することはできませんでした。 わき柱を見つけたら、それについて私に書いてください-私はそれを修正します。

{オリジナルには、猿と一緒に理解できないgifがありましたが、どういうわけかよくわからなかったので、ここには入れません}

ここでは、実際にはトリックではないES6ベースのメソッドをいくつか紹介します。新しい構文を使用するだけで、コードを適切にカットしたり、読みやすくしたり、楽しんだりすることができます。 I（ハブのこの記事の作成者ではなく、元の作成者-約Per。）この記事でさらに収集することを計画しているので、ブックマークに追加して、時々チェックしてください。 ここで言及していない面白いトリックもある場合は、それについて書いてください！

再編

再構築は、ES6構文のお気に入りの部分です。 現在はノード6にもあるため、このビジネスはフロントエンドとサーバー側の両方で使用できます。 詳細については、 MozillaのWebサイト （ちなみにロシア語でも）でこの事例の説明を読むことができます。根拠がわからない場合でも、 MB / LFを持っている人は、ネストされたオブジェクトの特定の変数に特定の値を簡単に割り当てることができます。

いくつかの簡単な例：

//    const [a, b] = [1,2]; // a = 1, b = 2 //      const { a } = { a: 3 }; // a = 3 //    function foo({ a }) { console.log(a); } foo({ a: 4 }); //  4
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

名前を変更

知らないかもしれない破壊のトリックの1つは、途中で名前を変更する機能です。 ES6モジュールを使用した場合、インポートされたオブジェクトの名前を変更するときにimportステートメントがどのように機能するかを知っているかもしれません。また、再構築するときになぜこのように機能しないのか疑問に思うかもしれません。 まあ、実際には少し異なる構文があります：

 //         . const first = 5; const { first: second } = { first: 3 }; console.log(second); //  3 //    API      function verifyUser({ userId: id }) { return User.update({ id, verified: true }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デフォルト設定と組み合わせて

デフォルトのパラメーターを使用すると、ユーザーから渡されなかったパラメーターの値を指定できますが、到着時にそれらを破棄する場合はどうなりますか？ 問題ありません...割り当ての左側（別名lvalue ）にはデフォルトのパラメーターがあるため、ここでも構造化を使用できます！

 function defaults({ a, b } = { a: 1, b: 2 }) { console.log('a', a); console.log('b', b); } defaults(); // a 1 // b 2 defaults({ a: 42, b: 32 }); // a 42 // b 32 //     ! //       . defaults({ a: 87 }); // a 87 // b undefined
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

破壊自体にもデフォルトのオプションがあるため、両方のオプションを混在させることができます！

 function defaults({ a = 1, b = 2 } = {}) { console.log('a', a); console.log('b', b); } defaults(); // a 1 // b 2 defaults({ a: 42, b: 32 }); // a 42 // b 32 //  ?  ,   ,     defaults({ a: 87 }); // a 87 // b 2
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

割り当て、枝、および葉

深いオブジェクトや配列を破壊することさえできます！ ただし、オブジェクトの中間キーはこの時点では割り当てられません。 ある種の中間キーと深いノードを割り当てたい場合はどうしますか？ 質問してください！ つまり、次の例に示すように、必要な変数（この場合は中間接続）を宣言し、それを別のレベル（中間->ネスト）に移動するための仕様として再度使用できます（ まあ、中毒 ... -約

 const { topLevel: { intermediate, //   intermediate: { nested //   } } } = { topLevel: { intermediate: { nested: 56 } } }; // intermediate is { nested: 56 } // nested is 56
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Nodeの慣用的なコマンドライン引数

Node.jsはスクリプトを書くのに最適です。 コマンドライン引数については、それらをprocess.argv



から抽出できprocess.argv



。 あなたが何か複雑なことをしている場合、または本当に人々が使用するために何かをしている場合、それらを解析するためにyargsのようなものを使用する方が良いでしょう。 しかし...単純に少数の引数を取るスクリプトがある場合、配列の破壊を使用して最初の2つの引数（通常はNode.jsへのパスとスクリプトへのパス）をスキップし、残りを変数に割り当てることができます。

 #!/usr/bin/env node //    ,   node.js    const [,,filepath] = process.argv; doSomethingFSLike(filepath);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

拡張オブジェクトリテラル

オブジェクトリテラル構文の更新は本当にクールで、「短い値の名前」を使用して上記の例のいくつかをリンクしています。 最初の手法はもはや仕掛けではなく、不要な場合にリンクを回避する機能です。 外部から変数または関数を見たいが、ヘルパーオブジェクトとしてエクスポートする関数内でそれを使用したいとします。 返されたオブジェクトの外側で宣言し、下にネストする手法により、バインドを回避できます。

 const moment = require('moment'); const PERIOD = moment.duration(3, 'days'); module.exports = { PERIOD, isWithinPeriod(test) { return moment().add(PERIOD).isAfter(test); }, }; ///    ,    ... const timeUtils = require('./time-utils'); describe('timeUtils.isWithinPeriod', () => { it('      ', () => { const beyondPeriod = moment().add(timeUtils.PERIOD).add(timeUtils.PERIOD); assert(timeUtils.isWithinPeriod(beyondPeriod) === false); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JSXと一緒に

もちろん、これはES6ではありませんが、ESXの非常に便利な方法で短いプロパティ値などのES6の機能を使用できます。

 function WhySoManyProps(props) { const user = extractUser(props); const fudge = calculateFudge(); const bits = computeBits(); //   . return <SomeComponent user={user} fudge={fudge} bits={bits} />; } function Shorthand(props) { const user = extractUser(props); const fudge = calculateFudge(); const bits = computeBits(); //    ,     ,    return <SomeComponent {...{ user, fudge, bits }} />; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

確かに、このアプローチはReact.jsの公式ドキュメントでは推奨されていません 。 翻訳者。

Object.assign

Object.assignは、物事を不変に保つのに役立つ（または少なくとも中間オブジェクトに一時的な変更のみを行う）のに役立つ素晴らしい新しい追加機能です。 しかし、配列値にも設定できることをご存知ですか？

 const original = [0,1,2,3]; const copy = Object.assign([], original, { 2: 42 }); // [0,1,42,3] console.log(original); // [ 0, 1, 2, 3 ] console.log(copy); // [ 0, 1, 42, 3 ]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

あなたの提案は？

この記事に欠けている他のトリックはありますか？ コメントで共有してください！