Skip to content

Commit b643d96

Browse files
dashnowordssoyaine
dashnowords
authored and
soyaine
committed
完成了day17的练习，麻烦review一下 (soyaine#21)
* try to finish the work of day16 * modify some details to improve the performance of readme.md as asked * finish the work of day17
1 parent b85c3ff commit b643d96

File tree

6 files changed

+241
-0
lines changed

6 files changed

+241
-0
lines changed

‎day17-SortWithoutArticles/README.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# 17 数组的去前缀排序
2+
3+
> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Web Developer
4+
5+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 17 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
6+
7+
> 创建时间：2017-08-23
8+
最后更新：2017-08-24
9+
10+
## 挑战任务
11+
初始文件`index-start.html`中提供了一个无序列表元素，并在`script`标签中提供了一个字符串数组。请为这些字符串排序，要求去除字符串中的`The`，`A`以及`An`的前缀后再进行排序，并把排序后的结果作为列表项展示在无序列表中。
12+
13+
## 实现效果
14+
![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/day17-SortWithoutArticles/effects.png)
15+
16+
## 基本思路
17+
1.基本的编程任务有两个要点，即**排序**和**展示**;<br>
18+
2.数组排序部分最外层即为`Array.sort(arr)`函数，内层实现具体排序规则;<br>
19+
3.展示部分即将排列好的新数组拼接成带有标签的HTML元素，然后一次性插入到列表中。
20+
21+
## 过程指南(以非ES6版本为例)
22+
1.声明去前缀函数，使用`String.replace()`函数实现，第一参数使用字面量正则表达式。
23+
```js
24+
function delPrefix(item){
25+
return item.replace(/^(The|A|An)\s{1}/,'');
26+
}
27+
```
28+
2.使用`Array.sort()`对数组进行排序，将数组中逐项使用`delPrefix()`去掉前缀后再进行对比。
29+
```js
30+
var sortedbands = bands.sort(function(a,b){
31+
return delPrefix(a) > delPrefix(b) ? 1 : -1;
32+
});
33+
```
34+
3.使用选择器选中无序列表`#bands`，将排序后的数组作为列表项插入其中。
35+
```js
36+
document.getElementById('bands').innerHTML = '<li>'+arr.join('</li><li>')+'</li>';
37+
```
38+
39+
## 细节知识点
40+
1.`Array.prototype.sort(*param*)`方法虽然有返回值，但排序结果也影响原数组，在非ES6版本的代码中，我们使用了指向原数组的变量`bands`,而在ES6版本的代码中将排序后的结果赋值给了新的变量sortedbands，从结果可以看出，两者达到了相同的目的。
41+
42+
2.在ES6版本的代码结尾处，我们修改原数组`bands`中的第一项，并在控制台打印出排序后的数组`sortedbands`，从结果可以看出`sortedbands`也受到了影响，由此可以看出`Array.prototype.sort()`函数只是返回了一个指向原数组的引用，而并没有生成新的数组。

‎day17-SortWithoutArticles/effects.png

852 KB
Loading

‎day17-SortWithoutArticles/index-finished-Dashrun-es5.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Sort Without Articles-es5</title>
6+
</head>
7+
<body>
8+
9+
<style>
10+
body {
11+
margin: 0;
12+
font-family: sans-serif;
13+
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
14+
background-size: cover;
15+
display: flex;
16+
align-items: center;
17+
min-height: 100vh;
18+
}
19+
20+
#bands {
21+
list-style: inside square;
22+
font-size: 20px;
23+
background: white;
24+
width: 500px;
25+
margin: auto;
26+
padding: 0;
27+
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
28+
}
29+
#bands li {
30+
border-bottom: 1px solid #efefef;
31+
padding: 20px;
32+
}
33+
#bands li:last-child {
34+
border-bottom: 0;
35+
}
36+
37+
a {
38+
color: #ffc600;
39+
text-decoration: none;
40+
}
41+
42+
</style>
43+
44+
<ul id="bands"></ul>
45+
46+
<script>
47+
//当前版本未使用ES6新语法
48+
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'];
49+
50+
//去前缀函数
51+
function delPrefix(item){
52+
return item.replace(/^(The|A|An)\s{1}/,'');
53+
}
54+
55+
//展示至HTML页面
56+
function displayArray(arr){
57+
/*
58+
*此处使用document.createElement()及appendChild()可达到相同的，
59+
*本例中采用的方法减少了更改DOM现场的次数，可以提高性能
60+
*/
61+
document.getElementById('bands').innerHTML = '<li>'+arr.join('</li><li>')+'</li>';
62+
}
63+
64+
//按要求排序
65+
bands.sort(function(a,b){
66+
return delPrefix(a) > delPrefix(b) ? 1 : -1;
67+
});
68+
69+
displayArray(bands);
70+
71+
</script>
72+
73+
</body>
74+
</html>

