어떻게 하면 당신 의 자 바스 크 립 트 함 수 를 더욱 우아 하고 상세 하 게 설명 할 수 있 습 니까?

js 기교 시 리 즈 를 쓰 려 고 하 는데 주로 js 의 각종 실 용적 인 팁,묘 수 를 정리 하 는 것 이다.본 고 는 주로 우리 의 함 수 를 어떻게 더욱 명확 하 게 하 는 지 연구 하 는 것 이다.
대상 매개 변수 사용 재 구성
함수 가 많은 인 자 를 받 기 를 원한 다 면 대상 을 사용 해 야 합 니 다.이 를 바탕 으로 재 구성 문법 으로 필요 한 인 자 를 추출 할 수 있다.
일반 표기 법

const greet = (obj) => {
  return `${obj.greeting}, ${obj.firstName}${obj.lastName}`;
}

고 쳐 쓰다

const greet = ({
  greeting,
  firstName,
  lastName
}) => {
  return `${greeting}, ${firstName}${lastName}`;
}

재 구성 방식 을 사용 하면 더욱 우아 해 지고 중복 되 는 것 도 적 게 쓸 수 있 으 며 이름 도 더욱 뚜렷 해 집 니 다.
이름 반전 함수
좋 은 이름 은 읽 기 코드 를 쉽게 만 들 고 리 셋 함수 의 이름 도 마찬가지 입 니 다.
일반 표기 법

const arr = [1, 2, 3].map(a => a * 2);

고 쳐 쓰다

const double = a => a * 2;
const arr = [1, 2, 3].map(double);

이름 을 나 누 면 코드 의 의 미 를 한눈 에 볼 수 있 습 니 다.예 를 들 어 이름 에 따라 리 셋 함수 의 역할 이 원시 배열 의 모든 요 소 를 배가 시 키 는 것 임 을 알 수 있 습 니 다.
조건문 에 서술 성 을 가지 게 하 다.
복잡 한 조건 판단 에 대해 우 리 는 함 수 를 단독으로 사용 하여 표시 할 수 있 으 며,조건 문 구 를 더욱 서술 적 으로 할 수 있다.
일반 표기 법

if (score === 100 || remainingPlayers === 1 || remainingPlayers === 0) {
    quitGame();
  }

고 쳐 쓰다

const winnerExists = () => {
  return score === 100 ||
    remainingPlayers === 1 ||
    remainingPlayers === 0
}
if (winnerExists()) {
  quitGame();
}

원래 의 서법 에 따 르 면,우 리 는 괄호 안에 아주 긴 표현 식 이 있 지만,그것 이 판단 하 는 것 이 무엇 인지 그다지 보기 좋 지 않다.고 친 후에 우 리 는 그것 을 명명 함수 에 넣 고 이름 에 따라 우 리 는 표현 하 는 뜻 을 대충 알 수 있다.
switch 문 구 를 맵 이나 Object 로 교체 합 니 다.
switch 문구 가 길 었 을 때 코드 를 간소화 해 야 한 다 는 것 을 설명 합 니 다.
일반 표기 법

const getValue = (prop) => {
  switch (prop) {
    case 'a': {
      return 1;
    }
    case 'b': {
      return 2;
    }
    case 'c': {
      return 3;
    }
  }
}
const val = getValue('a');

Object 고 쳐 쓰기

const obj = {
  a: 1,
  b: 2,
  c: 3
}
const val = obj['a'];

우 리 는 switch 에 여러 개의 return 문 구 를 가 진 블록 을 삽입 합 니 다.단지 주어진 prop 값 의 반환 값 을 얻 기 위해 서 입 니 다.우 리 는 한 대상 만 사용 해도 같은 효 과 를 실현 할 수 있 습 니 다.
지도 개작

const map = new Map([['a', 1], ['b', 2], ['c', 3]])
const val = map.get('a')

맵 을 사용 할 때 코드 도 많이 짧 습 니 다.우 리 는 배열,배열 의 모든 항목 에 키 와 값 을 포함 하 는 배열 을 전달 합 니 다.그 다음 에 우 리 는 Map 인 스 턴 스 의 get 방법 으로 키 에서 값 을 얻 습 니 다.맵 이 대상 보다 좋 은 장점 중 하 나 는 숫자,불 값,대상 등 다른 값 을 키 로 사용 할 수 있다 는 것 이다.대상 은 문자열 이나 symbol 을 키 로 만 사용 할 수 있 습 니 다.
Object.assign 을 사용 하여 기본 속성 을 설정 합 니 다.
일반 표기 법

const menuConfig = {
  title: null,
  body: 'Bar'
};
function createMenu(config) {
  config.title = config.title || 'Foo';
  config.body = config.body || 'Bar';
}
createMenu(menuConfig);

고 쳐 쓰다

const menuConfig = {
  title: 'Order',
  body: 'Send'
};
function createMenu(config) {
  config = Object.assign({
    title: 'Foo',
    body: 'Bar'
  }, config);
  // config : {title: "Order", body: "Bar"}
  // ...
}
createMenu(menuConfig);

중복 코드 를 삭제 하고 유사 함 수 를 통합 합 니 다.버 림 코드 삭제
좋 지 않 은 서법

var paging = function( currPage ){
    if ( currPage <= 0 ){
        currPage = 0;
        jump( currPage );    //   
    }else if ( currPage >= totalPage ){
        currPage = totalPage;
        jump( currPage );    //   
    }else{
        jump( currPage );    //   
    }
};

고 쳐 쓰다

var paging = function( currPage ){
    if ( currPage <= 0 ){
        currPage = 0;
    }else if ( currPage >= totalPage ){
        currPage = totalPage;
    }
    jump( currPage );    //  jump      
};

추출 함수
만약 한 함수 가 너무 길다 면,몇 개의 주석 을 더 해야만 이 함 수 를 좀 쉽게 읽 을 수 있 으 며,이 함수 들 은 재 구성 할 필요 가 있다.
만약 함수 에 코드 가 독립 될 수 있다 면,우 리 는 이 코드 들 을 다른 독립 된 함수 에 넣 는 것 이 좋 겠 다.
예시
예 를 들 어 사용자 정 보 를 얻 는 함수 에서 저 희 는 사용자 정보 와 관련 된 log 를 인쇄 해 야 합 니 다.

var getUserInfo = function(){
    ajax( 'http:// xxx.com/userInfo', function( data ){
        console.log( 'userId: ' + data.userId );
        console.log( 'userName: ' + data.userName );
        console.log( 'nickName: ' + data.nickName );
    });
};

고 쳐 쓰다
우 리 는 인쇄 log 의 문 구 를 독립 된 함수 에 밀봉 할 수 있다.

var getUserInfo = function(){
    ajax( 'http:// xxx.com/userInfo', function( data ){
        printDetails( data );
    });
};

var printDetails = function( data ){
    console.log( 'userId: ' + data.userId );
    console.log( 'userName: ' + data.userName );
    console.log( 'nickName: ' + data.nickName );
};

참조:JavaScript Refactoring Tips ― Making Functions Clearer and Cleaner
총결산
자 바스 크 립 트 함 수 를 더욱 우아 하 게 만 드 는 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.자 바스 크 립 트 함수 의 우아 한 내용 에 대해 서 는 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!