新拿到的一个笔试题/** 要求 : 页面默认展示一个按钮，按钮填充文字为 : "生成一个没有重复姓氏的列表"; 点击[生

/**

要求 :
1. 页面默认展示一个按钮，按钮填充文字为 : "生成一个没有重复姓氏的列表";
1. 点击[生成一个没有重复姓氏的列表]按钮之后页面展示一个带序号（1开始）的不重复的姓氏列表，且按钮文案变为 "生成一个自我介绍";
1 : 赵。
2 : 钱。
......
1. 点击[生成一个自我介绍]按钮，需要将数据转化为 [{ firstName: '赵', age: 50 }] 数组格式,
有多少个姓氏就生成多少条数据，其中age字段取50~80的随机数，且不能重复，需要根据age字段对
数据进行排序;
1. 将处理好的数据以列表形式展示在页面,每条形式为 :
1 : 我姓赵，今年51岁。
2 : 我姓钱呢，今年52岁。
.....

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 按钮位置 -->
  <button id="btn">生成一个没有重复姓氏的列表</button>

  <!-- 列表展示位置 -->
  <ul id="panel"></ul>
</body>

<script>
  /**
   * 要求 :
   * 1. 页面默认展示一个按钮，按钮填充文字为 : "生成一个没有重复姓氏的列表";
   * 2. 点击[生成一个没有重复姓氏的列表]按钮之后页面展示一个带序号（1开始）的不重复的姓氏列表，且按钮文案变为 "生成一个自我介绍";
   *    1 : 赵。
   *    2 : 钱。
   *    ......
   * 3. 点击[生成一个自我介绍]按钮，需要将数据转化为 [{ firstName: '赵', age: 50 }] 数组格式,
   *    有多少个姓氏就生成多少条数据，其中age字段取50~80的随机数，且不能重复，需要根据age字段对
   *    数据进行排序;
   * 4. 将处理好的数据以列表形式展示在页面,每条形式为 : 
   *    1 : 我姓赵，今年51岁。
   *    2 : 我姓钱呢，今年52岁。
   *    .....
   * 
  */

  class TestJs {
    // 请在 TestJs 里编写代码

    constructor() {
      this.firstNameList = ['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '周', '吴', '郑', '王', '冯', '陈', '褚'];
    }

    randomList() {
      // 数组去重
      let theNameList = [...new Set(this.firstNameList)]
      // 创建随机数
      // let newArr = []
      // for (let i = 0; i < 10; i++) {
      //   let randomIndex = Math.floor(Math.random() * theNameList.length)
      //   newArr.push(theNameList[randomIndex])
      //   theNameList.splice(randomIndex, 1)
      // }


      theNameList.forEach((item, index) => {
        const li = document.createElement('li')
        li.innerHTML = `<span>${index + 1}</span>  <span>${item}</span>`
        document.querySelector('#panel').appendChild(li)
      })

      return theNameList
    }

    detailList(arr) {
      let intro = arr.map(item => {
        return { firstName: item, age: Math.floor(Math.random() * 30 + 51) }
      })

      const ul = document.querySelector('#panel')
      ul.innerHTML = ''
      intro.sort((a,b)=>a.age-b.age).forEach((item) => {
        const li = document.createElement('li')
        li.innerHTML = `<span>我姓 ${item.firstName} </span>  <span>今年${item.age}岁</span>`
        ul.appendChild(li)
      })

    }
  }

  let nameList = []
  let flag = true

  document.querySelector('#btn').addEventListener('click', function () {
    if(!flag) return
    const test = new TestJs()
    if (nameList.length > 0) {
      test.detailList(nameList)
      flag = false
      return
    }
    nameList = test.randomList()
    this.innerHTML = '生成一个自我介绍'
  })

</script>

</html>