2022-05-25 牛客网前端JS题目和相关知识拓展汇总(一)

一.对li中的内容排序后重新渲染

1.要求

场景描述：在一个 HTML 页面中，有一个无序列表（ul），
其中包含了一些项目（li）。每个项目都有一个文本内容和一个唯一的 ID。
你需要编写一个 JavaScript 函数来提取列表中所有项目的文本内容，并将它们按照 ID 进行排序，
然后将排序后的文本内容重新渲染回去。

2. 代码

//html
  <ul id="myList">
    <li id="item1">项目 1</li>
    <li id="item3">项目 3</li>
    <li id="item2">项目 2</li>
    <li id="item4">项目 4</li>
  </ul>

//js
    function sortAndReturnTextContent() {
      const items = document.getElementById('myList').children;
      // 在此补全代码
      // 1.分别提取ID数组和文本内容数组
      var arrId=[],arrText=[]
      for(let i in items){
        arrId.push(items[i].id);
        arrText.push(items[i].innerHTML)
      }
      // 2.简单排序
      arrId.sort();
      arrText.sort();
      // 3.将排序后的ID数组和文本内容数组重新赋回去
      for(let i in items){
        items[i].id=arrId[i],
        items[i].innerHTML=arrText[i];
      }
    }
    sortAndReturnTextContent()

3.效果

二.渲染出直角三角形

  var ul=document.querySelector("ul");
  var str="";
  for(var i=1;i<=3;i++){//i=1,2,3,三行
    for(var j=0;j<i;j++){//j==>0,0~1,0~2,每行数量分别为1,2,3
      str+="*"
    }
    str+=`<br/>`
  }
  ul.innerHTML=str;

三.以字符串形式返回文件名的拓展名

// 返回".js"或者".vue"
const _getExFilename = (filename) => {
    // 补全代码
    let arr=filename.split(".");//[index,html]
    let name=arr[arr.length-1];//html
    return "."+name;//.html
    
}
console.log(_getExFilename("index.html"));

四.给数字参数添加千分位分隔符后返回

1.要求

示例

输入：_comma(12300)
输出：'12,300'

2.代码