Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de la mise en œuvre de la fonction de filtrage multiconditions des données frontales JavaScript

黄舟
Libérer: 2017-10-02 09:44:37
original
3236 Les gens l'ont consulté

Cet article présente principalement en détail la fonction de filtrage multi-conditions des données frontales basée sur JavaScript. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Parfois, il est également nécessaire au recto. -fin. Effectuez un filtrage des données pour améliorer l’expérience interactive. Lorsqu'il existe de nombreuses conditions de filtrage disponibles pour les données, le codage en dur de la logique entraînera des problèmes lors d'une maintenance ultérieure. Vous trouverez ci-dessous un filtre simple que j'ai écrit moi-même. Les conditions de filtre peuvent être définies dynamiquement en fonction des champs contenus dans les données.

Imitant les conditions de filtrage de JD.com, nous prenons ici la fourchette de prix et la marque comme test.

Code

Le code utilise principalement le filtre js Array.prototype.filter, qui traversera les éléments du tableau Check, renvoie un nouveau tableau qui répond aux conditions de vérification et le tableau d'origine ne sera pas modifié.


// 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]
Copier après la connexion

Avec cette méthode, il est beaucoup plus facile de filtrer les données. Définissons d'abord une catégorie de produits.


// 定义商品类
function Product(name, brand, price) {
 this.name = name; // 名称
 this.brand = brand; // 品牌
 this.price = price; // 价格
}
Copier après la connexion

Créez un objet filtre et placez-y toutes les méthodes de filtrage des données. Afin de s'adapter automatiquement aux différentes conditions de filtrage, les conditions de filtrage sont divisées en deux grandes catégories. L'une est le type de plage rangesFilter, tel que la marque, la mémoire, etc., l'autre est le type de sélection choisit le filtre, tel que : le prix, l'écran ; taille, etc

Lorsque différentes catégories sont filtrées en même temps, la logique ET est utilisée. Chaque catégorie est filtrée en fonction des résultats de filtrage de la catégorie précédente. Par exemple, si je souhaite filtrer les téléphones mobiles Huawei dont le prix est compris entre 2 000 et 5 000, j'appelle d'abord rangesFilter pour filtrer les produits et renvoyer le résultat 1, puis j'utilise ChoosesFilter pour filtrer le résultat 1 et renvoyer le résultat 2.

Bien sûr, s'il existe d'autres grandes catégories, elles ne sont pas forcément logiques et seront traitées séparément.


// 商品筛选器
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) { }
}
Copier après la connexion

Filtrage de type intervalle, le code est le suivant.


// 区间类型条件结构
ranges: [
  {
   type: &#39;price&#39;, // 筛选类型/字段
   low: 3000, // 最小值
   high: 6000 // 最大值
  }
 ]
Copier après la connexion


/**
  * @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;
  }
 }
Copier après la connexion

Sélectionnez le type de filtre :


// 选择类型条件结构
chooses: [
  {
   type: &#39;brand&#39;,
   value: &#39;华为&#39;
  },
  {
   type: &#39;brand&#39;,
   value: &#39;苹果&#39;
  }
 ]
Copier après la connexion


/**
  * @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;
 }
Copier après la connexion

Définir une fonction d'exécution 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;
}
Copier après la connexion


// 将两种大类的筛选条件放在同一个对象里
let Conditions = {
 ranges: [
  {
   type: &#39;price&#39;,
   low: 3000,
   high: 6000
  }
 ],
 chooses: [
  {
   type: &#39;brand&#39;,
   value: &#39;华为&#39;
  }
 ]
}
Copier après la connexion

Test

Créer 10 données produit et filtrer condition


// 商品数组
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;
  }
 ]
}
Copier après la connexion

Fonction d'appel


let result = doFilter(products, Conditions);
console.log(result);
Copier après la connexion

Sortie

L'évolutivité et la maintenabilité du code sont très bonnes. Tant que le champ de type dans les conditions de filtrage est cohérent dans les données du produit, vous pouvez filtrer par exemple, modifier les conditions de filtrage en
<🎜. >


let Conditions = {
 ranges: [
  {
   type: &#39;price&#39;,
   low: 3000,
   high: 6000
  }
 ],
 chooses: [
  {
   type: &#39;name&#39;,
   value: &#39;iPhone&#39;
  }
 ]
}
Copier après la connexion
Sortie

Certains endroits tels que la correspondance de recherche doivent également être optimisés, qu'ils soient sensibles à la casse, s'il s'agit d'une correspondance exacte ou d'une correspondance floue, etc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal