作者：©Iaine 万一
简介：30 Day Challenge是 Wes Bos 设计的一个 30 天原生js编程挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。

本项目为第17天的“去除冠词排序”项目。Have fun with the website! ♪(^∇^*)

网页效果： https://janice143.github.io/sortWithoutArticles/

项目描述

本项目首先给定了一个内容为band名字的列表bands，在JS中，对列表进行特殊的排序操作，得到新的列表最终以列表的形式显示到网页中。

其中特殊的排序操作，具体来说，是先去除列表元素中”a, an, the”的前缀，然后按照字母排序。排序的列表还是原列表，无需使列表元素去除特定前缀。

项目重点

  • 字符串的一些方法

    • String.prototype.replace()
    • String.prototype.trim()

  • 数组的一些方法

    • Array.prototype.sort()

  • 正则表达式

    • /^(a |the |an )/i

项目过程

HTML部分

  • id 属性为bands的ul元素，列表内容在JS中添加

JS部分

  • 首先提供一个已知列表bands

  • 将列表bands内容显示到网页中

    1
    document.querySelector('#bands').innerHTML = bands.map(band => `<li>${band}</li>`).join('');

  • 显示已经实现，下一步我们需要对bands进行一些操作，得到的新列表再按照上述方法显示到网页中。注意：无需对原列表bands进行操作，也就是不用改变bands的值

    • 去除前缀

      1
      2
      3
      function strip(bandName){
          return bandName.replace(/^(a |the |an )/i,'').trim();
      }

    • 排序

      1
      2
      3
      4
      5
      const sortedBands = bands.sort(
          function(a,b){
              return strip(a) > strip(b) ? 1 : -1
          }
      )

程序写到这里就已经ok啦！本项目需要注意的是最后显示的内容还是原bands中的元素，但是排序方式要求去掉前缀后排序。

如果项目要求最后显示的内容是去除前缀的元素，那么下面的程序提供了一个实现思路：

  • 去除前缀

    1
    2
    3
    4
    5
    6
    // 先将bands元素中开头为a|the|an的去掉前缀，返回新的bands
    function newBands(bands){
        return bands.map(band => {
            return band.replace(/^(a |the |an )/i,'').trim();        
        })
    }

  • 排序

    1
    const sortedBands = newBands(bands).sort()

项目补充

String.prototype.replace()

replace(pattern,replacement) 方法返回一个新字符串，该字符串由replacement替换部分或所有的pattern匹配项后的新字符串。

pattern可以是一个字符串或者一个正则表达式，replacement可以是一个字符串或者一个每次匹配都要调用的回调函数。

如果pattern是字符串，则仅替换第一个匹配项。

原字符串不会改变。

语法
1
str.replace(regexp|substr, newSubStr|function)

String.prototype.trim()

从一个字符串的两端删除所有空白字符。

Array.prototype.sort()

1
arr.sort([compareFunction])

主要讲讲有compareFunction的情况，该函数具有两个参数a,b。

  • 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；

  • 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。

  • 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。

例如比较数字，compareFunction函数可以简单的以 a 减 b，如下的函数将会将数组升序排列

1
2
3
4
5
6
7
function compareNumbers(a, b) {
  return a - b;
}
// 也可以这样些
function compareNumbers(a, b) {
  return a > b ? 1 : -1;
}

正则表达式的特殊字符 ^

匹配输入的开始。如果多行标志被设置为 true，那么也匹配换行符后紧跟的位置。

例如，/^A/ 并不会匹配 “an A” 中的 ‘A’，但是会匹配 “An E” 中的 ‘A’。

参考博客

  1. 正则表达式中的特殊字符

JS30的第17个项目圆满完成啦，感谢阅读，有问题联系我的邮箱1803105538@qq.com.

License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

Share

快来参与讨论吧~