一、小標題:從Object轉對象
在JavaScript中,我們可以使用Object對象來表示一個無序的鍵/值對集合。因此,從Object轉換為對象是相當容易的。
// Object const obj = { name: 'John', age: 30 }; // Object轉對象 const newObj = { ...obj };
由於Object的鍵/值對是無序的,上述代碼可以保證新對象的鍵/值對與原對象的鍵/值對是一致的。
二、小標題:從Object轉實體
實體是指一個具體的事物,比如一個人、一件物品等。在JavaScript中,通常使用類(class)來定義實體。從Object轉換為實體需要我們手動定義實體,並將Object的鍵/值對轉換為實體的屬性。
class Person { constructor(name, age) { this.name = name; this.age = age; } } // Object const obj = { name: 'John', age: 30 }; // Object轉實體 const person = new Person(obj.name, obj.age);
在上述代碼中,我們手動定義了一個Person類,它有兩個屬性:name和age。然後我們根據Object的鍵/值對創建了一個新的Person實例。
三、小標題:從Object強轉對象
強制類型轉換是指將一個變數從一種類型轉換為另一種類型。在JavaScript中,我們可以使用parseInt、parseFloat、toString等函數來進行強制類型轉換。
從Object強轉為對象需要我們使用JSON.stringify和JSON.parse函數。我們先使用JSON.stringify將Object轉換為字元串,然後使用JSON.parse將字元串轉換為對象。
// Object const obj = { name: 'John', age: 30 }; // Object強轉對象 const obj2 = JSON.parse(JSON.stringify(obj));
在上述代碼中,我們將Object轉換為字元串,然後又將字元串轉換為對象。obj2與obj擁有相同的鍵/值對。
四、小標題:從Object強轉實體
與從Object強轉對象類似,我們也可以從Object強轉實體。需要我們先將Object轉換為字元串,然後再根據實體的屬性手動創建一個新的實體。
class Person { constructor(name, age) { this.name = name; this.age = age; } } // Object const obj = { name: 'John', age: 30 }; // Object強轉實體 const str = JSON.stringify(obj); const {name, age} = JSON.parse(str); const person = new Person(name, age);
在上述代碼中,我們先創建了一個Person類,然後將Object轉換為字元串,並解析出新的鍵/值對。最後根據解析出的鍵/值對創建一個新的Person實例。
五、小標題:工具類
在實際開發過程中,我們可能會遇到需要從Object轉換為實體的情況。為了方便地進行轉換,我們可以編寫一個工具類,將上述過程封裝起來。
class Convert { static toObject(obj) { return { ...obj }; } static toEntity(clazz, obj) { const keys = Object.keys(obj); const args = keys.map(key => obj[key]); return new clazz(...args); } static toObjectFromString(str) { return JSON.parse(str); } static toEntityFromString(clazz, str) { const obj = JSON.parse(str); const keys = Object.keys(obj); const args = keys.map(key => obj[key]); return new clazz(...args); } } // 使用示例 const obj = { name: 'John', age: 30 }; const person1 = Convert.toEntity(Person, obj); const str = JSON.stringify(obj); const person2 = Convert.toEntityFromString(Person, str);
在上述代碼中,我們編寫了一個Convert工具類,它有四個靜態方法:toObject、toEntity、toObjectFromString和toEntityFromString。toObject方法直接返回一個Object,toEntity方法需要我們傳入一個實體類和一個Object,並返回一個新的實體。toObjectFromString和toEntityFromString方法分別將字元串轉換為Object和實體。
六、小標題:從Object對象轉Map
Map是一種可迭代的數據結構,其中的鍵值對是按順序排列的。在JavaScript中,我們可以使用Object.entries函數將Object對象轉換為可迭代的鍵值對集合。
// Object const obj = { name: 'John', age: 30 }; // Object對象轉Map const map = new Map(Object.entries(obj));
在上述代碼中,我們使用Object.entries將Object對象轉換為鍵值對集合,並將其傳入Map的構造函數中來創建一個新的Map實例。
七、小標題:從DOM轉Object對象
在Web開發中,我們通常需要從DOM樹中獲取數據,並將其轉換為Object對象。在現代瀏覽器中,可以使用FormData對象輕鬆實現該功能。
const form = document.querySelector('form'); const formData = new FormData(form); const obj = Object.fromEntries(formData.entries());
在上述代碼中,我們首先獲取了一個form元素,然後使用FormData將其轉換為一個鍵值對集合。最後使用Object.fromEntries將鍵值對集合轉換為Object對象。
八、小標題:選取
在實際開發過程中,我們可能需要根據具體場景選擇不同的從Object轉換為實體的方法。
如果要求轉換速度比較快,可以選擇從Object轉對象或從Object強轉對象。如果要求轉換後的數據具有較高的可讀性,可以選擇從Object轉實體或從Object強轉實體。如果需要將Object對象轉換為可迭代的數據結構,可以選擇從Object對象轉Map。
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/156914.html