标题列表-分组和创建首字母

<div id="title-list">
  <ul id="grouped-titles"></ul>
  <ul id="alphabetical-titles"></ul>
</div>

// 假设titles是一个包含所有标题的数组
var titles = ["Apple", "Banana", "Cat", "Dog", "Elephant", "Fish", "Giraffe"];

// 创建分组和首字母列表
var groupedTitles = {};
var alphabeticalTitles = [];

titles.forEach(function(title) {
  var firstLetter = title.charAt(0).toUpperCase();
  
  if (!groupedTitles[firstLetter]) {
    groupedTitles[firstLetter] = [];
  }
  
  groupedTitles[firstLetter].push(title);
  alphabeticalTitles.push(title);
});

// 对分组和首字母列表进行排序
var sortedGroupedTitles = {};
var sortedAlphabeticalTitles = alphabeticalTitles.sort();

Object.keys(groupedTitles).sort().forEach(function(letter) {
  sortedGroupedTitles[letter] = groupedTitles[letter].sort();
});

// 将分组和首字母列表渲染到页面上
var groupedTitlesElement = document.getElementById("grouped-titles");
var alphabeticalTitlesElement = document.getElementById("alphabetical-titles");

Object.keys(sortedGroupedTitles).forEach(function(letter) {
  var group = sortedGroupedTitles[letter];
  
  var groupElement = document.createElement("li");
  groupElement.innerHTML = "<strong>" + letter + "</strong>";
  
  group.forEach(function(title) {
    var titleElement = document.createElement("li");
    titleElement.textContent = title;
    groupElement.appendChild(titleElement);
  });
  
  groupedTitlesElement.appendChild(groupElement);
});

sortedAlphabeticalTitles.forEach(function(title) {
  var titleElement = document.createElement("li");
  titleElement.textContent = title;
  alphabeticalTitlesElement.appendChild(titleElement);
});