2018년 12월 27일 목요일

javascript, jQuery에서 루프(loop) 돌리기 예 (for, forEach, each)

javascript for문 사용 예

//예문1) 미지원 브라우저 없음
for (var i=0; i<array.length; i++) {
    console.log(array[i]);
}

//예문2.1) ie8 이하 미지원
for (var i in array) {
    console.log(array[i]);
}

//예문2.2) object형 변수의 루프 돌리기
var viewModel = {
    entity : undefined,
    longitude: 127.33887522,
    latitude: 36.34803794,
    height: 0,
    heading: 0,
    pitch: 0,
    roll: 0
};
for (var name in viewModel) {
    console.log(name + ": " + viewModel[name]);
}

//예문3.1) ie9, ff1.5 미만 미지원
array.forEach(function(currentValue, index, arr), thisValue);

//예문3.2) ie9, ff1.5 미만 미지원
var numbers = [65, 44, 12, 4];
function myFunction(item, index, arr) {}
numbers.forEach(myFunction);

jQuery 루프문 사용 예

//예문1)
$("li").each(function(index) {
    console.log(index + ": " + $(this).text());
});

//예문2)
$("div").each(function(index, element) {
    //$(element) == $(this)
    $(element).css("color", "yellow");
    if ($(this).is("#stop")) {
        $("span").text("index : " + index);

        //continue : return true;
        //break : return false;
        return false;
    }
});

//예문3)
var result = {
    navigationList : {
        "0": {
            "coordinatex" : "126",
            "coordinatey" : "36",
        },
        "1": {
            "coordinatex" : "126",
            "coordinatey" : "36",
        }
    }
};
$.each(result.navigationList, function(idx, data) {
    console.log('for:',data.coordinatex, data.coordinatey);
});

//예문4)
var obj = {
    "a": "1",
    "b": "2"
};
$.each(obj, function(key, value) {
    alert(key + ": " + value);
});

//예문5)
$.each([52, 97], function(index, value) {
    alert(index + ": " + value);
});