Heim > Web-Frontend > js-Tutorial > Beispiel für JavaScript, das eine Filterfunktion mit mehreren Bedingungen für Front-End-Daten implementiert

Beispiel für JavaScript, das eine Filterfunktion mit mehreren Bedingungen für Front-End-Daten implementiert

黄舟
Freigeben: 2018-05-29 15:05:39
Original
4220 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Multi-Bedingungs-Filterfunktion von Front-End-Daten basierend auf JavaScript vor. Es hat einen gewissen Referenzwert.

Manchmal wird es auch auf der Vorderseite benötigt -Ende. Führen Sie eine Datenfilterung durch, um das interaktive Erlebnis zu verbessern. Wenn für Daten viele Filterbedingungen verfügbar sind, führt eine harte Codierung der Logik zu Problemen bei der späteren Wartung. Nachfolgend finden Sie einen einfachen Filter, den ich selbst geschrieben habe. Die Filterbedingungen können basierend auf den in den Daten enthaltenen Feldern dynamisch festgelegt werden.

In Anlehnung an die Filterbedingungen von JD.com nehmen wir hier die Preisspanne und die Marke als Test.

Code

Der Code verwendet hauptsächlich den js-Filter Array.prototype.filter, der die Array-Elemente durchläuft. Gibt ein neues Array zurück, das die Prüfbedingungen erfüllt, und das ursprüngliche Array wird nicht geändert.

// filter()
var foo = [0,1,2,3,4,5,6,7,8,9];

var foo1 = foo.filter(
 function(item) {
  return item >= 5
 }
);

console.log(foo1); // [5, 6, 7, 8, 9]
Nach dem Login kopieren

Mit dieser Methode ist es viel einfacher, Daten zu filtern. Definieren wir zunächst eine Produktkategorie.

// 定义商品类
function Product(name, brand, price) {
 this.name = name; // 名称
 this.brand = brand; // 品牌
 this.price = price; // 价格
}
Nach dem Login kopieren

Erstellen Sie ein Filterobjekt und fügen Sie darin alle Methoden zum Filtern von Daten ein. Um sich automatisch an unterschiedliche Filterbedingungen anzupassen, sind die Filterbedingungen in zwei Hauptkategorien unterteilt: „RangesFilter“ (z. B. „Marke“, „Speicher“ usw.) und „ChoosesFilter“ (z. B. „Preis“) Größe usw.

Wenn verschiedene Kategorien gleichzeitig überprüft werden, wird die UND-Logik verwendet. Jede Kategorie wird basierend auf den Überprüfungsergebnissen der vorherigen Kategorie überprüft. Wenn ich beispielsweise Huawei-Mobiltelefone mit einem Preis zwischen 2000 und 5000 filtern möchte, rufe ich zunächst „rangesFilter“ auf, um Produkte zu filtern und Ergebnis1 zurückzugeben, und verwende dann „choosesFilter“, um Ergebnis1 zu filtern und Ergebnis2 zurückzugeben.

Wenn es andere Hauptkategorien gibt, sind diese natürlich nicht unbedingt logisch und werden separat behandelt.

// 商品筛选器
const ProductFilters = {
 /**
  * 区间类型筛选
  * @param {array<Product>} products
  * @param {array<{type: String, low: number, high: number}>} ranges
  */
 rangesFilter: function (products, ranges) { }

 /**
  * 选择类型筛选
  * @param {array<Product>} products
  * @param {array<{type: String, value: String}>} chooses
  */
 choosesFilter: function (products, chooses) { }
}
Nach dem Login kopieren

Intervalltypfilterung, der Code lautet wie folgt.

// 区间类型条件结构
ranges: [
  {
   type: &#39;price&#39;, // 筛选类型/字段
   low: 3000, // 最小值
   high: 6000 // 最大值
  }
 ]
Nach dem Login kopieren
/**
  * @param {array<Product>} products
  * @param {array<{type: String, low: number, high: number}>} ranges
  */
 rangesFilter: function (products, ranges) {
  if (ranges.length === 0) {
   return products;
  } else {
   /**
    * 循环多个区间条件,
    * 每种区间类型应该只有一个,
    * 比如价格区间不会有1000-2000和4000-6000同时需要的情况
    */
   for (let range of ranges) {
    // 多个不同类型区间是与逻辑,可以直接赋值给自身
    products = products.filter(function (item) {
     return item[range.type] >= range.low && item[range.type] <= range.high;
    });
   }
   return products;
  }
 }
