JavaScript에서 함수형 프로그래밍의 기본 개념 중 일부 / 많은 / 대부분을 배웠다고 생각합니다. 그러나 나는 기능 코드, 내가 작성한 코드조차도 읽는 데 어려움을 겪고 있으며 누군가 나를 도울 수있는 포인터, 팁, 모범 사례, 용어 등을 줄 수 있는지 궁금합니다.

아래 코드를 사용하십시오. 이 코드를 작성했습니다. 그것은 말 사이에, 두 개체 사이 %의 유사성을 할당하는 것을 목표로 {a:1, b:2, c:3, d:3}하고 {a:1, b:1, e:2, f:2, g:3, h:5}. Stack Overflow 에서이 질문에 대한 응답으로 코드를 생성했습니다 . 포스터가 어떤 종류의 유사성을 요구하는지 정확히 알지 못했기 때문에 네 가지 종류를 제공했습니다.

• 두 번째에서 찾을 수있는 첫 번째 개체의 키 백분율
• 두 번째에서 찾을 수있는 첫 번째 개체의 값 백분율 (중복 포함)
• 중복이 허용되지 않고 두 번째에서 발견 될 수있는 첫 번째 객체의 값 백분율
• 두 번째 오브젝트에서 찾을 수있는 첫 번째 오브젝트에서 {key : value} 쌍의 백분율

필연적으로 명령형 코드로 시작했지만 기능 프로그래밍에 적합한 문제라는 것을 빨리 깨달았습니다. 특히, 내가 비교하려고하는 기능 유형 (예 : 키 또는 값 등)을 정의한 위의 4 가지 전략 각각에 대해 함수 또는 3 개를 추출 할 수 있다면 코드의 나머지 부분을 반복 가능한 단위로 줄일 수 있습니다. 당신은 그것을 건조하게 유지합니다. 그래서 함수형 프로그래밍으로 전환했습니다. 나는 결과가 매우 자랑스럽고, 그것이 합리적으로 우아하다고 생각하며, 내가 한 일을 잘 이해하고 있다고 생각합니다.

그러나 코드를 직접 작성하고 구성하는 동안 코드의 모든 부분을 이해 했음에도 불구하고 지금 다시 살펴보면 특정 하프 라인을 읽는 방법과 읽는 방법에 대해 조금 당황합니다. 코드의 특정 반줄이 실제로 무엇을하고 있는지 “grok”. 스파게티의 엉망으로 빠르게 분해되는 다른 부분을 연결하기 위해 정신 화살표를 만드는 것을 발견했습니다.

그래서 누구든지 간결하고 내가 읽고있는 것에 대한 나의 이해에 기여하는 방식으로 좀 더 복잡한 코드를 어떻게 읽는지 말해 줄 수 있습니까? 가장 많이 얻는 부분은 행에 여러 개의 뚱뚱한 화살표가 있고 / 또는 행에 여러 개의 괄호가있는 부분 인 것 같습니다. 다시 말하지만, 핵심은 결국 논리를 알아낼 수는 있지만 기능적인 JavaScript 프로그래밍 라인을 빠르고 명확하고 직접 직접 수행하는 더 좋은 방법이 있다는 것입니다.

아래의 코드 줄이나 다른 예제를 자유롭게 사용하십시오. 그러나 나에게서 초기 제안을 원한다면 여기에 몇 가지가 있습니다. 합리적으로 간단한 것으로 시작하십시오. 코드의 끝 부분부터는 다음과 같이 매개 변수로 함수에 전달됩니다 obj => key => obj[key]. 어떻게 읽고 이해합니까? 더 긴 예는 시작 근처에서 하나의 전체 기능입니다 const getXs = (obj, getX) => Object.keys(obj).map(key => getX(obj)(key));. 마지막 map부분은 특히 나를 가져옵니다.

음,이 시점에서 내가있어 제발 하지 등 하스켈에 대한 참조 또는 상징적 추상적 표기 또는 태닝의 기본을 찾고 어떻게 하고 찾는 것은 내가 조용히 입 코드의 라인을보고 할 수있는 동안 것을 영어 문장이다. 당신이 구체적으로 정확하게 언급하는 참고 문헌이 있다면 훌륭하지만, 나는 기본적인 교과서를 읽어야한다고 말하는 답을 찾고 있지 않습니다. 나는 그것을했고 논리를 얻습니다 (적어도 상당량). 또한 철저한 답변이 필요하지는 않습니다 (그러한 시도는 환영 할지라도) : 하나의 특정 행을 읽는 우아한 방법을 제공하는 짧은 답변조차도 귀찮은 코드를 인정합니다.

나는이 질문의 일부가 다음과 같다고 가정합니다 : 심지어 기능 코드를 왼쪽에서 오른쪽으로, 위에서 아래로 선형으로 읽을 수 있습니까 ? 또는 사람은 거의 스파게티와 같은 코드 페이지에 배선 확실히이다의 정신 사진을 만들 강제 하지 선형? 그리고 그렇게 해야 한다면 여전히 코드를 읽어야하는데 어떻게 선형 텍스트를 취하고 스파게티를 연결합니까?

모든 팁을 주시면 감사하겠습니다.

const obj1 = { a:1, b:2, c:3, d:3 };
const obj2 = { a:1, b:1, e:2, f:2, g:3, h:5 };

// x or X is key or value or key/value pair

const getXs = (obj, getX) =>
  Object.keys(obj).map(key => getX(obj)(key));

const getPctSameXs = (getX, filter = vals => vals) =>
  (objA, objB) =>
    filter(getXs(objB, getX))
      .reduce(
        (numSame, x) =>
          getXs(objA, getX).indexOf(x) > -1 ? numSame + 1 : numSame,
        0
      ) / Object.keys(objA).length * 100;

const pctSameKeys       = getPctSameXs(obj => key => key);
const pctSameValsDups   = getPctSameXs(obj => key => obj[key]);
const pctSameValsNoDups = getPctSameXs(obj => key => obj[key], vals => [...new Set(vals)]);
const pctSameProps      = getPctSameXs(obj => key => JSON.stringify( {[key]: obj[key]} ));

console.log('obj1:', JSON.stringify(obj1));
console.log('obj2:', JSON.stringify(obj2));
console.log('% same keys:                   ', pctSameKeys      (obj1, obj2));
console.log('% same values, incl duplicates:', pctSameValsDups  (obj1, obj2));
console.log('% same values, no duplicates:  ', pctSameValsNoDups(obj1, obj2));
console.log('% same properties (k/v pairs): ', pctSameProps     (obj1, obj2));

// output:
// obj1: {"a":1,"b":2,"c":3,"d":3}
// obj2: {"a":1,"b":1,"e":2,"f":2,"g":3,"h":5}
// % same keys:                    50
// % same values, incl duplicates: 125
// % same values, no duplicates:   75
// % same properties (k/v pairs):  25

답변

function mapObj(obj, f) {
  return Object.keys(obj).map(key => f(obj, key));
}

function getPctSameXs(obj1, obj2, f) {
  const mapped1 = mapObj(obj1, f);
  const mapped2 = mapObj(obj2, f);
  const same = mapped1.filter(x => mapped2.indexOf(x) != -1);
  const percent = same.length / mapped1.length * 100;
  return percent;
}

const getValues = (obj, key) => obj[key];
const valuesWithDupsPercent = getPctSameXs(obj1, obj2, getValues);

// getXs :: forall O, F . O -> (O -> String -> F) -> [F]
const getXs = (obj, getX) =>
    Object.keys(obj).map(key => getX(obj)(key));