當使用useState定義的狀態變量是一個具有屬性的對象時，如何更新它可能有些困惑。 你不能只是更新對象，否則組件將不會重新渲染。 我找到的一種模式涉及創建一個帶有一個屬性的臨時對象，並使用對象解構來從現有的兩個對象中創建一個新對象： const [quizAnswers, setQuizAnswers] = useState({}) ... const updatedValue = {} updatedValue[quizEntryIndex] = answerIndex setQuizAnswers({ ...quizAnswers, ...updatedValue }) 同樣的技巧也可以用於刪除屬性： const copyOfObject = { ...quizAnswers } delete copyOfObject['propertyToRemove'] setQuizAnswers({ ...copyOfObject })
讓我們來看看如何在JavaScript中按照屬性值對對象數組進行排序吧！ 假設你有一個對象數組。 你可能面臨這樣的問題：如何按照某個屬性的值對該數組進行排序？ 假設你有如下的對象數組： const list = [ { color: 'white', size: 'XXL' }, { color: 'red', size: 'XL' }, { color: 'black', size: 'M' } ] 你想要渲染這個列表，但首先你想要按照其中一個屬性的值對其進行排序。比如按照顏色名稱的字母順序排序：black, red, white。 你可以使用Array的sort()方法，該方法接受一個回調函數作為參數，該回調函數接受數組中的兩個對象（我們稱之為 a 和 b）作為參數： list.sort((a, b) => (a.color > b.color) ? 1 : -1) 當我們返回1時，該函數告訴sort()函數在排序中應該優先選擇對象b而不是對象a。返回-1則相反。 回調函數還可以計算其他屬性，以處理顏色相同的情況，同時根據第二個屬性進行排序： list.sort((a, b) => (a.color > b.color) ? 1 : (a.color === b.color) ? ((a.size > b.size) ? 1 : -1) : -1)
了解如何檢查變量是否等於空對象 假設你想要檢查一個變量是否等於空對象，可以使用對象字面語法創建空對象： const emptyObject = {} 你要如何做到呢？ 使用Object.entries()函數。 它會返回一個包含對象可枚舉屬性的數組。 使用方式如下： Object.entries(objectToCheck) 如果返回一個空數組，則表示該對象沒有任何可枚舉屬性，從而意味著它是空的。 Object.entries(objectToCheck).length === 0 同時，你還應該確保該對象真正是一個對象，通過檢查它的構造函數是否為Object： objectToCheck.constructor === Object 一個常用的庫Lodash可以簡化這個過程，提供了isEmpty()函數： _.isEmpty(objectToCheck)
今天我有需要檢查一個物件是否為空的需求。 由於在JavaScript中，物件是透過參考來進行比較的，因此無法像下面這樣進行簡單的比較： const obj = {} if (obj === {}) { //no } 解決方法是將該物件傳遞給內建的 Object.keys() 方法，然後檢查該物件的建構函式是否為 Object： const obj = {} Object.keys(obj).length === 0 && obj.constructor === Object 重要的是要添加第二個檢查，以避免出現誤報。
在本文中，我們將介紹 JavaScript 中物件的 hasOwnProperty() 方法。 hasOwnProperty() 方法被調用在一個物件實例上，並接受一個字串作為參數。如果該物件有一個與參數字串相同名稱的屬性，它將返回 true。否則，它將返回 false。 以下是一個例子： const person = { name: 'Fred', age: 87 } person.hasOwnProperty('name') // 返回 true person.hasOwnProperty('job') // 返回 false