JS30-Day5 & Day6

介紹Flex-Box 與 JavaScript原生Fetch用法

Day 5

• Flex-Box 平常我會參考的兩個codepen連結 Flexbox Visual Playground Properties for the flex container

flex基本用法是在父層設定display: flex; 在子層設定flex: 1; 等同於flex: 1 1 0%; flex: flex-grow flex-shrink flex-basis; flex-grow，當子層寬度加總低於父層寬度時，依給予的數字做比例延伸 flex-shrink，當子層寬度加總高於父層寬度時，依給予的數字做比例縮減 flex-basis，基準值，若用auto，會以內容分配寬度

Day 6

• fetch() MDN 的 Fetch 說明 會以Promise做回應，基本用法如下：

fetch(url)
  .then(res => res.json())
  .then(res => console.log(res))
  .catch(error => console.error(error));

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    'Content-Type': 'application/json'
  })
});

用then接收Promise傳出的resolve(成功)，用catch接收Promise傳出的reject(失敗) 要注意的是fetch回傳出的是ReadableStream物件，簡單來說就是還要再處理一下才會變成可讀的資料，方法如下：

1. json()，輸出JSON
2. blob()，輸出Blob
3. text()，輸出字串
4. formData()，輸出表格資料
5. arrayBuffer()，不能理解，附上參考

• Regular Expression (RegExp)

const regexp = new RegExp(pattern, attributes);
stringObject.match(regexp);
stringObject.replace(regexp/substr,replacement);
stringObject.split(separator,howmany);

參數pattern放想要驗證的規則字串 參數attributes也是放字串但內容限定是’igm'，i代表不管大小寫都匹配，g代表找遍整個文件所有匹配的內容，m代表多行匹配但找到第一個就停止，三個字可依需求自選。 match()，輸出匹配的內容 replace()，代換匹配的部分 split()，分割成陣列，必須設定separator，howmany則是可選參數

• arrayObject.join(separator) 合併陣列值且會以參數separator做分隔