根据属性值限制数组中的对象答案

【问题标题】：Limit objects in array based on property value根据属性值限制数组中的对象
【发布时间】：2018-10-29 14:04:00
【问题描述】：

我有一个如下所示的数组。我需要将ord:1 的数组中的对象数限制为5。如何根据ord 属性限制数组中的对象数？

[{"id":"typeahead-86-4951-option-0","label":"Spigen Samsung GS5 
  Case","model":{"ord":1,"short_description":"Samsung Galaxy S5"}},
 {"id":"typeahead-86-4951-option-1","label":"Spigen iPhone 5/5s 
  Case","model":{"ord":1,"short_description":"iPhone 5 and 5s"}},
 {"id":"typeahead-86-4951-option-2","label":"Earphones","model": 
  {"ord":1,"short_description":"Buy earphones"}},
 {"id":"typeahead-86-4951-option-5","label":"Web Conferencing","model": 
  {"ord":1,"short_description":"Request"}},
 {"id":"typeahead-86-4951-option-6","label":"Dreamweaver","model": 
  {"ord":1,"short_description":null}},
 {"id":"typeahead-86-4951-option-7","label":"SSL Certification","model": 
  {"ord":1,"short_description":"Do you need to update"}},
 {"id":"typeahead-86-4951-option-8","label":"Access","model": 
  {"ord":1,"short_description":"Microsoft Access"}},
 {"id":"typeahead-86-4951-option-9","label":"Fireworks","model": 
  {"ord":1,"short_description":"Adobe Systems Fireworks"}},
 {"id":"typeahead-86-4951-option-10","label":"Spigen iPhone 6 Case","model": 
  {"ord":1,"short_description":"For iPhone 6"}},
 {"id":"typeahead-86-4951-option-11","label":"What is a cookie? 
  \t\t","model":{"ord":4,"short_description":"What is a cookie?\t\t"}},
 {"id":"typeahead-86-4951-option-12","label":"What are phishing scams and 
  how can I avoid them?\n\t\t","model":{"ord":4,"short_description":"What 
  are phishing"}},
 {"id":"typeahead-86-4951-option-13","label":"How to Deal with 
  Spam","model":{"ord":4,"short_description":"How to Deal with Spam"}},
 {"id":"typeahead-86-4951-option-14","label":"What is Spam?","model": 
  {"ord":4,"short_description":"What is Spam?}},
 {"id":"typeahead-86-4951-option-15","label":"How to set\n\t\t","model": 
  {"ord":4,"short_description":"How\n\t\t"}}

]

【问题讨论】：

你是什么意思限制？防止添加？从太多减少？警告？
@isherwood 我将以此创建新数组，在结果数组中我需要 olly 5 个对象，其中包含 ord:1
还是不清楚。您可以通过格式化上述内容来帮助人们，以便使用在线 JSON 格式化程序对其进行读取。您还可以包含预期结果的示例。
您的脚本无效，它包含未终止的字符串。

标签： javascript arrays

【解决方案1】：

您可以使用 ord 值作为键创建字典并在其中存储最多 5 个项目。
最后只需连接字典中的所有数组。

let input = [{
      "id": "typeahead-86-4951-option-0",
      "label": "Spigen Samsung GS5 Case",
      "model": {
        "ord": 1,
        "short_description": "Samsung Galaxy S5"
      }
    }, {
      "id": "typeahead-86-4951-option-1",
      "label": "Spigen iPhone 5/5s Case",
      "model": {
        "ord": 1,
        "short_description": "iPhone 5 and 5s"
      }
    },
    {
      "id": "typeahead-86-4951-option-2",
      "label": "Earphones",
      "model": {
        "ord": 1,
        "short_description": "Buy earphones"
      }
    },
    {
      "id": "typeahead-86-4951-option-5",
      "label": "Web Conferencing",
      "model": {
        "ord": 1,
        "short_description": "Request"
      }
    },
    {
      "id": "typeahead-86-4951-option-6",
      "label": "Dreamweaver",
      "model": {
        "ord": 1,
        "short_description": null
      }
    },
    {
      "id": "typeahead-86-4951-option-7",
      "label": "SSL Certification",
      "model": {
        "ord": 1,
        "short_description": "Do you need to update"
      }
    },
    {
      "id": "typeahead-86-4951-option-8",
      "label": "Access",
      "model": {
        "ord": 1,
        "short_description": "Microsoft Access"
      }
    },
    {
      "id": "typeahead-86-4951-option-9",
      "label": "Fireworks",
      "model": {
        "ord": 1,
        "short_description": "Adobe Systems Fireworks"
      }
    },
    {
      "id": "typeahead-86-4951-option-10",
      "label": "Spigen iPhone 6 Case",
      "model": {
        "ord": 1,
        "short_description": "For iPhone 6"
      }
    },
    {
      "id": "typeahead-86-4951-option-11",
      "label": "What is a cookie?\t\t",
      "model": {
        "ord": 4,
        "short_description": "What is a cookie?\t\t"
      }
    },
    {
      "id": "typeahead-86-4951-option-12",
      "label": "What are phishing scams and how can I avoid them?\n\t\t",
      "model": {
        "ord": 4,
        "short_description": "What are phishing"
      }
    },
    {
      "id": "typeahead-86-4951-option-13",
      "label": "How to Deal with Spam",
      "model": {
        "ord": 4,
        "short_description": "How to Deal with Spam"
      }
    },
    {
      "id": "typeahead-86-4951-option-14",
      "label": "What is Spam?",
      "model": {
        "ord": 4,
        "short_description": "What is Spam?"
      }
    },
    {
      "id": "typeahead-86-4951-option-15",
      "label": "How to set\n\t\t",
      "model": {
        "ord": 4,
        "short_description": "How\n\t\t"
      }
    }
  ],
  ordObj;

ordObj = input.reduce(function(acc, el) {
  let ord = el.model.ord;
  if (!acc.hasOwnProperty(ord)) {
    acc[ord] = [];
  }
  if (acc[ord].length < 5) {
    acc[ord].push(el);
  }
  return acc;
}, {});

let result = Object.values(ordObj).reduce((acc, el) => (acc.concat(el)), []);

console.log(result);

【讨论】：

【解决方案2】：

您可以使用这样的小循环，计算您保留了多少 "ord":1，并在 5 后停止：

let input = [
	{"id":"typeahead-86-4951-option-0","label":"Spigen Samsung GS5 Case","model":{"ord":1,"short_description":"Samsung Galaxy S5"}}, {"id":"typeahead-86-4951-option-1","label":"Spigen iPhone 5/5s Case","model":{"ord":1,"short_description":"iPhone 5 and 5s"}},
	{"id":"typeahead-86-4951-option-2","label":"Earphones","model": {"ord":1,"short_description":"Buy earphones"}},
	{"id":"typeahead-86-4951-option-5","label":"Web Conferencing","model": {"ord":1,"short_description":"Request"}},
	{"id":"typeahead-86-4951-option-6","label":"Dreamweaver","model": {"ord":1,"short_description":null}},
	{"id":"typeahead-86-4951-option-7","label":"SSL Certification","model":{"ord":1,"short_description":"Do you need to update"}},
	{"id":"typeahead-86-4951-option-8","label":"Access","model": {"ord":1,"short_description":"Microsoft Access"}},
	{"id":"typeahead-86-4951-option-9","label":"Fireworks","model": {"ord":1,"short_description":"Adobe Systems Fireworks"}},
	{"id":"typeahead-86-4951-option-10","label":"Spigen iPhone 6 Case","model": {"ord":1,"short_description":"For iPhone 6"}},
	{"id":"typeahead-86-4951-option-11","label":"What is a cookie?\t\t","model":{"ord":4,"short_description":"What is a cookie?\t\t"}},
	{"id":"typeahead-86-4951-option-12","label":"What are phishing scams and how can I avoid them?\n\t\t","model": {"ord":4,"short_description":"What are phishing"}},
	{"id":"typeahead-86-4951-option-13","label":"How to Deal with Spam","model":{"ord":4,"short_description":"How to Deal with Spam"}},
	{"id":"typeahead-86-4951-option-14","label":"What is Spam?","model": {"ord":4,"short_description":"What is Spam?"}},
	{"id":"typeahead-86-4951-option-15","label":"How to set\n\t\t","model": {"ord":4,"short_description":"How\n\t\t"}}
],
	output = [],
	count = 0;
   
input.forEach( obj => {
  if(obj.model.ord===1){
    if(count>=5) return
    count++
  }
 output.push(obj)
})

console.log("Count before : " + input.filter(o=>o.model.ord===1).length )
console.log("Count after : " + output.filter(o=>o.model.ord===1).length )

【讨论】：

【解决方案3】：

为了达到预期的效果，使用过滤方法过滤掉顺序：1条记录和切片数组方法得到前5个

let final = arr.filter(v => v.model.ord === 1).slice(0, 5);

codepen - https://codepen.io/nagasai/pen/NOmXar?editors=1010

let arr = [{"id":"typeahead-86-4951-option-0","label":"Spigen Samsung GS5 Case","model":{"ord":1,"short_description":"Samsung Galaxy S5"}},
 {"id":"typeahead-86-4951-option-1","label":"Spigen iPhone 5/5s Case","model":{"ord":1,"short_description":"iPhone 5 and 5s"}},
 {"id":"typeahead-86-4951-option-2","label":"Earphones","model": 
  {"ord":1,"short_description":"Buy earphones"}},
 {"id":"typeahead-86-4951-option-5","label":"Web Conferencing","model": 
  {"ord":1,"short_description":"Request"}},
 {"id":"typeahead-86-4951-option-6","label":"Dreamweaver","model": 
  {"ord":1,"short_description":null}},
 {"id":"typeahead-86-4951-option-7","label":"SSL Certification","model": 
  {"ord":1,"short_description":"Do you need to update"}},
 {"id":"typeahead-86-4951-option-8","label":"Access","model": 
  {"ord":1,"short_description":"Microsoft Access"}},
 {"id":"typeahead-86-4951-option-9","label":"Fireworks","model": 
  {"ord":1,"short_description":"Adobe Systems Fireworks"}},
 {"id":"typeahead-86-4951-option-10","label":"Spigen iPhone 6 Case","model": 
  {"ord":1,"short_description":"For iPhone 6"}},
 {"id":"typeahead-86-4951-option-11","label":"What is a cookie? \t\t","model":{"ord":4,"short_description":"What is a cookie?\t\t"}},
 {"id":"typeahead-86-4951-option-12","label":"What are phishing scams and how can I avoid them?\n\t\t","model":{"ord":4,"short_description":"What are phishing"}},
 {"id":"typeahead-86-4951-option-13","label":"How to Deal with Spam","model":{"ord":4,"short_description":"How to Deal with Spam"}},
 {"id":"typeahead-86-4951-option-14","label":"What is Spam?","model": {"ord":4,"short_description":"What is Spam?"}},
 {"id":"typeahead-86-4951-option-15","label":"How to set\n\t\t","model": {"ord":4,"short_description":"How\n\t\t"}}]
  

let final = arr.filter(v => v.model.ord === 1).slice(0, 5);

console.log(final)

【讨论】：

并非数组中的所有对象都包含"ord":1。你删除了很多 OP 想要保留的东西。

【解决方案4】：

您可以创建类似于我在下面的 tracker 的内容。使用该变量来保持ord 的项目计数。在下面的示例中，我在下面的原始数据数组中使用Array.prototype.filter。每次回调遇到 ord 属性等于 5 的数组元素时，tracker 计数就会增加。如果计数小于 5，我们可以将其添加到我们的新数组中，如果不是，则跳过它。

var tracker = (function(i) {
  var c = i;
  return {
    value: () => c,
    increment: () => c += 1,
    decrement: () => c -= 1
  }
})(0);
var data = [{
  id: 'item0',
  ord: 1
}, {
  id: 'item1',
  ord: 1
}, {
  id: 'item2',
  ord: 1
}, {
  id: 'item3',
  ord: 1
}, {
  id: 'item4',
  ord: 1
}, {
  id: 'item5',
  ord: 1
}, {
  id: 'item6',
  ord: 1
}, {
  id: 'item7',
  ord: 1
}, {
  id: 'item8',
  ord: 1
}, {
  id: 'item9',
  ord: 2
}, {
  id: 'item10',
  ord: 2
}, {
  id: 'item11',
  ord: 2
}, {
  id: 'item12',
  ord: 2
}];
var limited = data.filter(el => {
  if (el.ord === 1) {
    tracker.increment();
    if (tracker.value() < 6) {
      return true;
    }
    return false;
  }
  return true;
});
console.log(limited);

【讨论】：