如何根据名称和查询字符串按字母顺序对对象数组进行排序?

Dimitri Kopriwa:

我有以下功能:

const sort = (query) => (choiceA, choiceB) => choiceA.name.toLowerCase().localeCompare(choiceB.name.toLowerCase()),

它的用法如下:

newSearches = newSearches.sort(sort(query));

例如,在此示例中,tarascon应该是第一个结果,等等。

const query = 't';

const choices = [
  {
    "name": "Marseille 1er arrondissement"
  },
  {
    "name": "Marseille 2ème arrondissement"
  },
  {
    "name": "Marseille 3ème arrondissement"
  },
  {
    "name": "Marseille 4ème arrondissement"
  },
  {
    "name": "Marseille 5ème arrondissement"
  },
  {
    "name": "Marseille 6ème arrondissement"
  },
  {
    "name": "Marseille 7ème arrondissement"
  },
  {
    "name": "Marseille 8ème arrondissement"
  },
  {
    "name": "Marseille 9ème arrondissement"
  },
  {
    "name": "Marseille 10ème arrondissement"
  },
  {
    "name": "Marseille 11ème arrondissement"
  },
  {
    "name": "Marseille 12ème arrondissement"
  },
  {
    "name": "Marseille 13ème arrondissement"
  },
  {
    "name": "Marseille 14ème arrondissement"
  },
  {
    "name": "Marseille 15ème arrondissement"
  },
  {
    "name": "Marseille 16ème arrondissement"
  },
  {
    "name": "Le Tholonet"
  },
  {
    "name": "Saint-Marc-Jaumegarde"
  },
  {
    "name": "Beaurecueil"
  },
  {
    "name": "Saint-Antonin-sur-Bayon"
  },
  {
    "name": "Aix-en-Provence"
  },
  {
    "name": "Saint-Étienne-du-Grès"
  },
  {
    "name": "Mas-Blanc-des-Alpilles"
  },
  {
    "name": "Mimet"
  },
  {
    "name": "Simiane-Collongue"
  },
  {
    "name": "Port-de-Bouc"
  },
  {
    "name": "Coudoux"
  },
  {
    "name": "La Destrousse"
  },
  {
    "name": "Lamanon"
  },
  {
    "name": "Puyloubier"
  },
  {
    "name": "Saint-Paul-lès-Durance"
  },
  {
    "name": "Vernègues"
  },
  {
    "name": "Saint-Savournin"
  },
  {
    "name": "Gardanne"
  },
  {
    "name": "Aurons"
  },
  {
    "name": "Ventabren"
  },
  {
    "name": "Peypin"
  },
  {
    "name": "Vauvenargues"
  },
  {
    "name": "Vitrolles"
  },
  {
    "name": "Berre-l'Étang"
  },
  {
    "name": "Miramas"
  },
  {
    "name": "Tarascon"
  },
  {
    "name": "Les Pennes-Mirabeau"
  },
  {
    "name": "Gignac-la-Nerthe"
  },
  {
    "name": "Allauch"
  },
  {
    "name": "Arles"
  },
  {
    "name": "Saint-Rémy-de-Provence"
  },
  {
    "name": "Châteauneuf-les-Martigues"
  },
  {
    "name": "Port-Saint-Louis-du-Rhône"
  },
  {
    "name": "Septèmes-les-Vallons"
  },
  {
    "name": "Cornillon-Confoux"
  },
  {
    "name": "Saint-Chamas"
  },
  {
    "name": "Cassis"
  },
  {
    "name": "Fos-sur-Mer"
  },
  {
    "name": "Salon-de-Provence"
  },
  {
    "name": "Saint-Martin-de-Crau"
  },
  {
    "name": "Bouc-Bel-Air"
  },
  {
    "name": "La Barben"
  },
  {
    "name": "Pélissanne"
  },
  {
    "name": "Rognac"
  },
  {
    "name": "Charleval"
  },
  {
    "name": "Roquevaire"
  },
  {
    "name": "Mallemort"
  },
  {
    "name": "Plan-de-Cuques"
  },
  {
    "name": "Auriol"
  },
  {
    "name": "Aubagne"
  },
  {
    "name": "Lambesc"
  },
  {
    "name": "Gémenos"
  },
  {
    "name": "Eyguières"
  },
  {
    "name": "Grans"
  },
  {
    "name": "Saintes-Maries-de-la-Mer"
  },
  {
    "name": "Carnoux-en-Provence"
  },
  {
    "name": "Cabriès"
  },
  {
    "name": "Jouques"
  },
  {
    "name": "Martigues"
  },
  {
    "name": "Éguilles"
  },
  {
    "name": "Paradou"
  },
  {
    "name": "Maussane-les-Alpilles"
  },
  {
    "name": "Les Baux-de-Provence"
  },
  {
    "name": "Trets"
  },
  {
    "name": "Sénas"
  },
  {
    "name": "La Fare-les-Oliviers"
  },
  {
    "name": "Meyreuil"
  },
  {
    "name": "La Ciotat"
  },
  {
    "name": "Ceyreste"
  },
  {
    "name": "Saint-Estève-Janson"
  },
  {
    "name": "Le Puy-Sainte-Réparade"
  },
  {
    "name": "Carry-le-Rouet"
  },
  {
    "name": "La Roque-d'Anthéron"
  },
  {
    "name": "Meyrargues"
  },
  {
    "name": "Lançon-Provence"
  },
  {
    "name": "Marignane"
  },
  {
    "name": "Fuveau"
  },
  {
    "name": "La Bouilladisse"
  },
  {
    "name": "Belcodène"
  },
  {
    "name": "Saint-Victoret"
  },
  {
    "name": "Le Rove"
  },
  {
    "name": "Saint-Cannat"
  },
  {
    "name": "Venelles"
  },
  {
    "name": "Cuges-les-Pins"
  },
  {
    "name": "Riboux"
  },
  {
    "name": "Peynier"
  },
  {
    "name": "Châteauneuf-le-Rouge"
  },
  {
    "name": "Rousset"
  },
  {
    "name": "Istres"
  },
  {
    "name": "Ensuès-la-Redonne"
  },
  {
    "name": "La Penne-sur-Huveaune"
  },
  {
    "name": "Roquefort-la-Bédoule"
  },
  {
    "name": "Rognes"
  },
  {
    "name": "Gréasque"
  },
  {
    "name": "Peyrolles-en-Provence"
  },
  {
    "name": "Velaux"
  },
  {
    "name": "Mouriès"
  },
  {
    "name": "Saint-Mitre-les-Remparts"
  },
  {
    "name": "Aureille"
  },
  {
    "name": "Cadolive"
  },
  {
    "name": "Sausset-les-Pins"
  },
  {
    "name": "Alleins"
  },
  {
    "name": "Fontvieille"
  },
  {
    "name": "Fourques"
  },
  {
    "name": "Artigues"
  },
  {
    "name": "Rians"
  },
  {
    "name": "Plan-d'Aups-Sainte-Baume"
  },
  {
    "name": "Saint-Zacharie"
  },
  {
    "name": "Nans-les-Pins"
  },
  {
    "name": "Pourrières"
  },
  {
    "name": "Pertuis"
  },
  {
    "name": "Mirabeau"
  },
  {
    "name": "La Bastidonne"
  },
  {
    "name": "Beaumont-de-Pertuis"
  },
  {
    "name": "Puyvert"
  },
  {
    "name": "Cucuron"
  },
  {
    "name": "Lourmarin"
  },
  {
    "name": "Cadenet"
  },
  {
    "name": "Vaugines"
  },
  {
    "name": "Vitrolles-en-Lubéron"
  },
  {
    "name": "Grambois"
  },
  {
    "name": "Cabrières-d'Aigues"
  },
  {
    "name": "Peypin-d'Aigues"
  },
  {
    "name": "Sannes"
  },
  {
    "name": "Ansouis"
  },
  {
    "name": "La Bastide-des-Jourdans"
  },
  {
    "name": "La Tour-d'Aigues"
  },
  {
    "name": "La Motte-d'Aigues"
  },
  {
    "name": "Lauris"
  },
  {
    "name": "Villelaure"
  },
  {
    "name": "Saint-Martin-de-la-Brasque"
  }
];


