diff --git a/04 - Array Cardio Day 1/index-SOYAINE.html b/04 - Array Cardio Day 1/index-SOYAINE.html
index f9f8dbf..a1ff32a 100644
--- a/04 - Array Cardio Day 1/index-SOYAINE.html	
+++ b/04 - Array Cardio Day 1/index-SOYAINE.html	
@@ -132,7 +132,7 @@
     // 7. sort Exercise
     // Sort the people alphabetically by last name
     // 按照姓氏的字母进行排序
-    const sortName = inventors.sort((a, b) => {
+    const sortName = people.sort((a, b) => {
       return (a.last > b.last) ? 1 : -1;
     })
     console.table(sortName);
diff --git a/06 - Type Ahead/index-SOYAINE.html b/06 - Type Ahead/index-SOYAINE.html
index 927d08d..890247a 100644
--- a/06 - Type Ahead/index-SOYAINE.html	
+++ b/06 - Type Ahead/index-SOYAINE.html	
@@ -14,61 +14,53 @@
       <li></li>
     </ul>
   </form>
-<script>
-// const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+  <script>
+    // const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
     const endpoint = 'https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json';
-	
- 	
-    const  poetrys = [];
+
+
+    const poetrys = [];
     fetch(endpoint)
-		.then(blob => blob.json())
-		.then(data => poetrys.push(...data));
- 
-	function findMatches( wordToMatch, poetrys) {
-		return poetrys.filter(poet => {
-			// 正则找出匹配的诗句
-			const regex = new RegExp(wordToMatch, 'gi');
-			const author = poet.detail_author.join('');
-//			console.log(author);
-			return poet.detail_text.match(regex) || poet.title.match(regex) || author.match(regex);
-		});
-	}
+      .then(blob => blob.json())
+      .then(data => poetrys.push(...data));
+
+    function findMatches(wordToMatch, poetrys) {
+      return poetrys.filter(poet => {
+        // 正则找出匹配的诗句
+        const regex = new RegExp(wordToMatch, 'gi');
+        const author = poet.detail_author.join('');
+        //			console.log(author);
+        return poet.detail_text.match(regex) || poet.title.match(regex) || author.match(regex);
+      });
+    }
 
-	function displayMatches() {
-		const matches = findMatches(this.value, poetrys);
-		const regex = new RegExp(this.value, 'gi');
-		const html = matches.map( poet => {
-			// 替换高亮的标签
-			const text = poet.detail_text.replace(regex, `<span class="hl">${ this.value }</span>`);
-			const title = poet.title.replace(regex, `<span class="hl">${ this.value }</span>`)
-			// 构造 HTML 值
-			return `
+    function displayMatches() {
+      const matches = findMatches(this.value, poetrys);
+      const regex = new RegExp(this.value, 'gi');
+      const html = matches.map(poet => {
+        // 替换高亮的标签
+        const text = poet.detail_text.replace(regex, `<span class="hl">${ this.value }</span>`);
+        const title = poet.title.replace(regex, `<span class="hl">${ this.value }</span>`)
+        // 构造 HTML 值
+        return `
 				<li>
 					<span class="poet">${ text }</span>
 					<span class="title">${ title } - ${ poet.detail_author[0] }</span>
 				</li>
 			`;
-		}).join('');
-//		console.log(html);
-		suggestions.innerHTML = html;
-	}
-	
-	const search = document.querySelector('.search');
-	const suggestions = document.querySelector('.suggestions');
-	
-	search.addEventListener('change', displayMatches);
-	search.addEventListener('keyup', displayMatches);
-
-//	console.log(poetrys);
- </script>
-  </body>
-</html>
-
-
-
-
-
+      }).join('');
+      //		console.log(html);
+      suggestions.innerHTML = html;
+    }
 
+    const search = document.querySelector('.search');
+    const suggestions = document.querySelector('.suggestions');
 
+    search.addEventListener('change', displayMatches);
+    search.addEventListener('keyup', displayMatches);
 
+    //	console.log(poetrys);
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/09 - Dev Tools Domination/index-SOYAINE.html b/09 - Dev Tools Domination/index-SOYAINE.html
index a8780bd..4dcbabd 100644
--- a/09 - Dev Tools Domination/index-SOYAINE.html	
+++ b/09 - Dev Tools Domination/index-SOYAINE.html	
@@ -9,7 +9,13 @@
   <p onClick="makeGreen()">×点×我×呀×</p>
 
   <script>
-    const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
+    const dogs = [{
+      name: 'Snickers',
+      age: 2
+    }, {
+      name: 'hugo',
+      age: 8
+    }];
 
     function makeGreen() {
       const p = document.querySelector('p');
@@ -18,76 +24,75 @@
     }
 
     // Regular
-	// 常规输出
-	  console.log("我只是 console 世界的一介草民");
+    // 常规输出
+    console.log("我只是 console 世界的一介草民");
 
     // Interpolated
-	// 字符替换
-	  console.log("我的名字叫做 %s ", "log");
-	  console.log("我的年龄是 %f ", 1.23);
-//	  console.log("我的名字叫做 %o ", {1.23: 12});
+    // 字符替换
+    console.log("我的名字叫做 %s ", "log");
+    console.log("我的年龄是 %f ", 1.23);
+    // console.log("我的名字叫做 %o ", {1.23: 12});
 
     // Styled
-	// 设定输出的样式
-	  console.log("偷偷告诉你，我会变身 %c ~\(≧▽≦)/~巴拉拉~~", "color: #00fdff; font-size: 2em;");
+    // 设定输出的样式
+    console.log("偷偷告诉你，我会变身 %c ~\(≧▽≦)/~巴拉拉~~", "color: #00fdff; font-size: 2em;");
 
     // warning!
-	  console.warn("warning! 我可警告你哦~")
+    console.warn("warning! 我可警告你哦~")
 
     // Error :|
-	  console.error("error~别又来报错了！╭(╯^╰)╮");
+    console.error("error~别又来报错了！╭(╯^╰)╮");
 
     // Info
-	  console.info("Talk is cheap. Show me the code");
+    console.info("Talk is cheap. Show me the code");
 
     // Viewing DOM Elements
-	// 打印输出 DOM 元素
-	  const p = document.querySelector('p');
-	  console.log(p);
-	  console.dir(p);
+    // 打印输出 DOM 元素
+    const p = document.querySelector('p');
+    console.log(p);
+    console.dir(p);
 
     // Testing
-	  console.assert(1 ===1, "（这句发布时删除）");
-	  console.assert(1 ===0, "看看看，失策了吧");
-	console.assert(p.innerHTML.match("她"), "我这儿才没有她这个人");
+    console.assert(1 === 1, "（这句发布时删除）");
+    console.assert(1 === 0, "看看看，失策了吧");
+    console.assert(p.innerHTML.match("她"), "我这儿才没有她这个人");
 
     // clearing
-//	  console.clear();
+    // console.clear();
 
     // Grouping together
-	dogs.forEach(dog => {
-		console.group();
-//		console.groupCollapsed(); // 收起列表
-		console.log(`${dog.name}`);
-		console.log(`${dog.age}`);
-		console.log(`${dog.name} 有 ${dog.age} 岁了`);
-		console.groupEnd();
-	});
-
-	//
-	  console.table(dogs);
-	  console.table(dogs, ["age"]);
+    dogs.forEach(dog => {
+      console.group();
+      // console.groupCollapsed(); 
+      // 收起列表
+      console.log(`${dog.name}`);
+      console.log(`${dog.age}`);
+      console.log(`${dog.name} 有 ${dog.age} 岁了`);
+      console.groupEnd();
+    });
+
+    console.table(dogs);
+    console.table(dogs, ["age"]);
 
     // counting
-	  console.count("（读来过反）羊只");
-	  console.count("（读来过反）羊只");
-	  console.count("（读来过反）鱼条");
-	  console.count("（读来过反）羊只");
-	  console.count("（读来过反）羊只");
-	  console.count("（读来过反）鱼条");
-	  console.count("（读来过反）鱼条");
-	  console.count("（读来过反）羊只");
+    console.count("（读来过反）羊只");
+    console.count("（读来过反）羊只");
+    console.count("（读来过反）鱼条");
+    console.count("（读来过反）羊只");
+    console.count("（读来过反）羊只");
+    console.count("（读来过反）鱼条");
+    console.count("（读来过反）鱼条");
+    console.count("（读来过反）羊只");
 
     // timing
-	  console.time('fetch my data');
-	  fetch("https://api.github.com/users/soyaine")
-		  .then(data => data.json())
-		  .then(data => {
-		  console.timeEnd('fetch my data');
-		  console.log(data);
-	  });
-//	  console.timeEnd('fetch my data');
-
+    console.time('fetch my data');
+    fetch("https://api.github.com/users/soyaine")
+      .then(data => data.json())
+      .then(data => {
+        console.timeEnd('fetch my data');
+        console.log(data);
+      });
+    // console.timeEnd('fetch my data');
   </script>
 </body>
 </html>
diff --git a/14 - JavaScript References VS Copying/README.md b/14 - JavaScript References VS Copying/README.md
index 9fc48f1..647d48f 100644
--- a/14 - JavaScript References VS Copying/README.md	
+++ b/14 - JavaScript References VS Copying/README.md	
@@ -40,7 +40,7 @@
     WOW 原数组 `plaryers` 也被修改了。为什么会这样？因为 `team` 只是这个数组的引用，并不是它的复制。`team` 和 `players` 这两个变量指向的是同一个数组。  
     所以如何解决这个问题？接下来我们开始真正的复制吧！
      - **方法一 [`Array.prototype.slice()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)** 
-        
+       
         由于运行 `slice` 得到的结果是一个对原数组的浅拷贝，原数组不会被修改。所以如果修改这两个数组中任意 一个，另一个都不会受到影响。
         ```js
         const team2 = players.slice();
@@ -48,7 +48,7 @@
         console.log(players, team2); 
         ```
      - **方法二 [`Array.prototype.concat()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)**
-        
+       
         `concat()` 方法是用来合并数组的，它也不会更改原有的数组，而是返回一个新数组，所以可以将 `players` 数组与一个空数组合并，得到的结果就符合预期了。
         ```js
         const team3 = [].concat(players);
@@ -56,7 +56,7 @@
         console.log(players, team3); 
         ```
      - **方法三 ES6 [扩展语法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator)**
-     
+    
         扩展语法可以像扩展参数列表一样来扩展数组，效果与上述方法类似，但比较简洁。
         ```js
         const team4 = [...players];
@@ -64,13 +64,13 @@
         console.log(players, team4);
         ```
      - **方法四 [`Array.from()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from)**
-     
+    
         此外使用 Array 创建新的数组实例的方法也是可行的。
         ```js
         const team5 = Array.from(players);
         team5[3] = 'Lux5';
         console.log(players, team5);
-        ```    
+        ```
     
    除此之外，还可以用 `push` 这样的方法。数组部分已经介绍完毕，下面我们进入 Object 类型数据的试验吧~
    
@@ -117,7 +117,7 @@
          facebook: 'wesbos.developer'
        }
      };
-
+     
      const dev = Object.assign({}, wes);
      const dev2 = JSON.parse(JSON.stringify(wes));
      console.log(wes);
@@ -125,7 +125,32 @@
      console.log(dev2);
      ```
 
+> 对于浅拷贝、深拷贝的补充
+>
+> 参考了 [什么是浅拷贝？什么是深拷贝？](https://www.jianshu.com/p/56598f2ac42e)
+>
+> 2021/10/10 by @[FangzhouSu](https://github.com/FangzhouSu)
+
+- 浅拷贝、深拷贝的区别
+
+![deepcopy](https://user-images.githubusercontent.com/75036021/136916022-88186394-d64b-46ce-a9cc-1efea5ce1c5f.jpg)
+
+- 赋值、浅拷贝、深拷贝的区别
+  - 浅拷贝在改变原数据包含的子对象时会使原数据一同改变
   
+  - 深拷贝在改变原数据包含的子对象时则不会改变原数据（看上图可以更好地进行理解）
+    - 浅拷贝实际上只复制到了 `Original ListHead` 而后面的节点只是被其“引用”了！
+    
+    |        | 和原数据是否指向同一个对象 | 原数据第一层数据为基本数据类型时                       | 原数据中包含子对象时               |
+    | ------ | -------------------------- | ------------------------------------------------------ | ---------------------------------- |
+    | 赋值   | 是                         | 改变**赋值**得来的对象会使原对象的数据一同改变         | 改变会使原对象的数据一同改变       |
+    | 浅拷贝 | 否                         | 改变**浅拷贝**得来的对象**不会**使原对象的数据一同改变 | 改变会使原对象的数据一同改变       |
+    | 深拷贝 | 否                         | 改变**深拷贝**得来的对象**不会**使原对象的数据一同改变 | 改变**不会**使原对象的数据一同改变 |
+
+- 在本DEMO中的体现
+
+![image](https://user-images.githubusercontent.com/75036021/136916199-ff455511-7eca-4be2-be02-a78993f2a144.png)
+
 OVER~\(^o^)/~
 
 
diff --git a/14 - JavaScript References VS Copying/index-SOYAINE.html b/14 - JavaScript References VS Copying/index-SOYAINE.html
index acf3f62..d317fe6 100644
--- a/14 - JavaScript References VS Copying/index-SOYAINE.html	
+++ b/14 - JavaScript References VS Copying/index-SOYAINE.html	
@@ -10,6 +10,7 @@
     // 从 String、Number、Boolean 类型的值开始：
      let age = 100;
      let age2 = age;
+     console.log("01 发生了常规值传递 而不是地址值");
      console.log(age, age2);
      age = 200;
      console.log(age, age2);
@@ -25,11 +26,13 @@
 
     // 然后试图复制这个数组
     const team = players;
+    console.log("02 发生了地址值的传递");
 
     console.log(players, team);
     // You might think we can just do something like this:
     // 也许你觉得可以直接这样修改复制后的数组
-     team[3] = 'Lux';
+    team[3] = 'Lux';
+    console.log("引用变量team和players指向的同一个地址！所以改变是同步的~如下：");
     console.log(players, team);
       
 
@@ -47,20 +50,25 @@
 
     // So, how do we fix this? We take a copy instead!
     // 所以如何解决这个问题？下面来进行复制。
+    console.log("03 我们要复制数组对象，而不是引用它们，下面介绍4种复制数组对象的方法~");
+    console.log("   解决方法1 利用slice()方法 复制数组");
     const team2 = players.slice();
 
     // one day
 
     // or create a new array and concat the old one in
     // 或者创建一个新数组，然后用 concat 方法来获取它
+    console.log("   解决方法2 创建新数组并利用concat()方法 复制数组");
     const team3 = [].concat(players);
 
     // or use the new ES6 Spread
     // 再或者用 ES6 里面的扩展语法
+    console.log("   解决方法3 利用扩展运算符 复制数组");
     const team4 = [...players];
     team4[3] = 'heeee hawww';
     console.log(team4);
 
+    console.log("   解决方法4 利用ES6中的from方法 复制数组");
     const team5 = Array.from(players);
 
     // now when we update it, the original one isn't changed
@@ -83,6 +91,8 @@
 
     // how do we take a copy instead?
     // 如何才能复制它呢？
+    console.log("04 同上面一样，我们要复制Object对象，而不是引用它们，下面介绍两种复制Object对象的方法~");
+    console.log("   解决方法1 Object.assign() 浅拷贝的方法");
     const cap2 = Object.assign({}, person, { number: 99, age: 12 });
     console.log(cap2);
 
@@ -101,13 +111,19 @@
       }
     };
 
-//    console.clear();
-//    console.log(wes);
+    // console.clear();
+    // console.log(wes);
 
     const dev = Object.assign({}, wes);
 
+    console.log("   解决方法2 JSON转换 进行了深拷贝");
     const dev2 = JSON.parse(JSON.stringify(wes));
 
+    console.log("来试一下浅拷贝&深拷贝的区别");
+    dev.social.name = 'wesbos';// 会影响到原对象
+    dev2.social.name = "我不会影响到原对象wes啦啦啦~";
+
+    console.log(wes, dev, dev2);
 
   </script>
 
diff --git a/README.md b/README.md
index 4654e0d..3a0956b 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 创建日期：2016-12-20  
 最后更新：2018-12-05
 
-> Repo by: [未枝丫](https://github.com/soyaine)  
+> Repo by: [Soyaine](https://github.com/soyaine)  
 > [JavaScript30](https://javascript30.com) 教程作者：[Wes Bos](https://github.com/wesbos)    
 > 完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -29,7 +29,7 @@ JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30
 
 下面是完成 Wes Bos 的 JavaScript30 挑战所能借鉴的文档，每个文档的具体使用建议如下：
 
-- [JavaScript30 官网](https://javascript30.com)：进入官网注册后可以观看和下载所有教程视频。Wes Bos 还把视频传到了百度云，进入官网直接拉到页面底部就能找到链接。
+- [JavaScript30 官网](https://javascript30.com)：进入官网注册后可以观看和下载所有教程视频。
 - [Nitish Dayal 写的英文指南](https://github.com/nitishdayal/JavaScript30/tree/master/exercises)：这是一份非官方的文字版指南，也是激励我写这一系列文章的主要因素。
 - [挑战初始文档](https://github.com/wesbos/JavaScript30)：这是 Wes Bos 这份教程涉及的代码，你可以直接 Clone 或者下载到本地，然后开始你 30 天的挑战之旅。文档共有 30 个文件夹，每个文件夹中至少有两个文件。
 	- **index-START.html**：是提供给我们的初始文档，方便我们专注于 JavaScript 的编写，这个文档已经将基础的 HTML 和 CSS 部分写好，我们只需要在这个基础上编写 JavaScript 代码，实现特定的功能即可。
@@ -81,7 +81,7 @@ Name | Contribution
 [@zzh466](http://github.com/zzh466) | Review
 [@Xing Liu](https://github.com/S1ngS1ng) | Review
 [@大史不说话](https://github.com/dashnowords) |  No.[16](https://github.com/soyaine/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow).[17](https://github.com/soyaine/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles).[18](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce).[19](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun).[20](https://github.com/soyaine/JavaScript30/tree/master/20%20-%20Speech%20Detection).[21](https://github.com/soyaine/JavaScript30/tree/master/21%20-%20Geolocation).[22](https://github.com/soyaine/JavaScript30/tree/master/22%20-%20Follow%20Along%20Link%20Highlighter).[23](https://github.com/soyaine/JavaScript30/tree/master/23%20-%20Speech%20Synthesis).[24](https://github.com/soyaine/JavaScript30/tree/master/24%20-%20Sticky%20Nav).[25](https://github.com/soyaine/JavaScript30/tree/master/25%20-%20Event%20Related).[26](https://github.com/soyaine/JavaScript30/tree/master/26%20-%20Strip%20Follow%20Along%20Nav).[27](https://github.com/soyaine/JavaScript30/tree/master/27%20-%20Click%20and%20Drag).[28](https://github.com/soyaine/JavaScript30/tree/master/28%20-%20Video%20Speed%20Controller)
-[@未枝丫](https://github.com/soyaine) | No.[1](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit).[2](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock).[3](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables).[4](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201).[5](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery).[6](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead).[7](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202).[8](https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas).[9](https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination).[10](https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md).[12](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md).[13](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md).[14](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying)
+[@Soyaine](https://github.com/soyaine) | No.[1](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit).[2](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock).[3](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables).[4](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201).[5](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery).[6](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead).[7](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202).[8](https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas).[9](https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination).[10](https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md).[12](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md).[13](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md).[14](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying)
 
 ## JOIN US
 如果对这个系列的指南有什么改进的想法，欢迎[提 issue](https://github.com/soyaine/JavaScript30/issues)，如果你也想参与写作，请看 [wiki](https://github.com/soyaine/JavaScript30/wiki/%E6%8C%87%E5%8D%97%E7%BB%93%E6%9E%84%E8%AF%B4%E6%98%8E)，并联系 Soyaine。