我可以对已过滤的项目应用过滤器吗(JavaScript)

Question

我想从已过滤的嵌套数组中过滤项目，但我不希望删除以前的过滤器。

我最初是这样定义数组的：

markers1 = [
['0', '15 Smith Ct', 50.472711, -3.540386, 'Dartington', 'House', 'http://google.com/',
'https://www.msvhousing.co.uk/images/properties/for-rent/609/khubsuret%20compressed.jpg'],
['1', '27 Clobells', 50.424091, -3.832449, 'Dartington', 'Bungalow', 'http://google.com',
'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80'],
['2', '155 Churchill Rd', 51.011143, -4.195814, 'Bideford', 'Flat', 'http://google.com',
'https://images.unsplash.com/photo-1449844908441-8829872d2607?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'],
['3', 'Dennis Camp Rd', 50.431930, -4.121285, 'Plymouth', 'Bungalow', 'http://google.com',
'https://images.unsplash.com/photo-1552903023-dc7b4c9fa5bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60']
];

然后像这样分配内容：

function addMarker(marker) {
var title = marker[1];
var pos = new google.maps.LatLng(marker[2], marker[3]);
var location = marker[4];
var property = marker[5];
var link = marker[6];
var image = marker[7]
marker1 = new google.maps.Marker({
title: title,
position: pos,
location: location,
map: map,
property: property,
link: link,
image: image
});

然后我的过滤器是这样工作的：

filterMarkers = function (location) {
// clear div x
document.getElementById("x").innerHTML = " ";
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same location or location not picked
if (marker.location == location || location.length === 0) {
document.getElementById('x').innerHTML += "<div class='col-sm col-md-4 mt-5 mt-lg-0'><img class='w-100 mt-5' src=" + marker.image + " style='max-height:200px' ><br><div class='display-6 my-3 ml-3'>" 
+ marker.title + "</div><a class='lead ml-3' href='" + marker.link + "'>View more about this property</a></div>";
marker.setVisible(true);
}
// locations don't match 
else {
marker.setVisible(false);
}
}
}

然后还有另一个工作原理完全相同，但在数组的不同部分。

因此，这会过滤位置(达廷顿，比德福德和普利茅斯(，这很好。但是一旦完成，我现在想过滤达廷顿的房屋类型，以便只输出达廷顿的房屋。

希望这是有道理的，如果没有，请告诉我，如果这已经在其他地方得到回答，我找不到它，所以如果你能指出我正确的方向，我将不胜感激。

Answer 1

只是显示原理。没有费心将其连接到实际的谷歌地图，但可以保持不变。

// collection of markers
var marker_collection = [
[ '0','15 Smith Ct', 50.472711, -3.540386, 'Dartington', 'House', 'http://google.com', 'https://www.msvhousing.co.uk/images/properties/for-rent/609/khubsuret%20compressed.jpg' ],
['1', '27 Clobells', 50.424091, -3.832449, 'Dartington', 'Bungalow', 'http://google.com',
'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80'],
['2', '155 Churchill Rd', 51.011143, -4.195814, 'Bideford', 'Flat', 'http://google.com',
'https://images.unsplash.com/photo-1449844908441-8829872d2607?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'],
['3', 'Dennis Camp Rd', 50.431930, -4.121285, 'Plymouth', 'Bungalow', 'http://google.com',
'https://images.unsplash.com/photo-1552903023-dc7b4c9fa5bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60']
];
// Inititally we start with all the markers, so we clone the full collection.
// Just use an empty array if you want to start with nothing.
// Since the inner arrays only contain strings and numbers, we can just slice those.
var clone_array = function( array ) {
return array.map(function( marker ) {
return marker.slice();
});
};
var selected_markers = clone_array( marker_collection );
// Separate reusable function to render all makers.
// We will only use the selected_markers from now on for rendering
// And the marker_collection to reset back to everything.
var render = function( markers ) {
var html = markers.map(function( marker ) {
// Usign the array since we didn't create google maps objects.
var image = marker[7];
var title = marker[1];
var link = marker[6];
// var { image, title, link } = marker;
return `<div class='col-sm col-md-4 mt-5 mt-lg-0'><img class='w-100 mt-5' src="${ image }" style='max-height:200px' ><br><div class='display-6 my-3 ml-3'>"${ title }"</div><a class='lead ml-3' href='"${ link }"'>View more about this property</a></div><button`; 
});
document.querySelector( 'main' ).innerHTML = html.join( '' );
};
// Add a filter function some way.
// Just using a button and a fixed location as an example.
// You'd get the location from whatever the user selected.
var filter = function( event ) {
var location = 'Dartington';
// filter the markers
// When the markers are gogole objects instead of arrays, you'll use marker.location again instead of marker[4]
var remaining_markers = selected_markers.filter(function( marker ) {
return marker[4] === location;
});
// save the remaining markers so we can filter those again if needed.
selected_markers = remaining_markers;
// after filtering, rerender the remaining markers.
render( selected_markers );
};
// add the filter event to the button
document.querySelector( '#filter' ).addEventListener( 'click', filter );
// reset the markers back to the original
// So we just do the same as before, clone the original array and then rerender.
var reset = function( event ) {
selected_markers = clone_array( marker_collection );
render( selected_markers );
};
// add the reset event to the button
document.querySelector( '#reset' ).addEventListener( 'click', reset );
// initial render upon startup
render( selected_markers );

<button id="filter">Filter</button>
<button id="reset">Reset</button>
<main></main>

Answer 2

>The filter() method creates a new array with all elements that pass the test implemented by the provided function.更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

因此，您可以根据需要应用任意数量的过滤器。

您也可以像这样链接它们：

const resultArray = array.filter(filterFunction1).filter(filterFunction2)

这将按您定义的顺序应用筛选器。