Skip to content

Commit 7dfdf57

Browse files
soyainesoyaine
committed
complete challenge and the guide
1 parent 40eeb91 commit 7dfdf57

File tree

7 files changed

+277
-12
lines changed

7 files changed

+277
-12
lines changed

‎04 - Array Cardio Day 1/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 04 Array Cardio 💪 指南
1+
# 04 Array Cardio 💪 指南一
22

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

‎06 - Type Ahead/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,8 @@ arr1.push(...arr2);
132132

133133
获取到了数据之后，如何匹配输入值呢？就要利用正则表达式了。正则表达式的 `match()` 可以执行一个匹配操作，我们再结合 `Array.filter()` 便能筛出整个数组中，满足条件的项，再经过字符串处理即可输出到页面。
134134

135-
> 这篇我写了很久也写不满意，如果你能读到这里，说明你对实现的效果有兴趣，如果你觉得有什么地方我写得不清楚，或者我遗漏了什么，请告诉我。我一直在思考和调整，用什么样的方式去写会比较容易看懂，万分期待和感恩能有读者反馈 soyaine1@gmail。
135+
> 这篇我写了很久也写不满意，如果你能读到这里，说明你对实现的效果有兴趣，如果你觉得有什么地方我写得不清楚，或者我遗漏了什么，请告诉我。我一直在思考和调整，用什么样的方式去写会比较容易看懂，万分期待和感恩能有读者反馈 soyaine1@gmail。
136136
137137

138-
> 创建时间：2016-12-31
138+
> 创建时间：2016-12-31
139139
> 最后更新：2017-01-03

