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