Javascript配列フィルタはフィルタリングされていません

Question

動的配列をフィルタリングするためにJavascriptを取得することはできませんが、静的配列をフィルタします。コードブロック＃1作品（静的配列）、コードブロック＃2はない（動的に作成された配列）がない：

// global variables 

var globalCalendarEventsArray = [ 
    {element: "box1", unit: "a"}, 
    {element: "box2", unit: "a"}, 
    {element: "box3", unit: "b"}, 
    {element: "box4", unit: "b"} 
]; 

// var globalCalendarEventsArray = document.getElementsByClassName("redBox"); 

var rowCalendarEventsArray = []; 


// functions 
function getRowCalendarEvents (_eventsArray,_unitValue) { 
    return _eventsArray.filter(function(_calendarEvent) { 
    return _calendarEvent.unit == _unitValue; 
    }); 
} 

function onMouseDblClick() { 
    rowCalendarEventsArray = getRowCalendarEvents(globalCalendarEventsArray,"a"); 
    alert(globalCalendarEventsArray.length); 
    alert(globalCalendarEventsArray[0].unit); 
    alert (rowCalendarEventsArray.length); 
} 


// event listeners 
window.addEventListener("dblclick",onMouseDblClick,false); 


// execution code 
var box1 = document.createElement("div"); 
box1.className = "redBox"; 
box1.unit = "a"; 
document.body.appendChild(box1); 

var box2 = document.createElement("div"); 
box2.className = "redBox"; 
box2.unit = "a"; 
document.body.appendChild(box2); 

var box3 = document.createElement("div"); 
box3.className = "redBox"; 
box3.unit = "b"; 
document.body.appendChild(box3); 

var box4 = document.createElement("div"); 
box4.className = "redBox"; 
box4.unit = "b"; 
document.body.appendChild(box4); 

しかし、できるだけ早く私は.getElementsByClassNameを使用して、動的に配列を構築するよう、フィルタリングは、離れて落ちますアラート関数が.getElementsByClassNameが配列を構築していることを確認していて、それが.unitプロパティを呼び出すと、そこに存在します。例：

// global variables 
/* 
var globalCalendarEventsArray = [ 
    {element: "box1", unit: "a"}, 
    {element: "box2", unit: "a"}, 
    {element: "box3", unit: "b"}, 
    {element: "box4", unit: "b"} 
];*/ 

var globalCalendarEventsArray = document.getElementsByClassName("redBox"); 

var rowCalendarEventsArray = []; 


// functions 
function getRowCalendarEvents (_eventsArray,_unitValue) { 
    return _eventsArray.filter(function(_calendarEvent) { 
    return _calendarEvent.unit == _unitValue; 
    }); 
} 

function onMouseDblClick() { 
    rowCalendarEventsArray = getRowCalendarEvents(globalCalendarEventsArray,"a"); 
    alert(globalCalendarEventsArray.length); 
    alert(globalCalendarEventsArray[0].unit); 
    alert (rowCalendarEventsArray.length); 
} 


// event listeners 
window.addEventListener("dblclick",onMouseDblClick,false); 


// execution code 
var box1 = document.createElement("div"); 
box1.className = "redBox"; 
box1.unit = "a"; 
document.body.appendChild(box1); 

var box2 = document.createElement("div"); 
box2.className = "redBox"; 
box2.unit = "a"; 
document.body.appendChild(box2); 

var box3 = document.createElement("div"); 
box3.className = "redBox"; 
box3.unit = "b"; 
document.body.appendChild(box3); 

var box4 = document.createElement("div"); 
box4.className = "redBox"; 
box4.unit = "b"; 
document.body.appendChild(box4); 

フィドル：https://jsfiddle.net/kryman/uexo1hs4/

すべてのヘルプはあなたに感謝し、高く評価されるだろう。

Answer 1

_eventsArrayは、JS配列ではなくHTMLCollectionです。

function getRowCalendarEvents (_eventsArray,_unitValue) { 
    var arr = [].slice.call(_eventsArray); 

    return arr.filter(function(_calendarEvent) { 
    return _calendarEvent.unit == _unitValue; 
    }); 
} 

Answer 2

それとも、私たちが実際に

Array.prototype.filter.call(_eventsArray, function(_calendarEvent) { return _calendarEvent.unit == _unitValue; });