const sort = (query) => (choiceA, choiceB) => !isNaN(query) || (
    choiceA.name.toLowerCase().localeCompare(choiceB.name.toLowerCase()) && query.indexOf(choiceA.name.toLowerCase()) === -1
);

const filter = (query) => (choice) => choice.name.toLowerCase().includes(query.toLowerCase());

document.getElementById('search').addEventListener('click', () => {
   const q = document.getElementById('query').value;
   const newSearches = choices.filter(filter(q)).sort(sort(q));
   document.getElementById('result').innerHTML = JSON.stringify(newSearches.map(s => s.name), null, 2);
}, true);
#result {
  display: block;
  width: 100vw;
}
<input id="query" type="text" />
<button id="search" type="button">search<button>

<pre id="result"></pre>

enter code here到目前为止,这将仅通过比较名称来按字母顺序排序,而不考虑查询,我如何更新它以便根据提供的查询按字母顺序对其排序?

您:

您可以将其更改为以下内容:

const sort = (query) => (choiceA, choiceB) => {
  const name1 = choiceA.name.toLowerCase(),
        name2 = choiceB.name.toLowerCase();
        q = query.toLowerCase();

  return (name2.startsWith(q) - name1.startsWith(q)) 
          || (name1.localeCompare(name2))
};

首先拿下两者之间的区别