‎07 - Array Cardio Day 2/README.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
# 04 Array Cardio 💪 指南二
2+
3+
> 作者：©[缉熙Soyaine](https://github.com/soyaine)
4+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 7 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
5+
6+
## 实现效果
7+
8+
这一部分是[挑战 04 ](https://github.com/soyaine/JavaScript30/blob/master/04%20-%20Array%20Cardio%20Day%201/README.md)的后续，继续熟悉 Array 的一些基本方法，包括 `some()`、`every()`、`find()`、`splice()`、`slice()`。这篇比较简单，但如果没有看过上一篇文章，建议回去温习一下。（毕竟上一篇更酷 :）
9+
10+
文档提供了用于操作的 people 和 comments 数组，模拟的是人员信息及评论数据，基于这两个数组可以练习一下上面提及的各个方法，请打开 HTML 后在 Console 面板中查看输出结果。
11+
12+
## 过程指南
13+
14+
针对 people 数组：
15+
16+
1. 是否有人超过 19 岁？
17+
2. 是否所有人都是成年人？
18+
19+
针对 comments 数组：
20+
21+
1. 找到 ID 号为 823423 的评论
22+
2. 删除 ID 号为 823423 的评论
23+
1. 获取此 ID 对应元素在数组中所处的位置
24+
2. 利用位置，删除该子元素
25+
2. 或者拼接新的数组
26+
27+
## 相关知识
28+
29+
### [some](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some) 和 [every](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every)
30+
31+
两者的相同之处是，都接受一个函数作为参数，对数组元素都执行一次此函数，都不会改变原数组的值。不同之处在于返回条件不同：
32+
33+
`some()` 中直到某个数组元素使此函数为 `true`，就立即返回 `true`。所以可以用来判断一个数组中，是否存在某个符合条件的值。
34+
35+
```js
36+
const isAdult = people.some( person => {
37+
const currentYear = (new Date()).getFullYear();
38+
return currentYear - person.year >= 19;
39+
});
40+
console.log({isAdult});
41+
```
42+
43+
而 `every()` 中除非所有值都使此函数为 `true`，才会返回 `true` 值，否则为 `false`。主要用处，即判断是否所有元素都符合条件。
44+
45+
```js
46+
const allAdult = people.every( person => new Date().getFullYear() - person.year >= 19);
47+
console.log({allAdult});
48+
```
49+
50+
与 `some()` 相对应的话，`some()` 像是或运算，而 `every()` 则是与运算了。
51+
52+
### [find](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find) 和 [fineIndex](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
53+
54+
这两个 ES6 的新特性类似于 `some()` ，但对于符合条件的元素，返回值不是布尔类型。不一样的地方在于，`find()` 返回的是这个元素的值（或 `undefined`），而 `findIndex()` 返回的是这个元素的索引（或 `-1`）。
55+
56+
```js
57+
const comment = comments.find(comment => comment.id == 823423);
58+
const index = comments.findIndex(comment => comment.id == 823423);
59+
```
60+
61+
### [slice](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 和 [splice](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
62+
63+
这两者比较相似的地方，大概只有：参数的第一个都是指的起始位置，且都接受负数，若是负数，代表倒数第几位。
64+
65+
而其他地方是需要区分清楚的：
66+
67+
- `slice()`：不修改原数组，按照参数复制一个新数组，参数表述复制的起点和终点索引（省略则代表到末尾），但终点索引位置的元素不包含在内。
68+
- `splice()`：原数组会被修改。第二个参数代表要删掉的元素个数，之后可选的参数，表示要替补被删除位置的元素。
69+
70+
让我们来联想一下，看到一块纹着漂亮花纹的布料，slice 拿出相机拍了一张照，而 splice 拿出剪刀把这个花纹剪下来带走了，再用其他布料给缝回去。
71+
72+
所以想要删除一个元素，有两种实现思路，一是把出它之外的元素给复制下来再合在一起，二是直接把它删除。
73+
74+
```js
75+
// 删除方法一，splice()
76+
// comments.splice(index, 1);
77+
78+
// 删除方法二，slice 拼接
79+
const newComments = [
80+
...comments.slice(0, index),
81+
...comments.slice(index + 1)
82+
];
83+
```
84+
85+
上面的三个点（`...`）是 [ES6 中的扩展语法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator)，可以展开这个数组并方便的拼接。
86+
87+
至此，数组基本操作二就结束啦~~\(≧▽≦)/~~
88+
89+
> 创建日期：2017-01-03
90+
> 最后更新：2017-01-03

‎07 - Array Cardio Day 2/index-FINISHED.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Array Cardio 💪💪</title>
6+
</head>
7+
<body>
8+
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
9+
<script>
10+
// ## Array Cardio Day 2
11+
12+
const people = [
13+
{ name: 'Wes', year: 1988 },
14+
{ name: 'Kait', year: 1986 },
15+
{ name: 'Irv', year: 1970 },
16+
{ name: 'Lux', year: 2015 },
17+
];
18+
19+
const comments = [
20+
{ text: 'Love this!', id: 523423 },
21+
{ text: 'Super good', id: 823423 },
22+
{ text: 'You are the best', id: 2039842 },
23+
{ text: 'Ramen is my fav food ever', id: 123523 },
24+
{ text: 'Nice Nice Nice!', id: 542328 }
25+
];
26+
27+
// Some and Every Checks
28+
// Array.prototype.some() // is at least one person 19?
29+
// const isAdult = people.some(function(person) {
30+
// const currentYear = (new Date()).getFullYear();
31+
// if(currentYear - person.year >= 19) {
32+
// return true;
33+
// }
34+
// });
35+
36+
const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19);
37+
38+
console.log({isAdult});
39+
// Array.prototype.every() // is everyone 19?
40+
41+
const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19);
42+
console.log({allAdults});
43+
44+
// Array.prototype.find()
45+
// Find is like filter, but instead returns just the one you are looking for
46+
// find the comment with the ID of 823423
47+
48+
49+
const comment = comments.find(comment => comment.id === 823423);
50+
51+
console.log(comment);
52+
53+
// Array.prototype.findIndex()
54+
// Find the comment with this ID
55+
// delete the comment with the ID of 823423
56+
const index = comments.findIndex(comment => comment.id === 823423);
57+
console.log(index);
58+
59+
// comments.splice(index, 1);
60+
61+
const newComments = [
62+
...comments.slice(0, index),
63+
...comments.slice(index + 1)
64+
];
65+
66+
</script>
67+
</body>
68+
</html>

