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:

1. 遍歷後會返回一個新陣列
2. 用於會修改陣列值的狀況

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

// doubled = [2, 4, 6, 8]

forEach:

1. 遍歷後不會返回一個新陣列，而是修改原陣列
2. 因為會修改原陣列，所以主要應用在例如比較，印出值或是存到別的陣列的狀況

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