> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 배열을 평면화하는 방법은 무엇입니까?

자바스크립트 배열을 평면화하는 방법은 무엇입니까?

亚连
풀어 주다: 2018-06-11 14:21:11
원래의
2934명이 탐색했습니다.

이 기사에서는 JavaScript 배열을 평면화하는 방법에 대한 자세한 분석을 제공합니다. 이에 관심이 있는 친구들은 함께 배울 수 있습니다.

개발 과정에서 2차원 배열을 1차원 배열로 평면화하거나 3차원 배열을 1차원 배열로 평면화하는 등 몇 가지 일반적인 문제에 직면할 때가 있습니다. 이러한 문제는 직면하게 되면 항상 다시 생각하게 되므로 이를 개선하고 요약하는 것이 좋습니다.

아래 작성자는 다차원 배열을 1차원 배열로 병합하는 두 가지 방법을 보여줍니다. 더 나은 방법이 있으면 메시지 영역에 게시할 수 있습니다.

첫 번째 방법은 재귀적 처리입니다. 코드는 다음과 같습니다.

var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]],
 [333, 4444]
];
function product() {
 // 1、创建一个空数组,
 var newarr = [];
 ///2、并且返回一个函数,函数参数为要拍平的数组
 return function flatten(arr) {
  // 3、循环数组,判断每一项,不为输的话将其塞入newarr
  // 若为数组,递归调用 faltten,并将结果与newarr合并
  for (var t of arr) {
   if (!Array.isArray(t)) {
    newarr.push(t);
   } else {
    newarr.concat(flatten(t))
   }
  }
  return newarr
 }
}
var flatten = product();
console.log(flatten(arr))
로그인 후 복사

실행 결과는 다음과 같습니다.

코드에 대한 자세한 설명은 댓글을 참조하세요. 다음 방법은 JavaScript 언어의 새로운 기능의 일부 측면을 사용하며 코드는 다음과 같습니다.

var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]],
 [333, 4444]
];
function flatten(arr){
 return arr.reduce(function(pre,cur){
  if(!Array.isArray(cur)){
   return [...pre,cur];
  }else{
   return [...pre,...flatten(cur)]
  }
 },[])
}
console.log(flatten(arr))
로그인 후 복사

위 코드는 ES6의 새로운 기능을 사용하여 클라우드 알고리즘 "...", "[...abc,. ..fff]"의 기능은 abc.concat(fff )와 동일하므로 이 사용법이 더 직관적이고 명확하며 감소 방법이 사용됩니다. 감소(reduce)는 자바스크립트 언어의 배열 메소드입니다.

배열에서 recduce 메소드를 호출할 때 두 개의 매개변수를 전달할 수 있습니다. 첫 번째 매개변수는 콜백 함수이고 두 번째 매개변수는 초기값입니다. 콜백 함수에는 두 개의 매개변수가 전달되어야 합니다. 첫 번째 매개변수는 각 함수 실행의 반환 값이고, 두 번째 매개변수는 현재 인덱스에 해당하는 배열의 값입니다. 감소의 두 번째 매개변수는 생략될 수 있으며, 생략되면 콜백 함수의 첫 번째 호출 매개변수는 배열의 첫 번째 항목과 두 번째 항목의 값이 됩니다. 이 초기값입니다. 위의 예에서, Reduce의 두 번째 매개변수는 빈 배열로 설정됩니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JS를 사용하여 WeChat에서 앱을 불러오는 방법은 무엇입니까?

영역 스크롤 문제를 위해 Vue에서 cli+mui 사용

vue의 온라인 유료 강좌(자세한 튜토리얼)

express와 koa 사용 비교(자세한 튜토리얼)

in vue First 스타일러스 설치 방법을 사용하는 시간(자세한 튜토리얼)

Vue 프레임워크에서 관련 상품 구성 요소 개발

위 내용은 자바스크립트 배열을 평면화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