我可以对已过滤的项目应用过滤器吗 (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

    });

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

所以这过滤了位置（达丁顿、比德福德和普利茅斯），这很好。但是一旦完成，我现在想过滤掉 Dartington 中的房屋类型，以便仅输出 Dartington 中的房屋。

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

Answer 1

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)这将按照您定义的顺序应用过滤器。

Answer 2

只是展示原理。不必费心将其连接到实际的谷歌地图，但这可以保持不变。// collection of markersvar marker_collection = [&nbsp; [ '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' ],&nbsp; ['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'],&nbsp; ['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'],&nbsp; ['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 ) {&nbsp; return array.map(function( marker ) {&nbsp; &nbsp; return marker.slice();&nbsp; });};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 ) {&nbsp; var html = markers.map(function( marker ) {&nbsp; &nbsp; // Usign the array since we didn't create google maps objects.&nbsp; &nbsp; var image = marker[7];&nbsp; &nbsp; var title = marker[1];&nbsp; &nbsp; var link = marker[6];&nbsp; &nbsp; // var { image, title, link } = marker;&nbsp; &nbsp; 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`;&nbsp;&nbsp; });&nbsp; 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 ) {&nbsp; var location = 'Dartington';&nbsp; // filter the markers&nbsp; // When the markers are gogole objects instead of arrays, you'll use marker.location again instead of marker[4]&nbsp; var remaining_markers = selected_markers.filter(function( marker ) {&nbsp; &nbsp; return marker[4] === location;&nbsp; });&nbsp; // save the remaining markers so we can filter those again if needed.&nbsp; selected_markers = remaining_markers;&nbsp; // after filtering, rerender the remaining markers.&nbsp; render( selected_markers );};// add the filter event to the buttondocument.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 ) {&nbsp; selected_markers = clone_array( marker_collection );&nbsp; render( selected_markers );};// add the reset event to the buttondocument.querySelector( '#reset' ).addEventListener( 'click', reset );// initial render upon startuprender( selected_markers );<button id="filter">Filter</button><button id="reset">Reset</button><main></main>