[筆記] 疑難雜症合輯 1 ~ 13

紀錄一些在 React 與 JS 學習與複習途中，產生出的問題與解法。

迴圈輸出放入變數

實現帶有變數的迴圈，並輸出從 1 到 20 的數字：

迴圈取出陣列物件

實現將多個物件存儲在陣列中，再透過迴圈取出這些物件並渲染它們：

取出物件的 `key` 並轉換為陣列

使用 JavaScript 的 Object.keys() 方法來取出一個物件的所有鍵名(key)並轉換為一個陣列：

const myObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
};

const keysArray = Object.keys(myObject);
console.log(keysArray);
// output: ['key1', 'key2', 'key3']

取得物件中的第二層key的名稱

const myObject = {
  key1: {
    subKey1: 'value1',
    subKey2: 'value2',
    subKey3: 'value3',
  },
  key2: {
    subKey4: 'value4',
    subKey5: 'value5',
    subKey6: 'value6',
  },
  key3: {
    subKey7: 'value7',
    subKey8: 'value8',
    subKey9: 'value9',
  },
};

const subKeysArray = Object.keys(myObject.key1);
console.log(subKeysArray); 
// output: ['subKey1', 'subKey2', 'subKey3']

將字串轉換成變數名稱

將一個字串轉換成變數名稱，可以使用以下方式：

const myVariableName = 'foo';
const myObject = {
  [myVariableName]: 'bar',
};

console.log(myObject.foo);
// output: 'bar'

需要注意的是:
使用這種方式定義變數名稱需要謹慎，因為它容易引起混淆和錯誤。因此，只有在確定需要使用時，才應該使用這種方式來定義變數名稱。

切換密碼顯示狀態

使用 state 來記錄密碼顯示的狀態，然後在切換時透過 setState 來改變狀態。接著再透過 state 的值來決定 input 的 type，示例：

簡化程式 class 運算式

目標：把這段很亂的程式碼簡化好維護

className={`${style.update_body_layout} ${
  step === 1 ? style.step1 :
  step === 2 ? style.step2 :
  step === 3 ? style.step3 : ''
} ${modalOpenValue === 'view' && style.viewer}`}

使用 array.join()

className={[style.update_body_layout,
  step === 1 ? style.step1 :
  step === 2 ? style.step2 :
  step === 3 ? style.step3 : '',
  modalOpenValue === 'view' && style.viewer
  ].join(' ')}

使用 classnames 套件

首先需要先安裝 classnames：（已安裝可以PASS）

npm install classnames

然後在程式碼中引入 classnames：

import classNames from 'classnames';

接著可以將原本的 className 屬性值改成以下的形式：

className={classNames(style.update_body_layout, {
  [style.step1]: step === 1,
  [style.step2]: step === 2,
  [style.step3]: step === 3,
  [style.viewer]: modalOpenValue === 'view',
})}

這樣就可以根據條件動態添加或移除不同的 class 名稱，讓程式碼更簡潔易讀。

將對應字串轉換為數字

使用 switch case

可以使用 switch case 來將 userData.userRole 轉換為數字 1～3，例如：

let roleNumber;

switch (userData.userRole) {
  case '管理員':
    roleNumber = 1;
    break;
  case '使用者':
    roleNumber = 2;
    break;
  case '查閱者':
    roleNumber = 3;
    break;
  default:
    roleNumber = null;
}

// 在 JSX 中使用：
<div>{roleNumber}</div>

使用 JavaScript 物件

使用一個 JavaScript 物件來儲存每個角色對應的數字，例如：

const roleNumberMap = {
  管理員: 1,
  使用者: 2,
  查閱者: 3,
};

// 在 JSX 中使用：
<div>{roleNumberMap[userData.userRole]}</div>

如果 userData.userRole 不在這個物件中，會返回 undefined。

如果需要將它轉換為 null，可以在取值的時候再加上一個判斷：

const roleNumber = roleNumberMap[userData.userRole] ?? null;

當前裝置資訊

可以透過 navigator.userAgent 取得當前瀏覽器裝置資訊，以下示例，可在 component 的 state 中儲存當前裝置的資訊：

Yup 驗證 File 檔案並限制格式與大小

要驗證文件的格式和大小，可以使用 yup.mixed().test() 方法來自定義驗證規則。下面是一個示例，演示如何使用 Yup 驗證上傳的文件：

import * as Yup from 'yup';

const fileSchema = Yup.mixed()
  .test('fileFormat', '只允許上傳 JPG 或 PNG 格式的圖片', (value) => {
    if (!value) return true; // 允許空值，如果必填需删除此行
    const supportedFormats = ['image/jpeg', 'image/png'];
    return supportedFormats.includes(value.type);
  })
  .test('fileSize', '文件大小不能超過 5MB', (value) => {
    if (!value) return true; // 允許空值，如果必填需删除此行
    const maxSize = 5 * 1024 * 1024; // 5MB
    return value.size <= maxSize;
  });

取得當前年份

要在 <footer> 中的版權聲明中顯示當前年份，可以使用 JavaScript 的 Date 物件來獲取當前的年份。

<footer>
  <p>All content and images Copyright © <span id="currentYear"></span> Name</p>
</footer>

<script>
  // 取得當前年份
  var currentYear = new Date().getFullYear();
  // 將年份插入到 HTML 中的元素中
  document.getElementById('currentYear').textContent = currentYear;
</script>