Nach dem Login kopieren

Typfilter auswählen:

// 选择类型条件结构
chooses: [
  {
   type: &#39;brand&#39;,
   value: &#39;华为&#39;
  },
  {
   type: &#39;brand&#39;,
   value: &#39;苹果&#39;
  }
 ]
Nach dem Login kopieren
/**
  * @param {array<Product>} products
  * @param {array<{type: String, value: String}>} chooses
  */
 choosesFilter: function (products, chooses) {
  let tmpProducts = [];
  if (chooses.length === 0) {
   tmpProducts = products;
  } else {
   /**
    * 选择类型条件是或逻辑,使用数组连接concat
    */
   for (let choice of chooses) {
    tmpProducts = tmpProducts.concat(products.filter(function (item) {
     return item[choice.type].indexOf(choice.value) !== -1;
    }));
   }
  }
  return tmpProducts;
 }
Nach dem Login kopieren

Definieren Sie eine Ausführungsfunktion doFilter().

function doFilter(products, conditions) {
 // 根据条件循环调用筛选器里的方法
 for (key in conditions) {
  // 判断是否有需要的过滤方法
  if (ProductFilters.hasOwnProperty(key + &#39;Filter&#39;) && typeof ProductFilters[key + &#39;Filter&#39;] === &#39;function&#39;) {
   products = ProductFilters[key + &#39;Filter&#39;](products, Conditions[key]);
  }
 }
 return products;
}
Nach dem Login kopieren
// 将两种大类的筛选条件放在同一个对象里
let Conditions = {
 ranges: [
  {
   type: &#39;price&#39;,
   low: 3000,
   high: 6000
  }
 ],
 chooses: [
  {
   type: &#39;brand&#39;,
   value: &#39;华为&#39;
  }
 ]
}
Nach dem Login kopieren

Testen

10 Produktdaten und Filterbedingungen erstellen

// 商品数组
const products = [
 new Product(&#39;华为荣耀9&#39;, &#39;华为&#39;, 2299),
 new Product(&#39;华为P10&#39;, &#39;华为&#39;, 3488),
 new Product(&#39;小米MIX2&#39;, &#39;小米&#39;, 3599),
 new Product(&#39;小米6&#39;, &#39;小米&#39;, 2499),
 new Product(&#39;小米Note3&#39;, &#39;小米&#39;, 2499),
 new Product(&#39;iPhone7 32G&#39;, &#39;苹果&#39;, 4588),
 new Product(&#39;iPhone7 Plus 128G&#39;, &#39;苹果&#39;, 6388),
 new Product(&#39;iPhone8&#39;, &#39;苹果&#39;, 5888),
 new Product(&#39;三星Galaxy S8&#39;, &#39;三星&#39;, 5688),
 new Product(&#39;三星Galaxy S7 edge&#39;, &#39;三星&#39;, 3399),
];
// 筛选条件
let Conditions = {
 ranges: [
  {
   type: &#39;price&#39;,
   low: 3000,
   high: 6000
  }
 ],
 chooses: [
  {
   type: &#39;brand&#39;,
   value: &#39;华为&#39;
  },
  {
   type: &#39;brand&#39;,
   value: &#39;苹果&#39;
  }
 ]
}
Nach dem Login kopieren

Funktion aufrufen

let result = doFilter(products, Conditions);
console.log(result);
Nach dem Login kopieren

Ausgabe

Die Skalierbarkeit und Wartbarkeit des Codes ist sehr gut. Solange das Typfeld in der Filterbedingung in den Produktdaten konsistent ist, kann es gefiltert werden , wie z. B. Ändern Sie die Filterbedingungen in

let Conditions = {
 ranges: [
  {
   type: &#39;price&#39;,
   low: 3000,
   high: 6000
  }
 ],
 chooses: [
  {
   type: &#39;name&#39;,
   value: &#39;iPhone&#39;
  }
 ]
}
Nach dem Login kopieren

Ausgabe

Suchabgleich und andere Orte müssen ebenfalls optimiert werden, unabhängig davon, ob die Groß-/Kleinschreibung beachtet wird. Ob es sich um eine exakte Übereinstimmung oder eine Fuzzy-Übereinstimmung handelt, warten Sie.

Das obige ist der detaillierte Inhalt vonBeispiel für JavaScript, das eine Filterfunktion mit mehreren Bedingungen für Front-End-Daten implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage