JavaScript 배열 전개 및 underscore 의 중요 한 내부 방법 flatten 상세 설명

Why underscore
(이 낯 익 은 동 화 는 본문 으로 바로 넘 어 갈 수 있 을 것 같 아서...)
최근 에 underscore. js 소스 코드 를 보기 시 작 했 고 underscore. js 소스 코드 를 2016 년 계획 에 해석 했다.
유명한 프레임 워 크 라 이브 러 리 의 소스 코드 를 읽 으 면 마치 한 명의 대사 와 대화 하 는 것 처럼 많은 것 을 배 울 수 있 습 니 다.왜 언 더 스코어 야?가장 중요 한 이 유 는 underscore 가 짧 고 간결 하 며 (약 1.5k 줄) 100 여 개의 유용 한 방법 을 밀봉 하여 결합 도가 낮 고 한 가지 방법 으로 읽 기 에 매우 적합 하 며 건물 주 와 같은 JavaScript 초보 자 에 게 적합 하기 때 문 입 니 다.이 를 통 해 undefined 대신 void 0 으로 undefined 재 작성 을 피 하 는 등 작은 기술 을 배 울 수 있 을 뿐만 아니 라 변수 유형 판단, 함수 절 류 & 함수 떨 기 등 자주 사용 하 는 방법 도 배 울 수 있 을 뿐만 아니 라 브 라 우 저 호 환 hack 도 많이 배 울 수 있 으 며 작가 의 전체적인 디자인 사고 와 API 디자인 의 원리 (뒤로 호 환) 도 배 울 수 있 습 니 다.
그 후에 건물 주 는 일련의 글 을 써 서 소스 코드 읽 기 에서 배 운 지식 을 공유 할 것 이다.

underscore - 1.8.3 소스 코드 판독 항목 주소https://github.com/hanzichi/underscore-analysis

underscore - 1.8.3 소스 코드 전문 주석https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/underscore-1.8.3-analysis.js

underscore - 1.8.3 소스 코드 판독 시리즈 글https://github.com/hanzichi/underscore-analysis/issues

구경 을 환영 합 니 다 ~ (관심 이 있다 면 스타 & 워 치 를 환영 합 니 다 ~) 당신 의 관심 은 건물 주가 계속 글 을 쓰 는 동력 입 니 다.
flatten
단오 에 3 일 쉬 고 이틀 잤 으 니 좀 생산 해 야 겠 다.
오늘 은 배열 전개 와 배열 전개 와 밀접 한 관 계 를 가 진 중요 한 내부 방법 인 flatten 을 말한다.
배열 전개 란 무엇 입 니까?쉽게 말 하면 포 함 된 배열 을 평평 하 게 펴 는 것 이 니 간단 한 예 를 몇 개 들 어 보 자.

[[[1, 2], [1, 2, 3]], [1, 2]] => [1, 2, 1, 2, 3, 1, 2]
[[[1, 2], [1, 2, 3]], [1, 2]] => [[1, 2], [1, 2, 3], 1, 2]

상기 두 가 지 는 모두 배열 로 전개 되 었 습 니 다. 첫 번 째 는 깊이 있 게 전개 되 었 다 고 생각 합 니 다. 즉, 모든 포 함 된 배열 을 깨 고 요 소 를 추출 하여 하나의 배열 에 넣 는 것 입 니 다.두 번 째 는 한 층 만 펼 쳤 다. 즉, 배열 에 포 함 된 한 층 의 배열 만 펼 쳤 을 뿐 재 귀적 으로 펼 쳐 지지 않 았 다.
우선 flatten 방법의 호출 형식 을 살 펴 보 겠 습 니 다.

var flatten = function(input, shallow, strict, startIndex) {
  // ...
};

첫 번 째 매개 변수 input 는 펼 쳐 야 할 배열 이기 때문에 flatten 방법 에서 들 어 오 는 첫 번 째 매개 변 수 는 배열 (또는 arguments) 입 니 다.두 번 째 매개 변 수 는 shallow 는 불 값 입 니 다. false 라면 배열 이 깊이 있 게 전개 되 고 true 이면 한 층 만 펼 치 는 것 을 의미 합 니 다.네 번 째 매개 변 수 는 input 전개 의 시작 위 치 를 표시 합 니 다. 즉, input 배열 의 몇 번 째 요소 부터 시작 합 니 다.

var ans = flatten([[1, 2], [3, 4]], false, false, 1);
console.log(ans); // => [3, 4]

1 항 부터 배열 을 시작 합 니 다. 즉, 배열 의 0 항 ([1, 2]) 을 무시 합 니 다.
상기 세 개의 매개 변 수 는 비교적 이해 하기 쉬 우 며 상대 적 으로 힘 든 것 은 세 번 째 매개 변수 strict 이다.strict 도 불 값 입 니 다. shallow 가 true 이 고 strict 도 true 일 때 input 매개 변수 요소 중의 비 배열 요 소 를 걸 러 낼 수 있 습 니 다.이해 가 안 돼!우 리 는 간단 한 예 를 들 었 다.

