JS 배열 내 림 차원 의 실현 Array.prototype.concat.apply([],arr)

다 차원 배열(특히 2 차원 배열)을 1 차원 배열 로 바 꾸 는 것 은 업무 개발 에서 자주 사용 되 는 논리 이다.최근 에 황 일 선생님 을 따라 Vue 2.6.1.1 버 전 소스 코드 를 배 울 때 소스 코드 가 2 차원 배열 에 대한 차원 을 낮 추 는 코드 를 보 았 기 때문에 여기에 한 편 을 쓰 고 기록 하 며 이미 지 를 강화 했다.
2 차원 배열 이 1 차원 배열 로 떨어지다.
순환 강하 차원

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
 let reduce = [];
 for (let i = 0; i < children.length; i++) {
  if (Array.isArray(children[i])) {
   for (let j = 0; j < children[i].length; j++) {
    reduce.push(children[i][j]);
   }
  } else {
   reduce.push(children[i]);
  }
 }
 return reduce;
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

이 방법 은 사고방식 이 간단 하고 이중 순환 을 이용 하여 2 차원 배열 의 모든 요 소 를 옮 겨 다 니 며 새로운 배열 에 넣는다.
concat 강 차원
MDN 에서 concat 에 대한 소개
“concat creates a new array consisting of the elements in the object on which it is called, followed in order by, for each argument, the elements of that argument (if the argument is an array) or the argument itself (if the argument is not an array).”
concat
concat 방법의 매개 변수 가 하나의 요소 라면 이 요 소 는 새 배열 에 직접 삽 입 됩 니 다.매개 변수 가 하나의 배열 이 라면 이 배열 의 각 요 소 는 새 배열 에 삽 입 됩 니 다.이 기능 을 코드 에 적용 하기:

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
 let reduce = [];
 for (let i = 0; i < children.length; i++) {
  reduce = reduce.concat(children[i]);
 }
 return reduce;
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

children 의 요소 가 하나의 배열 이 라면 concat 방법의 매개 변수 로 서 배열 의 모든 하위 요 소 는 새로운 배열 에 독립 적 으로 삽 입 됩 니 다.concat 방법 을 이용 하여 우 리 는 이중 순환 을 단일 순환 으로 간소화 할 것 이다.
apply 와 concat 강 차원
MDN 에서 apply 방법 에 대한 소개
“The apply() method calls a function with a given this value and arguments provided as an array.”
apply
apply 방법 은 하나의 함 수 를 호출 합 니 다.apply 방법의 첫 번 째 매개 변 수 는 호출 된 함수 의 this 값 이 될 것 입 니 다.apply 방법의 두 번 째 매개 변수(하나의 배열 또는 클래스 배열 의 대상)는 호출 된 대상 의 arguments 값 이 될 것 입 니 다.즉,이 배열 의 각 요 소 는 호출 된 함수 의 각 매개 변수 가 될 것 입 니 다.이 기능 을 코드 에 적용 하기:

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
 return Array.prototype.concat.apply([], children);
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

children 은 apply 방법의 두 번 째 매개 변수 로 서 그 자체 가 하나의 배열 이 고 배열 의 모든 요소(또는 배열,즉 2 차원 배열 의 2 차원)는 매개 변수 로 concat 에 차례대로 전달 되 며 효 과 는[].concat(1,2,3,[4,5,6],7,8,[9,10]와 같다.apply 방법 을 이용 하여 우 리 는 단일 순환 을 한 줄 의 코드 로 최적화 할 것 이다.
Vue 2.6.11 버 전 소스 코드 다운

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
// :any         Vue  Flow                
function simpleNormalizeChildren(children: any) {
 for (let i = 0; i < children.length; i++) {
  if (Array.isArray(children[i])) {
   return Array.prototype.concat.apply([], children);
  }
 }
 return children;
}

simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

다 차원 배열 을 1 차원 배열 로 낮추다.
순환 하강 차원
재 귀 함 수 는 함수 내 에서 자신 을 호출 하 는 것 이다.
재 귀 함수 의 사용 은 함수 종료 조건 에 주의 하여 순환 을 피해 야 합 니 다.

//     
let children = [1, [2,3], [4, [5, 6, [7, 8]]], [9, 10]];
function simpleNormalizeChildren(children) {
 for (let i = 0; i < children.length; i++) {
  if (Array.isArray(children[i])) {
   children = Array.prototype.concat.apply([], children);
   for(let j =0; j<children.length; j++) {
    simpleNormalizeChildren(children)
   }
  }
 }
 return children;
}
simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

JS 배열 의 차원 을 낮 추 는 Array.prototype.concat.apply([],arr)에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 JS 배열 의 차원 을 낮 추 는 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!