Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7dfdf57

Browse files
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日
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>
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>
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)

AltStyle によって変換されたページ (->オリジナル) /