一つの面接問題からES 6の総合的な運用を身につけます.

面接の過程で、よく候補者が上手に書いてくれたり、ES 6に精通していたりするのを見ますが、問題を持って自分の把握状況を試してみてください.

//        
const data = [{
    key: 'name',
    value: '   er'
}, {
    key: 'age',
    value: 1,
}, {
    key: 'from',
    value: '    '
}]
//          processFn
//      key，value    
{
    name: '   er',
    age: 1,
    from: '    '
}
const processFn = data => processData

//           es6    ，          ，     。

多くの候補者がテーマを見ると、構想がすぐできます.まず、実現された一番多いバージョンを見てください.

const processFn = data => {
    const processData = {};
    for (let i = 0; i < data.length; i++) {
        const key = data[i].key;
        const value = data[i].value;
        processData[key] = value;
    }
    return processData;
}

標準的な実装ではないですか?この中にはどのようなES6の特性が使われていますか?これは主に3つの矢印関数=>、一つはブロックレベルステートメントlet、一つは定数ステートメントconstを使用していることが分かります.
ここでは、変数の値を変えてはいけないのではなく、変数が指しているメモリアドレスに保存されているデータは変えられないのです.それでは、どうやって本当に読み取り専用の対象を実現するのですか?

const constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

上の問題を続けてください.もし単独でES6にどのような新特性があるかを聞いたら、多くの人が答えられます.しかし、本当のコードを使って編纂すると、やはり古いセットに戻ります.実は、この問題について言えば、 、 、 など、これらの の特性は全部使えます.これらの特性を一つずつこの問題に取り入れて、総合的な運用ES6の感覚を体験してみましょう.まず、ES6を追加して、 は、1つのオブジェクトから容易に値を取ることができ、ここでは、配列内の各オブジェクトの 、keyを取得するときに使用することができる.

const processFn = data => {
    const processData = {};
    for (let i = 0; i < data.length; i++) {
        const { key, value } = data[i];
        processData[key] = value;
    }
    return processData;
}

ここでは、さらに、valueをforにループ変更しても良い.for...ofは、ローズマリーインターフェースを実現しているので、1つのローズマリーを巡回しても良い.
ここはまた開拓することができます.標準三連とは何ですか?javascriptはどのようなローズマリーがありますか?どのようにして一つのローズマリーを実現しますか?これはみんなが降りてから自分で答えます.
それともコードの改造を先に続けますか?解凍の過程をfor...ofに置くとコードがもっと簡潔になります.

const processFn = data => {
    const processData = {};
    for (let { key, value } of data) {
        processData[key] = value;
    }
    return processData;
}

そして、for...ofを追加しても良いです.オブジェクトにとってiteratorは、オブジェクトを一つに統合することができ、Arrayの時代には、 を使用しても良いです.この二つの方法は全部可能です.しかし、どの方法を使っても、属性は動的変数であり、 の時代には、属性を変数として対象として与えたいという問題があります.以下の方法しか使えません.

const keyName = 'name';
const obj = {}
obj[keyName] = 'xxxx';

しかし、ES5は文字どおりの量でこの仕事を完成させることができます.属性表現式にObject.assignを加えるだけでいいです.コードを最適化するためにES5とES6を組み合わせて使用します.

const processFn = data => {
    const processData = {};
    for (let { key, value } of data) {
        Object.assign(processData, {[key] : value})
    }
    return processData;
}

または

const processFn = data => {
    let processData = {};
    for (let { key, value } of data) {
        processData = {...processData, [key]: value}
    }
    return processData;
}

このように、これらの[]の特性を総合的に運用することに成功しました.今の段階では、 、 、ES6、ES6、const、let、 、 、for...of、 、 、 をまとめてみます.const個です.しかし、これはまだ終わっていません.問題の中でもう一つの要求があります.変数をできるだけ少なく宣言して、副作用を減らします.関数宣言に必要な声明0を除いて、他に2つの明示的な声明がありますが、少なくともこのような明示的な声明をいくつかに減らすことができますか?for 自体が命令式のプログラミング方式であり、ステートメント方式を使用すれば、明示的な声明をパラメータの暗黙的な声明に変えることができ、コードの可読性と簡潔性をさらに高めることができ、この点は多くの候補者を締めつけている.解決の考え方は、実際には、どのように1つの配列をいわゆる折りたたみ(for )するか、つまり配列の複数の項目を一つの項目に統合するか、ここではconstの行列関数、letに関連しています.

[1,2,3].reduce((total, item) => total + item, 0)

実は類比の思想で、対応する数字を配列の中の対象に変えて、アキュムレータを抽出for に換えて、foldを統合して、あの配列の合併は一種の変相のアキュムレータです.ES5があれば、reduceの結合性をより大きく発揮することができる.

const processFn = data => data.reduce((obj, {key, value}) => {
    return {...obj, [key]: value};
}, {})

最後のreduceは削除してもいいです.コードは一行の空間で実現できます.矢印関数がオブジェクトに戻る時に括弧を入れてもいいです.

const data => data.reduce((obj, {key, value}) => ({...obj, [key]: value}), {})

これで、私達はこの問題に対する改造は終わりました.総合的にkeyの特性を使いました.また、明示的な声明を減らしました.このようなコードを書けば、この問題の解答は卒業できます.
たまごタイム
これで終わりですか?まだ分かりません.valueは強大ですが、それを把握するためには各種の特性を勉強しなければなりません.そして、いくつかのreduceの特性を合わせてこそ最高の効果を発揮できます.宣言的な世界に入り、ES6の門を開けましょう.
関数式プログラミング(return)といえば、実は一つの法則です.入門すれば、次のいくつかの公理といくつかの概念だけを覚えてください.類比小説「三体」のES6はこのように解釈しています.

関数は一等公民(ES6)で、ES5の世界は関数

だけです.

関数自体には組み合わせ可能な特性があるが、関数自体は純粋( )の

である.
関数式プログラミングを引き続き理解したいです.二つの重要な概念があります.コリック化(Functional Program)と function first関数式プログラミングにはとても重要なツールライブラリがあります.そうです.FP`ではなく、Ramda composition Ramda`です.

//    http://ramda.cn/docs/           

const data = [{
    key: 'name',
    value: '   er'
}, {
    key: 'age',
    value: 1,
}, {
    key: 'from',
    value: '    '
}]
const processFn = R.reduce(
    R.useWith(R.merge, [
        R.identity,
        R.converge(R.objOf, [
            R.prop('key'),
            R.prop('value')
        ])
    ]), {})
    
console.log(processFn(data))

コードを見た瞬間、私は大意になりました.分かりませんでした.壁の羅集の呪文のように分かりにくいです.しかし、ある程度は表面だけを見ても、調和的で簡潔な美しさが溢れています.高度な秩序配置と統一性を持っています.主にこれらの概念があります.具体的な応用シーンに興味があれば、詳しく説明します.