TypeScript与Angular5：如何截取数组仅显示前5个元素

首先先提一下你的JSON数据有个小语法问题："type": "aaa"后面缺少逗号，得先修复这个才能正常解析哦！

接下来分几种常见场景给你解决方案：

一、原生JavaScript处理（适合纯前端渲染） #

假设你已经把JSON字符串解析成了JavaScript对象，我们可以用数组的slice()方法直接截取前5个元素，或者先过滤出包含risk属性的元素再截取：

1. 直接截取values数组的前5个元素（不管元素是否包含risk） #

// 解析修复语法错误后的JSON字符串
const jsonData = '[ { "type": "aaa", "values": [ { "risk": "A" }, { "risk": "Q" }, { "risk": "M" }, { "risk": "New Filters Reports" }, { "name": "U" }, { "risk": "U" }, { "risk": "U" } ] } ]';
const data = JSON.parse(jsonData)[0];

// 截取前5个values元素
const limitedValues = data.values.slice(0, 5);

2. 先过滤出带risk属性的元素，再取前5个 #

如果只想保留有risk字段的条目，先使用filter()过滤，再截取：

const filteredLimitedValues = data.values
  .filter(item => 'risk' in item) // 只保留包含risk属性的元素
  .slice(0, 5); // 取前5个

渲染到HTML中 #

拿到处理后的数组后，就可以动态创建DOM元素渲染了：

// 获取页面上的容器元素
const container = document.getElementById('risk-list');

// 遍历处理后的数组，生成内容
limitedValues.forEach(item => {
  const listItem = document.createElement('li');
  // 显示risk值，没有的话可以显示提示文本
  listItem.textContent = item.risk || '无风险标识';
  container.appendChild(listItem);
});

二、使用模板引擎（比如Handlebars） #

如果项目里用了模板引擎，可以直接在模板里处理数组截取，以Handlebars为例：

首先需要注册一个slice辅助函数（如果引擎没有内置的话）：

Handlebars.registerHelper('slice', function(array, start, end) {
  return array.slice(start, end);
});

然后在模板里使用：

<ul id="risk-list">
  {{#each (slice this.values 0 5)}}
    <li>{{risk}}</li>
  {{/each}}
</ul>

渲染模板时传入解析后的data对象即可。

注意事项 #

• slice(start, end)方法是不会修改原数组的，它会返回一个新的截取后的数组，所以不用担心原数据被破坏。
• 如果你的values数组长度不足5，slice()会自动返回整个数组，不会报错。

内容的提问来源于stack exchange，提问作者Anna