Skip to content

Commit aef111a

Browse files
soyainesoyaine
committed
begin 14 translate annotation
1 parent 1dbeb2a commit aef111a

4 files changed

Lines changed: 265 additions & 1 deletion

File tree

‎13 - Slide in on Scroll/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# 13 图片随屏幕滚动而滑入滑出的效果指南
22

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

‎14 - JavaScript References VS Copying/index-FINISHED.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Reference VS Copy</title>
6+
</head>
7+
<body>
8+
9+
<script>
10+
// start with strings, numbers and booleans
11+
// let age = 100;
12+
// let age2 = age;
13+
// console.log(age, age2);
14+
// age = 200;
15+
// console.log(age, age2);
16+
17+
// let name = 'Wes';
18+
// let name2 = name;
19+
// console.log(name, name2);
20+
// name = 'wesley';
21+
// console.log(name, name2);
22+
23+
// Let's say we have an array
24+
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
25+
26+
// and we want to make a copy of it.
27+
const team = players;
28+
29+
console.log(players, team);
30+
// You might think we can just do something like this:
31+
// team[3] = 'Lux';
32+
33+
// however what happens when we update that array?
34+
35+
// now here is the problem!
36+
37+
// oh no - we have edited the original array too!
38+
39+
// Why? It's because that is an array reference, not an array copy. They both point to the same array!
40+
41+
// So, how do we fix this? We take a copy instead!
42+
const team2 = players.slice();
43+
44+
// one day
45+
46+
// or create a new array and concat the old one in
47+
const team3 = [].concat(players);
48+
49+
// or use the new ES6 Spread
50+
const team4 = [...players];
51+
team4[3] = 'heeee hawww';
52+
console.log(team4);
53+
54+
const team5 = Array.from(players);
55+
56+
// now when we update it, the original one isn't changed
57+
58+
// The same thing goes for objects, let's say we have a person object
59+
60+
// with Objects
61+
const person = {
62+
name: 'Wes Bos',
63+
age: 80
64+
};
65+
66+
// and think we make a copy:
67+
// const captain = person;
68+
// captain.number = 99;
69+
70+
// how do we take a copy instead?
71+
const cap2 = Object.assign({}, person, { number: 99, age: 12 });
72+
console.log(cap2);
73+
74+
// We will hopefully soon see the object ...spread
75+
// const cap3 = {...person};
76+
77+
// Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
78+
79+
const wes = {
80+
name: 'Wes',
81+
age: 100,
82+
social: {
83+
twitter: '@wesbos',
84+
facebook: 'wesbos.developer'
85+
}
86+
};
87+
88+
console.clear();
89+
console.log(wes);
90+
91+
const dev = Object.assign({}, wes);
92+
93+
const dev2 = JSON.parse(JSON.stringify(wes));
94+
95+
96+
</script>
97+
98+
</body>
99+
</html>

‎14 - JavaScript References VS Copying/index-SOYAINE.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Reference VS Copy</title>
6+
</head>
7+
<body>
8+
9+
<script>
10+
// 从 String、Number、Boolean 类型的值开始：
11+
// let age = 100;
12+
// let age2 = age;
13+
// console.log(age, age2);
14+
// age = 200;
15+
// console.log(age, age2);
16+
17+
// let name = 'Wes';
18+
// let name2 = name;
19+
// console.log(name, name2);
20+
// name = 'wesley';
21+
// console.log(name, name2);
22+
23+
// 下面我们来声明一个数组
24+
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
25+
26+
// 然后试图复制这个数组
27+
const team = players;
28+
29+
console.log(players, team);
30+
// You might think we can just do something like this:
31+
// 也许你觉得可以直接这样修改复制后的数组
32+
// team[3] = 'Lux';
33+
34+
// however what happens when we update that array?
35+
// 但我们修改这个数组的时候会发生什么呢？
36+
37+
// now here is the problem!
38+
// 这就是问题所在
39+
40+
// oh no - we have edited the original array too!
41+
// NO！ 原数组也被修改过了
42+
43+
// Why? It's because that is an array reference, not an array copy. They both point to the same array!
44+
// 为什么？因为 team 只是这个数组的引用，并不是它的复制。team 和 players 指向的是同一个数组。
45+
46+
// So, how do we fix this? We take a copy instead!
47+
// 所以如何解决这个问题？下面来进行复制。
48+
const team2 = players.slice();
49+
50+
// one day
51+
52+
// or create a new array and concat the old one in
53+
// 或者创建一个新数组，然后用 concat 方法来获取它
54+
const team3 = [].concat(players);
55+
56+
// or use the new ES6 Spread
57+
// 再或者用 ES6 里面的[扩展语法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator)
58+
const team4 = [...players];
59+
team4[3] = 'heeee hawww';
60+
console.log(team4);
61+
62+
const team5 = Array.from(players);
63+
64+
// now when we update it, the original one isn't changed
65+
// 现在再修改 team5 的时候，原数组不会变了
66+
67+
// The same thing goes for objects, let's say we have a person object
68+
// 对 Object 类型的数据来说也是一样的，我们用一个 person 例子来说明
69+
70+
// with Objects
71+
// 现在又一个 Object 对象
72+
const person = {
73+
name: 'Wes Bos',
74+
age: 80
75+
};
76+
77+
// 然后思考一下如何取得它的复制
78+
// and think we make a copy:
79+
// const captain = person;
80+
// captain.number = 99;
81+
82+
// how do we take a copy instead?
83+
// 如何才能复制它呢？
84+
const cap2 = Object.assign({}, person, { number: 99, age: 12 });
85+
console.log(cap2);
86+
87+
// We will hopefully soon see the object ...spread
88+
// const cap3 = {...person};
89+
90+
// Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
91+
// 需要注意的是：这里的例子里面，我们用的数组和对象都只是一层嵌套，Lodash 有一个深度复制的方法，但你使用之前需要多考虑一下。
92+
93+
const wes = {
94+
name: 'Wes',
95+
age: 100,
96+
social: {
97+
twitter: '@wesbos',
98+
facebook: 'wesbos.developer'
99+
}
100+
};
101+
102+
console.clear();
103+
console.log(wes);
104+
105+
const dev = Object.assign({}, wes);
106+
107+
const dev2 = JSON.parse(JSON.stringify(wes));
108+
109+
110+
</script>
111+
112+
</body>
113+
</html>

‎14 - JavaScript References VS Copying/index-START.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Reference VS Copy</title>
6+
</head>
7+
<body>
8+
9+
<script>
10+
// 从 String、Number、Boolean 类型的值开始：
11+
12+
// 首先我们有一个数组
13+
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
14+
15+
// 现在我们想要复制它
16+
17+
// 也许你觉得可以直接这样修改复制后的数组:
18+
19+
// 但我们修改这个数组的时候会发生什么呢？
20+
21+
// 这就是问题所在
22+
23+
// NO！ 原数组也被修改过了
24+
25+
// 为什么？因为 team 只是这个数组的引用，并不是它的复制。team 和 players 指向的是同一个数组。
26+
27+
// 所以如何解决这个问题？下面来进行真正的复制吧。
28+
29+
// one day
30+
31+
// 或者创建一个新数组，然后用 concat 方法来获取它
32+
33+
// 再或者用 ES6 里面的扩展语法
34+
35+
// 现在再修改 team5，原数组不会变了
36+
37+
// 对 Object 类型的数据来说也是一样的，我们用一个 person 例子来说明
38+
39+
// 现在又一个 Object 对象
40+
41+
// 然后以为这样可以复制它:
42+
43+
// 到底要怎样才能真正得到它的复制版呢？
44+
45+
// 我们满怀期望的希望扩展语法对它也会生效
46+
47+
// 需要注意的是：这里的例子里面，我们用的数组和对象都只是一层嵌套，Lodash 有一个深度复制的方法，但你使用之前需要多考虑一下。
48+
49+
</script>
50+
51+
</body>
52+
</html>

0 commit comments

Comments
 (0)