一个题目教会你渲染数组到页面

给定一个字符串数组，让字母按顺序排列，并将在网页上渲染排列效果

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <ul id="bands"></ul>
    
    <script>
        // 将bards渲染到ul中，以除了The A An 这些开头的单词排序
        
        const bands =[
    'The Plot in You', 
    'The Devil Wears Prada',
    'Pierce the Veil',
    'Norma Jean',
    'The Bled',
    'Say Anything',
    'The Midway State',
    'We Came as Romans',
    'Counterparts',
    'Oh, Sleeper',
    'A Skylit Drive',   
    'Anywhere But Here',
    'An Old Dog'
]
/*
- 把每个item的有The|a|An 的去掉，留下余下的
    - 遍历每个元素 做一个操作，并返回
    - stripThe 去除The|a|An
- 排序
    - sort  assc 
- 渲染列表
    - innerHtml+= */

const sortedBands = bands.concat().sort()
// console.log(sortedBands);
document.querySelector('#bands').innerHTML=
sortedBands
   .map(band => `<li>${band}</li>`)
   .join('')
    </script>
</body>
</html>

css 复制代码

body {
  margin: 0;
  font-family: sans-serif;
  background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
  min-height: 100vh;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
}
#bands {
  list-style: inside square;
  font-size: 20px;
  background: #fff;
  width: 500px;
  margin: auto;
  padding: 0;
  box-shadow: 0 0 0 20px rgba(0,0,0,0.05);
}
#bands li {
  border-bottom: 1px solid #008000;
  padding: 20px;
}
#bands li:last-child {  //和li同级的最后一个元素
  border-bottom: 0;
}

对上方函数不懂可以看看juejin.cn/post/730379...

sort函数：sort函数是数组的原生方法，用于对数组元素进行排序。然而，sort函数具有副作用，即会改变原数组的顺序。如果我们想要使用sort函数但又不希望影响原数组，可以使用浅拷贝来创建一个新的数组，然后对新数组进行排序。

javascriptCopy 复制代码

const arr = [3, 1, 2];
const sortedArr = [...arr].sort();
console.log(sortedArr); // [1, 2, 3]
console.log(arr); // [3, 1, 2]

sortArr函数：在编写函数时，尽量避免修改外界传入的实参。这样可以避免多人协作时造成的误解和不必要的副作用。相反，我们应该编写纯函数，即函数的输出仅由输入参数决定，不依赖于外部状态。如果需要对数组进行排序，并返回排序后的结果，可以使用sort函数的方法来实现。

javascriptCopy 复制代码

function sortArr(nums) {
  return [...nums].sort();
}

const arr = [3, 1, 2];
const sortedArr = sortArr(arr);
console.log(sortedArr); // [1, 2, 3]
console.log(arr); // [3, 1, 2]

数组渲染ul列表：在前端开发中，我们经常需要将数组中的数据渲染到页面上。使用map方法可以方便地将数组转化为另一个数组，并对每个元素进行处理。在渲染ul列表时，我们可以使用map方法将数据数组转化为li字符串数组，然后使用join方法将字符串数组连接成一个完整的HTML片段。

javascriptCopy 复制代码

const bands = ['asdasd', 'asdadad'];
const html = bands.map(item => `<li>${item}</li>`).join('');
document.querySelector('#bands').innerHTML = html;

当编写函数时，我们可以遵循覆盖99%的case、使用浅拷贝、编写纯函数等原则，以提高代码的可靠性和可维护性。同时，在数组渲染时，可以利用map和join方法来简化操作，使代码更加清晰和易读。