원생 JS foreach () 와 map () 가 옮 겨 다 니 는 차이 점 및 호 환 쓰기

3066 단어 JavaScript
1. 원생 JS foreach () 와 map () 를 옮 겨 다 닙 니 다.
공통점:
     1. 배열 의 모든 항목 을 반복 합 니 다.
    2. foreach () 와 map () 에서 익명 함 수 를 실행 할 때마다 3 개의 인 자 를 지원 합 니 다. 배열 의 현재 항목 item, 현재 항목 의 색인 index, 원본 배열 input.
   3. 익명 함수 중의 this 는 모두 Window 를 가리킨다.
   4. 배열 만 옮 겨 다 닐 수 있다.
1.forEach()
   반환 값 이 없습니다.
var ary = [12,23,24,42,1];
var res = ary.forEach(function (item,index,input) {
       input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(ary);//-->           ;

2.map()
반환 값 이 있 으 면 return 할 수 있 습 니 다.
var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,input) {
    return item*10;
})
console.log(res);//-->[120,230,240,420,10];
console.log(ary);//-->[12,23,24,42,1];

호환성 표기 법:
foreach 든 map 든 IE6 - 8 에서 호 환 되 지 않 습 니 다.
/**
* forEach    
* @param callback [function]     ;
* @param context [object]    ;
*/
Array.prototype.myForEach = function myForEach(callback,context){
    context = context || window;
    if('forEach' in Array.prototye) {
        this.forEach(callback,context);
        return;
    }
    //IE6-8              
    for(var i = 0,len = this.length; i < len;i++) {
        callback && callback.call(context,this[i],i,this);
    }
}
/**
* map    
* @param callback [function]     ;
* @param context [object]    ;
*/
Array.prototype.myMap = function myMap(callback,context){
    context = context || window;
    if('map' in Array.prototye) {
        return this.map(callback,context);
    }
    //IE6-8              
    var newAry = [];
    for(var i = 0,len = this.length; i < len;i++) {
        if(typeof  callback === 'function') {
            var val = callback.call(context,this[i],i,this);
            newAry[newAry.length] = val;
        }
    }
    return newAry;
}

2. jQuery $. each () 와 $. map () 를 옮 겨 다 닙 니 다.
공통점:
배열 을 옮 겨 다 닐 수도 있 고 대상 을 옮 겨 다 닐 수도 있다.
1.$.each()
반환 값 이 없습니다. $.each () 의 익명 함 수 는 현재 항목 의 색인 i, 배열 의 현재 항목 n 을 지원 합 니 다.대상 을 옮 겨 다 니 면 k 는 키 이 고 n 은 값 입 니 다.
$.each( ["a","b","c"], function(i, n){
     alert( i + ": " + n );
});
$("span").each(function(i, n){
     alert( i + ": " + n );
});
 
  
$.each( { name: "John", lang: "JS" }, function(k, n){
     alert( "Name: " + k + ", Value: " + n );
});

2.$.map()
반환 값 이 있 으 면 return 할 수 있 습 니 다. $...map () 의 익명 함 수 는 2 개의 인자 와 $. each () 의 인자 위 치 를 지원 합 니 다. 배열 의 현재 항목 n, 현재 항목 의 색인 i.대상 을 옮 겨 다 니 면 i 는 값 이 고 n 은 키 입 니 다.$("span"). map () 형식 이 라면 매개 변수 순서 와 $. each () $("span"). each () 가 같 습 니 다.
var arr=$.map( [0,1,2], function(n){
     return n + 4;
});
console.log(arr);
$.map({"name":"Jim","age":17},function(i,n){
     console.log(i+":"+n);
});

좋은 웹페이지 즐겨찾기