‎day17-SortWithoutArticles/index-finished-Dashrun-es6.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Sort Without Articles-es6</title>
6+
</head>
7+
<body>
8+
9+
<style>
10+
body {
11+
margin: 0;
12+
font-family: sans-serif;
13+
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
14+
background-size: cover;
15+
display: flex;
16+
align-items: center;
17+
min-height: 100vh;
18+
}
19+
20+
#bands {
21+
list-style: inside square;
22+
font-size: 20px;
23+
background: white;
24+
width: 500px;
25+
margin: auto;
26+
padding: 0;
27+
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
28+
}
29+
#bands li {
30+
border-bottom: 1px solid #efefef;
31+
padding: 20px;
32+
}
33+
#bands li:last-child {
34+
border-bottom: 0;
35+
}
36+
37+
a {
38+
color: #ffc600;
39+
text-decoration: none;
40+
}
41+
42+
</style>
43+
44+
<ul id="bands"></ul>
45+
46+
<script>
47+
//当前文件使用部分ES6新特性
48+
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'];
49+
50+
//去前缀函数
51+
const delPrefix = item => item.replace(/^(The|A|An)\s{1}/,'');
52+
53+
//数组排序
54+
const sortedbands = bands.sort((a,b) => delPrefix(a) > delPrefix(b) ? 1 : -1);
55+
56+
//展示至HTML页面
57+
document.querySelector('#bands').innerHTML = '<li>'+sortedbands.join('</li><li>')+'</li>';
58+
59+
//测试Array.prototype.sort()的返回值
60+
bands[0]='I love javascript30!';
61+
console.log(sortedbands);
62+
63+
</script>
64+
65+
</body>
66+
</html>

‎day17-SortWithoutArticles/index-start.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Sort Without Articles</title>
6+
</head>
7+
<body>
8+
9+
<style>
10+
body {
11+
margin: 0;
12+
font-family: sans-serif;
13+
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
14+
background-size: cover;
15+
display: flex;
16+
align-items: center;
17+
min-height: 100vh;
18+
}
19+
20+
#bands {
21+
list-style: inside square;
22+
font-size: 20px;
23+
background: white;
24+
width: 500px;
25+
margin: auto;
26+
padding: 0;
27+
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
28+
}
29+
#bands li {
30+
border-bottom: 1px solid #efefef;
31+
padding: 20px;
32+
}
33+
#bands li:last-child {
34+
border-bottom: 0;
35+
}
36+
37+
a {
38+
color: #ffc600;
39+
text-decoration: none;
40+
}
41+
42+
</style>
43+
44+
<ul id="bands"></ul>
45+
46+
<script>
47+
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'];
48+
49+
50+
</script>
51+
52+
</body>
53+
</html>

‎day17-SortWithoutArticles/style.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@charset "UTF-8";
2+
/**
3+
* @dashrun (@389399428@qq.com)
4+
* @date 2017-08-20
5+
* @version $1.0
6+
*/

0 commit comments

Comments
 (0)