var ans = flatten([5, 6, [1, 2], [3, 4]], true, true);
console.log(ans); // => [1, 2, 3, 4]

5 와 6 은 input 매개 변수 중의 비 배열 요소 로 직접 걸 러 냈 다.strict 가 true 이 고 shallow 가 false 라면 flatten 방법 을 사용 한 결 과 는 [] 일 수 밖 에 없습니다.그래서 우 리 는 소스 코드 에서 strict 가 true 라면 shallow 도 true 일 것 이다.
소스 코드 를 직접 보고 주석 을 많이 달 았 습 니 다.

var flatten = function(input, shallow, strict, startIndex) {
  // output       
  //   flatten       
  // idx   output        
  var output = [], idx = 0;

  //    startIndex              
  for (var i = startIndex || 0, length = getLength(input); i < length; i++) {
    var value = input[i];
    //       arguments
    if (isArrayLike(value) && (_.isArray(value) || _.isArguments(value))) {
      // flatten current level of array or arguments object
      // (!shallow === true) => (shallow === false)
      //         
      //       
      if (!shallow) 
        // flatten       
        //        value     
        value = flatten(value, shallow, strict);

      //          （        ）
      //    (shallow === true) =>      
      // value         
      var j = 0, len = value.length;

      //          
      //    JavaScript         
      //      ，     ，      push            
      output.length += len;

      //   value          output    
      while (j < len) {
        output[idx++] = value[j++];
      }
    } else if (!strict) { 
      // (!strict === true) => (strict === false)
      //        ，  shallow     false
      //       value     ，      
      //         else-if    
      //       strict   true，           
      //    shallow === false     strict === true   
      //    flatten               []
      output[idx++] = value;
    }
  }

  return output;
};

전반적 으로 플 래 티 넘 을 전개 할 수 없 을 때 까지 계속 재 귀적 으로 호출 하 는 것 이다.flatten 방법의 실현 소스 위치 제시https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/src/underscore-1.8.3.js#L489-L507。
이어서 소스 코드 에서 이 내부 방법 에 유용 한 API 를 살 펴 보 자.
우선.flatten 방법 은 매우 간단 합 니 다. flatten 의 앞의 세 가지 인 자 를 사 용 했 습 니 다.

_.flatten = function(array, shallow) {
  // array =>        
  // shallow =>        
  // false   flatten    strict   
  return flatten(array, shallow, false);
};

앞에서 말 했 듯 이 strict 는 true 이 고 shallow 는 true 와 함께 사용 하기 때문에 특별한 상황 이 없 으 면 strict 는 기본적으로 false 입 니 다.
_.유 니 온 방법 역시 flatten 을 사 용 했 습 니 다. 이 방법 은 여러 배열 에 들 어간 다음 에 배열 요 소 를 무 겁 게 하 는 역할 을 합 니 다.

var ans = _.union([[1]], [1, 2], 3, 4);
console.log(ans); // => [[1], 1, 2]

우선 배열 의 깊이 를 펼 칠 필요 가 없습니다. 그 다음.유 니 온 이 들 어 오 는 것 은 배열 입 니 다. 비 배열 요 소 는 무시 할 수 있 습 니 다.이 두 가 지 는 shallow 매개 변수 와 strict 매개 변 수 를 모두 true 로 직접 대응 합 니 다.한 배열 의 무 게 를 줄 이 고 마지막 으로 를 호출 합 니 다.유 니 크 하면 됩 니 다.

_.union = function() {
  //     flatten                
  //            _.uniq    
  //    _.union([1, 2, 3], [101, 2, 1, 10], [2, 1]);
  // arguments   [[1, 2, 3], [101, 2, 1, 10], [2, 1]]
  // shallow     true，    
  //     [1, 2, 3, 101, 2, 1, 10, 2, 1]
  //       
  return _.uniq(flatten(arguments, true, true));
};

그리고.difference，_.pick，_.omit 방법, 여러분 스스로 소스 코드 에 들 어가 볼 수 있 습 니 다. 모두 대동소이 합 니 다. 특별히 주의해 야 할 점 이 없습니다.(startIndex 인 자 를 주의 하면 됩 니 다)
내부 방법 flatten 에 대해 제 가 정리 하고 자 하 는 것 은 특정한 내부 방법 이 여러 개의 API 에 의 해 호출 될 수 있 습 니 다. 어떻게 합 리 적 이 고 우아 하 며 여러 가지 상황 을 동시에 고려 하 는 지, 정말 강력 한 실천 과 코드 능력 이 필요 합 니 다. 이 점 은 앞으로 더 모색 해 야 합 니 다.