밑줄을 사용한 친구들은 배열 (세트)의 트래버스를 호출하는 것이 매우 완전한 API가 있다는 것을 알고 있으며 _.each () 중 하나입니다. 간단한 예는 다음과 같습니다.
var arr = [1, 2, 3, 4, 5]; _. 각 (arr, function (el) {console.log (el);});위의 코드는 1, 2, 3, 4, 5를 출력합니다. 그다지 흥미롭지 않습니까? 당신은 혼자서 루프를 위해 글을 쓸 필요조차 없습니다. _.each () 메소드는 트래버스 어레이에 매우 유용하지만 내부 구현은 전혀 어렵지 않습니다. _.each ()가 어떻게 구현되는지 살펴 보겠습니다. 이 전에 _.each ()의 API를 살펴 보겠습니다. _.Each ()는 일반적으로 다음과 같이 호출됩니다.
_.Each (ARR, FN, 컨텍스트);
3 개의 매개 변수를 수신합니다.
첫 번째는 트래버 해야하는 배열입니다 (실제로는 물체가 될 수도 있으므로 나중에 논의 해 봅시다).
두 번째는 콜백 함수입니다 (이 콜백 함수는 다음과 같은 3 개의 매개 변수로 전달할 수 있습니다. 함수 (EL, I, ARR), 현재 요소, 현재 인덱스 및 원래 배열);
세 번째는 콜백 함수가 바인딩되어야하는 컨텍스트, 즉 콜백 함수 FN 의이 값을 지정 해야하는 컨텍스트입니다.
좋아, 요구는 매우 분명하다. 일을 시작합시다!
먼저 컨텍스트를 수정할 수없는 가장 간단한 _.each ()를 구현하겠습니다. 코드는 다음과 같습니다.
var _ = {}; // 밑줄이라고 가정합니다. // _.each method_.each = function (arr, fn) {for (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } rack arr; // 원래 배열 반환}어때? 매우 간단하지 않습니까? 루프 용 A를 사용하고 콜백 함수를 계속 호출하십시오. 몇 줄의 코드로 만 수행 할 수 있습니다. 나는 친구가 그것을 이해할 수 없다고 믿는다! 정상적으로 작동하는지 확인하기 위해 테스트합시다.
var arr = [1, 2, 3, 4, 5]; _.
브라우저에서 열면 콘솔에는 올바른 출력이 표시됩니다.
이러한 간단한 코드는 전혀 의미가 없습니다. 더 어려운 예를 살펴 보겠습니다. 예를 들어, 배열 ARR에는 합계 속성이 있습니다. 배열의 모든 요소를 합계하고 다음과 같이 합에 저장해야합니다.
var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // 합계 속성은 배열 요소의 합을 저장하는 데 사용됩니다.
현재 콜백 함수에 사용됩니다. 바인딩되지 않은 경우 기본적으로 창입니다. 이것은 우리가 원하는 것이 아닙니다. 우리는 그것이 배열 ARR에 묶여 있기를 바랍니다. Call 또는 Apply는이 기능을 구현할 수 있으며 코드는 다음과 같습니다.
var _ = {}; // 이것이 밑줄이라고 가정합니다. // 바인드, 두 개의 매개 변수를 수신하고 컨텍스트 // 컨텍스트에 fn을 바인드 var bind = function (fn, context) {context = context || 널; return function (el, i, arr) {fn.call (Context, El, I, Arr); }} // _.each_.each = function (arr, fn, context) {// 바인드 메소드를 호출하고 컨텍스트 fn = bind (fn, context)에 fn을 호출합니다. for (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } return arr;} // 테스트 케이스 : var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // 합계 속성은 배열 요소의 합을 저장하는 데 사용됩니다. // 15자,이 _.each ()는 이미 배열을 통해 반복 할 수있을 정도로 강력하며 콜백 함수의 컨텍스트를 변경하기 위해이 값을 마음대로 지정할 수도 있습니다. 그러나 앞에서 언급했듯이 밑줄의 _.each ()도 물체를 가로 질러 객체를 가질 수 있으며이 구현은 어렵지 않습니다. 전달 된 첫 번째 매개 변수가 객체인지 배열인지 판단하십시오. 그것이 배열이라면 우리처럼 반복하십시오. 그렇지 않으면 객체 인 경우 객체를 사용합니다. 관심이 있으시면 직접 시도하거나 밑줄의 소스 코드를 확인할 수 있습니다.
참고 : ES5 표준이므로 네이티브 어레이에는 이미 Array.Prototype.foreach, Array.Prototype.map 등과 같은 트래버스 방법이 있으며, 기본 제품은 프로젝트에서 사용할 수 있습니다.
위는 편집기가 소개 한 JS 배열 트래버스 방법 (권장)의 심층 분석에 대한 전체 설명입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!