‎07 - Array Cardio Day 2/index-SOYAINE.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Array Cardio 💪💪</title>
6+
</head>
7+
<body>
8+
<p><em>请按 F12 查看 Console 面板</em> 💁</p>
9+
<p>若无结果请刷新试试</p>
10+
<script>
11+
// ## Array Cardio Day 2
12+
// 数组基本操作指南二
13+
14+
const people = [
15+
{ name: 'Wes', year: 1988 },
16+
{ name: 'Kait', year: 1986 },
17+
{ name: 'Irv', year: 1970 },
18+
{ name: 'Lux', year: 2015 }
19+
];
20+
21+
const comments = [
22+
{ text: 'Love this!', id: 523423 },
23+
{ text: 'Super good', id: 823423 },
24+
{ text: 'You are the best', id: 2039842 },
25+
{ text: 'Ramen is my fav food ever', id: 123523 },
26+
{ text: 'Nice Nice Nice!', id: 542328 }
27+
];
28+
29+
// Some and Every Checks
30+
// Array.prototype.some() // is at least one person 19? 是否有人超过 19 岁？
31+
const isAdult = people.some( person => {
32+
const currentYear = (new Date()).getFullYear();
33+
return currentYear - person.year >= 19;
34+
});
35+
console.log({isAdult});
36+
37+
// Array.prototype.every() // is everyone 19? 是否所有人都是成年人？
38+
const allAdult = people.every( person => new Date().getFullYear() - person.year >= 19);
39+
console.log({allAdult});
40+
41+
// Array.prototype.find()
42+
// Find is like filter, but instead returns just the one you are looking for
43+
// find the comment with the ID of 823423
44+
// 找到 ID 号为 823423 的评论
45+
const comment = comments.find(comment => comment.id == 823423);
46+
console.log(comment);
47+
48+
// Array.prototype.findIndex()
49+
// Find the comment with this ID
50+
// delete the comment with the ID of 823423
51+
// 删除 ID 号为 823423 的评论
52+
const index = comments.findIndex(comment => comment.id == 823423);
53+
54+
// 删除方法一，splice()
55+
// comments.splice(index, 1);
56+
console.table(comments);
57+
// 删除方法二，slice 拼接
58+
const newComments = [
59+
...comments.slice(0, index),
60+
...comments.slice(index + 1)
61+
];
62+
console.table(newComments);
63+
</script>
64+
</body>
65+
</html>

‎07 - Array Cardio Day 2/index-START.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Array Cardio 💪💪</title>
6+
</head>
7+
<body>
8+
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
9+
<script>
10+
// ## Array Cardio Day 2
11+
12+
const people = [
13+
{ name: 'Wes', year: 1988 },
14+
{ name: 'Kait', year: 1986 },
15+
{ name: 'Irv', year: 1970 },
16+
{ name: 'Lux', year: 2015 }
17+
];
18+
19+
const comments = [
20+
{ text: 'Love this!', id: 523423 },
21+
{ text: 'Super good', id: 823423 },
22+
{ text: 'You are the best', id: 2039842 },
23+
{ text: 'Ramen is my fav food ever', id: 123523 },
24+
{ text: 'Nice Nice Nice!', id: 542328 }
25+
];
26+
27+
// Some and Every Checks
28+
// Array.prototype.some() // is at least one person 19?
29+
// Array.prototype.every() // is everyone 19?
30+
31+
// Array.prototype.find()
32+
// Find is like filter, but instead returns just the one you are looking for
33+
// find the comment with the ID of 823423
34+
35+
// Array.prototype.findIndex()
36+
// Find the comment with this ID
37+
// delete the comment with the ID of 823423
38+
39+
</script>
40+
</body>
41+
</html>

‎README.md‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# JavaScript30 - 一个月纯 JS 挑战中文指南
22

3-
最后更新：2016-12-21
3+
创建日期：2016-12-20
4+
最后更新：2017-01-03
45

