17 数组的去前缀排序

本篇作者：©大史快跑Dashrun——Chinasoft Frontend Web Developer

简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 17 篇。完整指南在 GitHub，喜欢请 Star 哦♪(^∇^*)

创建时间：2017-08-23
最后更新：2017-08-24

挑战任务

初始文件index-start.html中提供了一个无序列表元素，并在script标签中提供了一个字符串数组。请为这些字符串排序，要求去除字符串中的The，A以及An的前缀后再进行排序，并把排序后的结果作为列表项展示在无序列表中。

实现效果

结果展示

基本思路

1.基本的编程任务有两个要点，即排序和展示;

2.数组排序部分最外层即为Array.sort(arr)函数，内层实现具体排序规则;

3.展示部分即将排列好的新数组拼接成带有标签的HTML元素，然后一次性插入到列表中。

过程指南(以非ES6版本为例)

1.声明去前缀函数，使用String.replace()函数实现，第一参数使用字面量正则表达式。

  1. function delPrefix(item){
  2.     return item.replace(/^(The|A|An)\s{1}/,'');
  3. }

2.使用Array.sort()对数组进行排序，将数组中逐项使用delPrefix()去掉前缀后再进行对比。

  1. var sortedbands = bands.sort(function(a,b){
  2.     return delPrefix(a) > delPrefix(b) ? 1 : -1;
  3. });

3.使用选择器选中无序列表#bands，将排序后的数组作为列表项插入其中。

  1.  document.getElementById('bands').innerHTML = '<li>'+arr.join('</li><li>')+'</li>';

细节知识点

1.Array.prototype.sort(*param*)方法虽然有返回值，但排序结果也影响原数组，在非ES6版本的代码中，我们使用了指向原数组的变量bands,而在ES6版本的代码中将排序后的结果赋值给了新的变量sortedbands，从结果可以看出，两者达到了相同的目的。

2.在ES6版本的代码结尾处，我们修改原数组bands中的第一项，并在控制台打印出排序后的数组sortedbands，从结果可以看出sortedbands也受到了影响，由此可以看出Array.prototype.sort()函数只是返回了一个指向原数组的引用，而并没有生成新的数组。