JavaScript 코드 단순화 기술 인스턴스 해석

함수식 프로그래밍은 당신의 코드를 더욱 간단하게 할 수 있습니다.간단함은 코드가 읽기 쉽고 이해하기 쉬우며 테스트와 유지보수가 가능하다는 것을 의미한다.
본고에서, 나는 몇 가지 함수식 프로그래밍 (FP) 기교를 설명했는데, 당신은 그것들을 사용하여 코드를 간소화하여 코드를 더욱 좋게 할 수 있습니다.
임시 변수와 불변성 원칙에서 벗어나다
함수식 프로그래밍은 불변성에 치우친다. 이런 불변성 원칙은 변수를 초기화한 후에 그들의 값을 바꾸지 않는다는 것을 의미한다.마찬가지로 대상이나 문자열을 만든 후에도 돌변할 필요가 없습니다.
JavaScript 프로그래밍을 사용하는 경우 모든 변수 정의는 const를 사용해야 합니다.코드를 읽고 있는 누구에게나 상량 정의는 안심할 수 있습니다. 변수를 영원히 재분배하지 않을 것입니다. 재분배는 불가능하기 때문에 독자의 뇌는 코드를 추적하고 식별하는 과정에서 재분배하는 부담에서 벗어날 수 있습니다.
값을 언제 변경해야 합니까?우선, 당신은 하나의 그룹을 가질 수 있습니다.const fruits = ['apple', 'orange', 'banana']새 과일을 이 목록에 추가하려면 어떻게 해야 합니까?해결 방안은 새로운 값이나 업데이트된 값으로 새로운 상수 변수를 초기화하는 것입니다. 우리는 점 확장자를 사용하여 기존fruits 값을 복사할 수 있습니다.const allFruits = [...fruits, 'pineapple']코드의 어느 곳에서든 불변성 원칙을 따라야 합니다. 만약 이렇게 한다면, 코드는 더욱 깨끗해질 것입니다.
fruits 변수의 값이 영원히 변하지 않는다는 것을 알고 있으며, 변수의 성명을 처음 봤을 때 이 사실을 알고 있습니다. 초기화된 후에 보이는 fruits 변수에 대해 알고 있습니다.
순환에서 벗어나다
다음 순환을 고려하십시오.

var list = [];
var i = 0;
while (i < rows.length) {
  var row = rows[i];
  var message = {
    childAddress: row[1],
    action: 'switchToBackupNode2',
    role: 'edge'
  };
  list.push(message);
  i += 1;
}

함수 프로그래밍 방법은while 순환을 제거하고 맵을 사용하여 줄을 목록으로 처리합니다.

const list = rows.map(r => ({ 
  childAddress: r[1],
  action: 'switchToBackupNode2',
  role: 'edge'
 }))

순환에서 벗어나는 것 외에 이 코드는 임시 변수row와message, 순환 변수 i를 삭제했습니다.
결과는 더욱 가독성이 있고 명확하다.
공평하게 보기 위해서, 이 신뢰 등급을 얻으려면, 맵 함수를 먼저 알아야 합니다.맵 함수는 함수식 프로그래밍에서 없는 곳이 없기 때문에 FP로 이행하는 중요한 절차입니다.
맵은 프로그래머가 목록 처리에 사용하는 함수 중 하나입니다.목록의 데이터를 처리하는 것은 FP의 중요한 구성 부분입니다. 다른 목록 처리 기능도 배워야 합니다. 가장 중요한 것은reduce와filter 함수입니다.
if 삭제...else
나의 간소화 코드 실천에서if를 삭제하는 것은 유용한 전략이다.코드에서if문장을 삭제하는 데 사용할 수 있는 몇 가지 정책이 있으며, 그 중 어느 것이든 통상적으로 더욱 명확하고 이해하기 쉬운 구조를 얻을 수 있다.
if 문장을 삭제하는 정책을 보여 줍니다.
삼원 연산자
삼원 연산자는 내가 변수 값에서if문장을 제거하는 주요 도구이다.
다음을 고려하십시오.

let message;
if (person !== null) {
 message = `hello, ${person}!`
} else {
 message = 'hey there!'
}

위의 코드에는 두 가지 문제가 있습니다.
비const 변수 메시지를 사용해야 합니다. if 구조에 대해 변수 설명에서 메시지 값을 즉시 부여할 수 없기 때문입니다.
성명 변수와 조건적으로 변수에 값을 부여하는 간단한 작업만 수행한 것을 감안하면 코드는 상당히 지루하고 복잡하다.
삼원 연산자를 사용합니까?한 줄에서 동일한 작업을 수행할 수 있습니다.const message = person !== null ? `hello, ${person}!` : 'hey there!'부울 연산자 & & & & |
볼 연산자 & & & & | |는 if 문장에 효과적인 대체 방법을 제공합니다.
이렇게 하지 마세요.
if (value) {
doStuff(value)
} else {
doStuff(1)
}
향상된 기능:doStuff(value || 1)이 논리나 조작부호 | | | 는 함수에 기본값을 전달하는 빠른 방법을 제공합니다.변수가 값을 가지고 있는지 모르거나 확실하지 않을 때마다 같은 기술을 사용할 수 있습니다. | | | 를 접두사로 사용하여 기본값을 제공합니다.
이것은 논리와 연산자 & & 를 어떻게 사용하는지의 예이다.먼저 if 버전을 사용합니다.
if (data) {
sendData(data.value);
}
그리고 우리는 & & 삭제 if를 사용합니다.data && sendData(data.value)여기서 우리는 & & & 를 사용하여 데이터 변수가 값을 포함하는지 먼저 검사합니다.이 검사가 없으면, 값이 없을 때 코드가 붕괴됩니다. (다시 말하면, 값은null이나undefined).
여기서 이 연산자를 사용할 때, 우리는 볼 표현식의 단락에 의존하여 값을 구한다. &및 ||연산자, 첫 번째 부분이 잘못되었을 때 JavaScript는 표현식의 뒷부분을 계산하지 않습니다.
지도 및 찾기
맵을 찾기list로 사용하는 것은 일련의if문장을 바꾸는 효과적인 방법입니다.다음을 고려하십시오.

let language;
if (country === 'FI') {
	language = 'Finnish'
} else if (country === 'SE') {
	language = 'Swedish'
} else if (country === 'USA') {
 language = 'English (American)'
} else if (country === 'UK') {
 language = 'English (UK)'
} // etc...

더 간결한 방법은 국가/언어 옳은 맵을 사용하는 것이다.

const languages = new Map([
 ['FI', 'Finnish'],
 ['SE', 'Swedish'],
 ['USA', 'English (American)'],
 ['UK', 'English (UK)'],
])
const language = languages.get('SE')
console.log(language) // Swedish

두 번째 실현은 훨씬 간단하다.이 코드는 즉시 그것의 의도를 보여 준다.또한,language 변수를const로 변환합니다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.