JS30-Day14 & Day15 练习重点整理

JS30-Day14-Object and Arrays - Reference VS Copy

探讨如何複製不会传同一个参考的阵列和物件

1. 阵列的複製

以下的这些方法只是浅複製而已，新阵列内的阵列被修改时，原阵列也会被修改

const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];// 方法1: 利用回传新阵列的特性const team2 = players.slice();// 方法2: 空阵列连接 players，也是出现新阵列const team3 = [].concat(players);// 方法3:const team4 = [...players];// 方法4: 利用回传新阵列的特性const team5 = Array.from(players);

2. 物件的複製

以下的这些方法只是浅複製而已，新物件内的物件被修改时，原物件也会被修改

const person = {  name: 'Wes Bos',  age: 80};// 方法1: Object.assign 会複製第二个参数的物件到第一个参数去，第三个参数可为新物件增加属性const person2 = Object.assign({}, person, {height: 172});// 方法2:const person3 = {...person};const wes = {  name: 'Wes',  age: 100,  social: {    twitter: '@wesbos',    facebook: 'wesbos.developer'  }};// 要避免浅複製的话，可以使用下面的方式:const dev2 = JSON.parse(JSON.stringify(wes));

JS30-Day15-LocalStorage and Event Delegation

介绍 LocalStorage 和 Event Delegation 事件委派，并用它们来做一个纪录食物的实作

1. reset() 方法: 重置表单内的输入值

<form id="myForm">  First name: <input type="text" name="fname"><br>  Last name: <input type="text" name="lname"><br><br>  <input type="button" onclick="myFunction()" value="Reset form"></form><script>function myFunction() {  document.getElementById("myForm").reset();}</script>

2. (複习)querySelector

querySelector 里面不一定要放 id 或 class，用 HTML 内的属性(例如 href，src，name)也可以

document.querySelector('[name=item]')

3. 比较 map() vs. forEach

这是我在练习时发现的，如果使用 forEach 去遍历阵列，最后面接 join() 将会出错(undefined)，而 map 则不会出错，所以我把两者做一个比较，就比较能了解出错的原因了

map:

let arr = [1, 2, 3, 4];let doubled = arr.map(num => {    return num * 2;});// doubled = [2, 4, 6, 8]

forEach:

let arr = [1, 2, 3, 4];arr.forEach((num, index) => {    return (arr[index] = num * 2);});// arr = [2, 4, 6, 8]

所以 forEach 搭配 join() 出错(undefined)的原因，就是因为它不会 return 值啊~~~

4. 客製化 checkbox

如程式码所示，在 input 和 label 前加上一些小图示

.plates input {  display: none;}.plates input + label:before {  content: '⬜️';  margin-right: 10px;}.plates input:checked + label:before {  content: '?';}

全部练习的程式码都在此连结:
https://github.com/a90100/JavaScript30