name2.startsWith(q) - name1.startsWith(q)

startsWith 返回一个布尔值,并且在数学上下文中使用它们时将其强制为0或1

true - false === 1
false - true === -1
true - true === 0

因此,of name1始于,queryname2没有

false - true === -1

因此,choiceAchoiceB

如果两者都以开头query或都不以开头query,则减法返回0这是一个虚假的值。因此,在这种情况下,||操作员将检查第二个条件,将其按字母顺序排序。

这是一个片段:

const choices=[{name:"Marseille 1er arrondissement"},{name:"Marseille 2ème arrondissement"},{name:"Marseille 3ème arrondissement"},{name:"Marseille 4ème arrondissement"},{name:"Marseille 5ème arrondissement"},{name:"Marseille 6ème arrondissement"},{name:"Marseille 7ème arrondissement"},{name:"Marseille 8ème arrondissement"},{name:"Marseille 9ème arrondissement"},{name:"Marseille 10ème arrondissement"},{name:"Marseille 11ème arrondissement"},{name:"Marseille 12ème arrondissement"},{name:"Marseille 13ème arrondissement"},{name:"Marseille 14ème arrondissement"},{name:"Marseille 15ème arrondissement"},{name:"Marseille 16ème arrondissement"},{name:"Le Tholonet"},{name:"Saint-Marc-Jaumegarde"},{name:"Beaurecueil"},{name:"Saint-Antonin-sur-Bayon"},{name:"Aix-en-Provence"},{name:"Saint-Étienne-du-Grès"},{name:"Mas-Blanc-des-Alpilles"},{name:"Mimet"},{name:"Simiane-Collongue"},{name:"Port-de-Bouc"},{name:"Coudoux"},{name:"La Destrousse"},{name:"Lamanon"},{name:"Puyloubier"},{name:"Saint-Paul-lès-Durance"},{name:"Vernègues"},{name:"Saint-Savournin"},{name:"Gardanne"},{name:"Aurons"},{name:"Ventabren"},{name:"Peypin"},{name:"Vauvenargues"},{name:"Vitrolles"},{name:"Berre-l'Étang"},{name:"Miramas"},{name:"Tarascon"},{name:"Les Pennes-Mirabeau"},{name:"Gignac-la-Nerthe"},{name:"Allauch"},{name:"Arles"},{name:"Saint-Rémy-de-Provence"},{name:"Châteauneuf-les-Martigues"},{name:"Port-Saint-Louis-du-Rhône"},{name:"Septèmes-les-Vallons"},{name:"Cornillon-Confoux"},{name:"Saint-Chamas"},{name:"Cassis"},{name:"Fos-sur-Mer"},{name:"Salon-de-Provence"},{name:"Saint-Martin-de-Crau"},{name:"Bouc-Bel-Air"},{name:"La Barben"},{name:"Pélissanne"},{name:"Rognac"},{name:"Charleval"},{name:"Roquevaire"},{name:"Mallemort"},{name:"Plan-de-Cuques"},{name:"Auriol"},{name:"Aubagne"},{name:"Lambesc"},{name:"Gémenos"},{name:"Eyguières"},{name:"Grans"},{name:"Saintes-Maries-de-la-Mer"},{name:"Carnoux-en-Provence"},{name:"Cabriès"},{name:"Jouques"},{name:"Martigues"},{name:"Éguilles"},{name:"Paradou"},{name:"Maussane-les-Alpilles"},{name:"Les Baux-de-Provence"},{name:"Trets"},{name:"Sénas"},{name:"La Fare-les-Oliviers"},{name:"Meyreuil"},{name:"La Ciotat"},{name:"Ceyreste"},{name:"Saint-Estève-Janson"},{name:"Le Puy-Sainte-Réparade"},{name:"Carry-le-Rouet"},{name:"La Roque-d'Anthéron"},{name:"Meyrargues"},{name:"Lançon-Provence"},{name:"Marignane"},{name:"Fuveau"},{name:"La Bouilladisse"},{name:"Belcodène"},{name:"Saint-Victoret"},{name:"Le Rove"},{name:"Saint-Cannat"},{name:"Venelles"},{name:"Cuges-les-Pins"},{name:"Riboux"},{name:"Peynier"},{name:"Châteauneuf-le-Rouge"},{name:"Rousset"},{name:"Istres"},{name:"Ensuès-la-Redonne"},{name:"La Penne-sur-Huveaune"},{name:"Roquefort-la-Bédoule"},{name:"Rognes"},{name:"Gréasque"},{name:"Peyrolles-en-Provence"},{name:"Velaux"},{name:"Mouriès"},{name:"Saint-Mitre-les-Remparts"},{name:"Aureille"},{name:"Cadolive"},{name:"Sausset-les-Pins"},{name:"Alleins"},{name:"Fontvieille"},{name:"Fourques"},{name:"Artigues"},{name:"Rians"},{name:"Plan-d'Aups-Sainte-Baume"},{name:"Saint-Zacharie"},{name:"Nans-les-Pins"},{name:"Pourrières"},{name:"Pertuis"},{name:"Mirabeau"},{name:"La Bastidonne"},{name:"Beaumont-de-Pertuis"},{name:"Puyvert"},{name:"Cucuron"},{name:"Lourmarin"},{name:"Cadenet"},{name:"Vaugines"},{name:"Vitrolles-en-Lubéron"},{name:"Grambois"},{name:"Cabrières-d'Aigues"},{name:"Peypin-d'Aigues"},{name:"Sannes"},{name:"Ansouis"},{name:"La Bastide-des-Jourdans"},{name:"La Tour-d'Aigues"},{name:"La Motte-d'Aigues"},{name:"Lauris"},{name:"Villelaure"},{name:"Saint-Martin-de-la-Brasque"}];

