> 웹 프론트엔드 > JS 튜토리얼 > JavaScript Array Flatten 및 recursion_javascript 기술 사용 소개

JavaScript Array Flatten 및 recursion_javascript 기술 사용 소개

WBOY
풀어 주다: 2016-05-16 18:00:07
원래의
1521명이 탐색했습니다.

JavaScript를 사용하여 [1,2,3,[4,5, [6,7]], [[[8]]]]와 같은 배열을 [1,2,3,4,5, 6, 7,8] 어떨까요? 전설적인 Array Flatten.

이런 종류의 문제를 처리하려면 일반적으로 알고리즘에 따라 프로그램을 반복하는 재귀가 필요합니다. 어떤 책에서는 "재귀는 강력한 프로그래밍 기술입니다."라고 말합니다. 음, 재귀는 단지 JavaScript에만 속하는 것은 아닙니다. 재귀는 어려울 수도 있고 상대적으로 간단할 수도 있습니다(일반적으로 여전히 상대적으로 어렵습니다). 위의 문제를 해결하려면 재귀를 사용하는 것이 더 적합해야 합니다. 작업자는 이전에 이를 구현했는데, 이는 재귀 사용의 간단한 예입니다.

코드 복사 코드는 다음과 같습니다.

flatten: function(ac){
var array = [];
var group = this.arr
if(ac) group = ac; var i = 0; i < group.length; i ){
if(group[i] instanceof Array){
array = array.concat(this.Flatten(group[i])); >}else{
array = array.concat(group[i]);
}
}
return array
}


in(group) [i] instanceof Array ), 함수 자체를 호출하고 매개변수를 전달하여 재귀를 수행합니다. Array.js를 리팩토링하던 중 프레임워크이기 때문에 추상적인 것들을 많이 사용하지 않으면 너무 아깝다는 생각이 들었습니다. 따라서 다시 호출하는 것보다는 추상화된 정적 함수를 호출하는 것이 더 좋습니다. 여기에는 for 루프가 있습니다. 즉, 각각이 필요하다는 뜻입니다. 결과는? 네 단어, 구현하기 어렵습니다. 항상 배열을 생성하고 마지막으로 이 새 배열을 반환해야 하기 때문에 이를 조정하기 위해 새 함수를 추출해야 합니다. 이건 원래 의도에 어긋나는 것 아닌가요?

온라인으로 살펴보고 최종적으로 프로토타입을 결정했습니다. 그의 구현 방법은 재귀 증가를 처리하는 함수를 추상화한 다음 이 함수를 사용하여 재귀를 수행하는 것입니다. 어떻게 말하나요? 저는 이것을 프레임워크라고 말하고 싶습니다. 다음은 재귀를 처리하는 함수입니다.


function inject(memo , iterator, context) {
this.each(function(value, index) {
memo = iterator.call(context, memo, value, index);
}); > return memo;
}


이 flatten 함수의 최종 구현은 다음과 같습니다. 이 코드는 매우 아름답습니다.


복사 code 코드는 다음과 같습니다. function flatten() {
return this.inject([], function(array, value) {
if (Object.isArray( value))
return array.concat(value.platten());
array.push(value);
return array;
}); }


물론 각 함수인 for 루프를 처리하려면 또 다른 추상 함수가 필요합니다. 그건 그렇고, 이 각 함수를 flatten으로 가져오고 jQuery의 작동 방식을 배우고 기본 지원을 추가하세요. 물론 배열뿐만 아니라 순수 객체도 처리할 수 있습니다.



코드 복사
코드는 다음과 같습니다. each: function (callback,bind) { var isObject = arale.typeOf(this.obj ) === 'object',
i = 0,
key;

if (isObject) {
var obj = this.obj
for (obj의 키) {
if (callback.call(bind, key, obj[key]) === false) {
break
}
}
} else {
var arr = this.obj;
if (Array.prototype.forEach) {

// 사용자가 false를 반환하면 계속 실행됩니다.
// 네이티브는 매우 당황스럽습니다. 그대로 둬야 할까요? 아니면 그대로 두시겠습니까?
return [].forEach.call(arr, callback, bin)
for (var value = arr[0], length = arr.length; < length && callback.call(bind , i, value) !== false; value = arr[ i]) {}
}
}


요즘 자바스크립트로 많이 놀고 있어요. 최근 기사와 팀 내부 블로그에 올라온 글을 살펴보니 모두 JS로 작성되어 있습니다. 당혹스러운. 큰 변화인 것 같습니다. 균형을 맞춰야 합니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