56
> 中文指南作者：©[缉熙Soyaine](https://github.com/soyaine)
67
> [JavaScript30](https://javascript30.com) 教程作者：[Wes Bos](https://github.com/wesbos)
@@ -22,7 +23,7 @@ JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30
2223

2324
写这份中文指南的另一个原因是看了 Nitish Dayal 写的 Guides，我决定效仿他，在记录笔记的同时梳理思路，整理形成指南。我相信 Learn by Use 的同时也深信教是最好的学。希望这份指南能够帮助到想要进行练习的人们，特别是那些想要入门的前端小白们。
2425

25-
目前这份指南还在更新之中，欢迎监督我，如果你想要及时获取新的文章，可以[在简书关注这个系列](http://www.jianshu.com/notebooks/8509835/latest)，或是[在 GitHub Star/Fork 我的 Repository](https://github.com/soyaine/JavaScript30)。
26+
目前这份指南还在更新之中，欢迎监督我，如果你想要及时获取新的文章，可以[在 GitHub Star/Fork 我的 Repo](https://github.com/soyaine/JavaScript30)。
2627

2728
## 如何参加挑战
2829

@@ -40,13 +41,13 @@ JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30
4041

4142
## 目录
4243

43-
1. [x] JavaScript Drum Kit [指南](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit) | [纯 JS 模拟敲鼓效果](http://soyaine.github.io/JavaScript30/01 - JavaScript Drum Kit/index-SOYAINE.html)
44-
2. [x] JS + CSS Clock [指南](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock) | [纯 JavaScript+CSS 时钟效果](http://soyaine.github.io/JavaScript30/02 - JS %2B CSS Clock/index-SOYAINE.html)
45-
3. [x] CSS Variables [指南](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables) | [用 CSS 变量实现拖动控制参数效果](http://soyaine.github.io/JavaScript30/03%20-%20CSS%20Variables/index-SOYAINE.html)
46-
4. [x] Array Cardio, Day 1 [指南](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201) | [数组基本操作方法示例](http://soyaine.github.io/JavaScript30/04%20-%20Array%20Cardio%20Day%201/index-SOYAINE.html)
47-
5. [x] Flex Panel Gallery [指南](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery/README.md) | [可伸缩的图片墙在线效果](http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html)
48-
6. [ ] Type Ahead
49-
7. [ ] Array Cardio, Day 2
44+
1. [x] [JavaScript Drum Kit 指南](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit) | [纯 JS 模拟敲鼓效果](http://soyaine.github.io/JavaScript30/01 - JavaScript Drum Kit/index-SOYAINE.html)
45+
2. [x] [JS + CSS Clock 指南](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock) | [纯 JavaScript+CSS 时钟效果](http://soyaine.github.io/JavaScript30/02 - JS %2B CSS Clock/index-SOYAINE.html)
46+
3. [x] [CSS Variables 指南](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables) | [用 CSS 变量实现拖动控制参数效果](http://soyaine.github.io/JavaScript30/03%20-%20CSS%20Variables/index-SOYAINE.html)
47+
4. [x] [Array Cardio, Day 1 指南](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201) | [数组基本操作方法示例一](http://soyaine.github.io/JavaScript30/04%20-%20Array%20Cardio%20Day%201/index-SOYAINE.html)
48+
5. [x] [Flex Panel Gallery 指南](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery/README.md) | [可伸缩的图片墙在线效果](http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html)
49+
6. [x] [Type Ahead 指南](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead/README.md) | [根据关键词快速匹配诗句在线效果](http://soyaine.cn/JavaScript30/06%20-%20Type%20Ahead/index-SOYAINE.html)
50+
7. [x] [Array Cardio, Day 2 指南](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202) | [数组基本操作方法示例二](http://soyaine.github.io/JavaScript30/07%20-%20Array%20Cardio%20Day%202/index-SOYAINE.html)
5051
8. [ ] Fun with HTML5 Canvas
5152
9. [ ] Dev Tools Domination
5253
10. [ ] Hold Shift and Check Checkboxes

0 commit comments

Comments
 (0)