const sort = (query) => (choiceA, choiceB) => {
  const name1 = choiceA.name.toLowerCase(),
        name2 = choiceB.name.toLowerCase();
        q = query.toLowerCase();
        
  return (name2.startsWith(q) - name1.startsWith(q)) 
          || (name1.localeCompare(name2))
};

const filter = (query) => (choice) => choice.name.toLowerCase().includes(query.toLowerCase());

document.getElementById('search').addEventListener('click', () => {
  const q = document.getElementById('query').value;
  const newSearches = choices.filter(filter(q)).sort(sort(q));
  document.getElementById('result').innerHTML = JSON.stringify(newSearches.map(s => s.name), null, 2);
}, true);
#result {
  display: block;
  width: 100vw;
}
<input id="query" type="text" />
<button id="search" type="button">search<button>

<pre id="result"></pre>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

按字符串属性值对对象数组进行排序

如何在Python中按字母顺序对字符串中的字母进行排序

如何按字符串长度和字母顺序排序?

Swift:按字母顺序对对象数组进行排序

如何在Node JS中按字母顺序对对象数组进行排序?

在字符串中按字母顺序对字符进行排序

如何使用角度orderBy过滤器按字母顺序对字符串数组进行排序?

如何按字母顺序对字符串进行排序

如何按字母顺序对字符串的ArrayList进行排序?

如何在Java中按字母顺序对字符串数组进行排序?

Python:如何按字母顺序对字符串中的字母进行排序,以区分大写和小写

按字母顺序,数字顺序和特殊字符对字符串数组进行排序

javascript按字符串属性对对象数组进行排序

按字段对对象数组进行排序,然后按字母顺序排序

按首字母顺序按字母顺序对对象进行排序和分组

如何对字符串和整数值,具有字母顺序和“反向”-字母顺序的多个属性的数组进行排序

如何按字母顺序对由逗号分隔的字符串进行排序,并按成员的姓氏按字母顺序进行排序?

如何使用基于域的列表按字母顺序对字符串数组进行排序

当属性为字符串时,如何按属性从左到右的顺序对对象数组进行排序?

如何按字母顺序对记录名称为:字符串字段的记录数组进行排序?

如何按字母顺序对字符串数组进行排序并防止c中的突变

按字母顺序对C字符串数组进行排序

如何在R中按字母顺序对名称字符串进行排序?

按字符串值对对象数组进行排序

按字符串属性对对象列表进行排序

通过包含字符串对对象数组进行排序

根据Typescript中的字符串属性对对象数组进行排序

如何根据特定字母对对象数组进行排序?

使用包含数字的字符串名称参数对对象数组进行排序