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是HTMLCollection而不是JS数组。您可以将其转换为以下内容：

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; });

Javascript数组过滤器不过滤

2 个答案: