begin 14 translate annotation

soyaine · soyaine · commit aef111a6c19f · 2017-07-19T11:40:40.000+08:00
diff --git a/13 - Slide in on Scroll/README.md b/13 - Slide in on Scroll/README.md
@@ -1,7 +1,7 @@
 # 13 图片随屏幕滚动而滑入滑出的效果指南
 
 > 作者：©[缉熙Soyaine](https://github.com/soyaine)  
-> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 12 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
+> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 13 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
 > 创建时间：2017-07-14    
 最后更新：2017-07-18
diff --git a/14 - JavaScript References VS Copying/index-FINISHED.html b/14 - JavaScript References VS Copying/index-FINISHED.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>JS Reference VS Copy</title>
+</head>
+<body>
+
+  <script>
+    // start with strings, numbers and booleans
+    // let age = 100;
+    // let age2 = age;
+    // console.log(age, age2);
+    // age = 200;
+    // console.log(age, age2);
+
+    // let name = 'Wes';
+    // let name2 = name;
+    // console.log(name, name2);
+    // name = 'wesley';
+    // console.log(name, name2);
+
+    // Let's say we have an array
+    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
+
+    // and we want to make a copy of it.
+    const team = players;
+
+    console.log(players, team);
+    // You might think we can just do something like this:
+    // team[3] = 'Lux';
+
+    // however what happens when we update that array?
+
+    // now here is the problem!
+
+    // oh no - we have edited the original array too!
+
+    // Why? It's because that is an array reference, not an array copy. They both point to the same array!
+
+    // So, how do we fix this? We take a copy instead!
+    const team2 = players.slice();
+
+    // one day
+
+    // or create a new array and concat the old one in
+    const team3 = [].concat(players);
+
+    // or use the new ES6 Spread
+    const team4 = [...players];
+    team4[3] = 'heeee hawww';
+    console.log(team4);
+
+    const team5 = Array.from(players);
+
+    // now when we update it, the original one isn't changed
+
+    // The same thing goes for objects, let's say we have a person object
+
+    // with Objects
+    const person = {
+      name: 'Wes Bos',
+      age: 80
+    };
+
+    // and think we make a copy:
+    // const captain = person;
+    // captain.number = 99;
+
+    // how do we take a copy instead?
+    const cap2 = Object.assign({}, person, { number: 99, age: 12 });
+    console.log(cap2);
+
+    // We will hopefully soon see the object ...spread
+    // const cap3 = {...person};
+
+    // 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.
+
+    const wes = {
+      name: 'Wes',
+      age: 100,
+      social: {
+        twitter: '@wesbos',
+        facebook: 'wesbos.developer'
+      }
+    };
+
+    console.clear();
+    console.log(wes);
+
+    const dev = Object.assign({}, wes);
+
+    const dev2 = JSON.parse(JSON.stringify(wes));
+
+
+  </script>
+
+</body>
+</html>
diff --git a/14 - JavaScript References VS Copying/index-SOYAINE.html b/14 - JavaScript References VS Copying/index-SOYAINE.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>JS Reference VS Copy</title>
+</head>
+<body>
+
+  <script>
+    // 从 String、Number、Boolean 类型的值开始：
+    // let age = 100;
+    // let age2 = age;
+    // console.log(age, age2);
+    // age = 200;
+    // console.log(age, age2);
+
+    // let name = 'Wes';
+    // let name2 = name;
+    // console.log(name, name2);
+    // name = 'wesley';
+    // console.log(name, name2);
+
+    // 下面我们来声明一个数组
+    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
+
+    // 然后试图复制这个数组
+    const team = players;
+
+    console.log(players, team);
+    // You might think we can just do something like this:
+    // 也许你觉得可以直接这样修改复制后的数组
+    // team[3] = 'Lux';
+
+    // however what happens when we update that array?
+    // 但我们修改这个数组的时候会发生什么呢？
+
+    // now here is the problem!
+    // 这就是问题所在
+
+    // oh no - we have edited the original array too!
+    // NO！ 原数组也被修改过了
+
+    // Why? It's because that is an array reference, not an array copy. They both point to the same array!
+    // 为什么？因为 team 只是这个数组的引用，并不是它的复制。team 和 players 指向的是同一个数组。
+
+    // So, how do we fix this? We take a copy instead!
+    // 所以如何解决这个问题？下面来进行复制。
+    const team2 = players.slice();
+
+    // one day
+
+    // or create a new array and concat the old one in
+    // 或者创建一个新数组，然后用 concat 方法来获取它
+    const team3 = [].concat(players);
+
+    // or use the new ES6 Spread
+    // 再或者用 ES6 里面的[扩展语法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator)
+    const team4 = [...players];
+    team4[3] = 'heeee hawww';
+    console.log(team4);
+
+    const team5 = Array.from(players);
+
+    // now when we update it, the original one isn't changed
+    // 现在再修改 team5 的时候，原数组不会变了
+
+    // The same thing goes for objects, let's say we have a person object
+    // 对 Object 类型的数据来说也是一样的，我们用一个 person 例子来说明
+
+    // with Objects
+    // 现在又一个 Object 对象
+    const person = {
+      name: 'Wes Bos',
+      age: 80
+    };
+
+    // 然后思考一下如何取得它的复制
+    // and think we make a copy:
+    // const captain = person;
+    // captain.number = 99;
+
+    // how do we take a copy instead?
+    // 如何才能复制它呢？
+    const cap2 = Object.assign({}, person, { number: 99, age: 12 });
+    console.log(cap2);
+
+    // We will hopefully soon see the object ...spread
+    // const cap3 = {...person};
+
+    // 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.
+    // 需要注意的是：这里的例子里面，我们用的数组和对象都只是一层嵌套，Lodash 有一个深度复制的方法，但你使用之前需要多考虑一下。
+
+    const wes = {
+      name: 'Wes',
+      age: 100,
+      social: {
+        twitter: '@wesbos',
+        facebook: 'wesbos.developer'
+      }
+    };
+
+    console.clear();
+    console.log(wes);
+
+    const dev = Object.assign({}, wes);
+
+    const dev2 = JSON.parse(JSON.stringify(wes));
+
+
+  </script>
+
+</body>
+</html>
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>JS Reference VS Copy</title>
+</head>
+<body>
+
+  <script>
+    // 从 String、Number、Boolean 类型的值开始：
+
+    // 首先我们有一个数组
+    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
+
+    // 现在我们想要复制它
+
+    // 也许你觉得可以直接这样修改复制后的数组:
+
+    // 但我们修改这个数组的时候会发生什么呢？
+
+    // 这就是问题所在
+
+    // NO！ 原数组也被修改过了
+
+    // 为什么？因为 team 只是这个数组的引用，并不是它的复制。team 和 players 指向的是同一个数组。
+
+    // 所以如何解决这个问题？下面来进行真正的复制吧。
+
+    // one day
+
+    // 或者创建一个新数组，然后用 concat 方法来获取它
+
+    // 再或者用 ES6 里面的扩展语法
+
+    // 现在再修改 team5，原数组不会变了
+
+    // 对 Object 类型的数据来说也是一样的，我们用一个 person 例子来说明
+
+    // 现在又一个 Object 对象
+
+    // 然后以为这样可以复制它:
+
+    // 到底要怎样才能真正得到它的复制版呢？
+
+    // 我们满怀期望的希望扩展语法对它也会生效
+
+    // 需要注意的是：这里的例子里面，我们用的数组和对象都只是一层嵌套，Lodash 有一个深度复制的方法，但你使用之前需要多考虑一下。
+
+  </script>
+
+</body>
+</html>
