千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > Object转实体对象详解

Object转实体对象详解

来源:千锋教育
发布人:xqq
时间: 2023-11-22 23:27:11 1700666831

一、小标题:从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。

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT