1. PingCode智库首页
  2. 百科

js怎么转化对象

Edit2 • • 百科

js怎么转化对象

JavaScript 对象转换的多种方法有：JSON.stringify()、Object.keys()、Object.values()、Object.entries()。这些方法在不同的情境下都有各自的用途，本文将详细解释这些方法的使用方法和注意事项。

在实际开发中，我们经常需要对对象进行各种转换操作，比如将对象转换为JSON字符串、获取对象的键和值、将对象转换为数组等。下面我们将逐一介绍这些方法及其应用场景。

一、JSON.stringify()

1.1 基本用法

JSON.stringify() 方法用于将一个JavaScript对象转换为JSON字符串。这个方法在处理数据传输、存储等场景中非常有用。

let obj = { name: "John", age: 30, city: "New York" };


let jsonString = JSON.stringify(obj);


console.log(jsonString); // 输出：{"name":"John","age":30,"city":"New York"}

1.2 参数详解

JSON.stringify() 方法可以接受三个参数：

  1. value：要转换的JavaScript对象。
  2. replacer：一个函数或数组，用于筛选或修改对象的属性。
  3. space：用于控制输出的缩进。

let obj = { name: "John", age: 30, city: "New York" };


let jsonString = JSON.stringify(obj, null, 2);


console.log(jsonString);

输出：

{


  "name": "John",


  "age": 30,


  "city": "New York"


}

1.3 处理循环引用

如果对象包含循环引用，JSON.stringify() 会抛出错误。可以使用第三方库如 circular-json 来处理这种情况。

const CircularJSON = require('circular-json');


let obj = { name: "John" };


obj.self = obj;


let jsonString = CircularJSON.stringify(obj);


console.log(jsonString); // 输出：{"name":"John","self":"~"}

二、Object.keys()

2.1 基本用法

Object.keys() 方法返回一个包含对象自身可枚举属性名称的数组。

let obj = { name: "John", age: 30, city: "New York" };


let keys = Object.keys(obj);


console.log(keys); // 输出：["name", "age", "city"]

2.2 遍历对象

使用Object.keys() 可以方便地遍历对象的属性。

let obj = { name: "John", age: 30, city: "New York" };


Object.keys(obj).forEach(key => {


  console.log(`${key}: ${obj[key]}`);


});

输出：

name: John


age: 30


city: New York

三、Object.values()

3.1 基本用法

Object.values() 方法返回一个包含对象自身可枚举属性值的数组。

let obj = { name: "John", age: 30, city: "New York" };


let values = Object.values(obj);


console.log(values); // 输出：["John", 30, "New York"]

3.2 应用场景

Object.values() 在需要对对象的值进行操作时非常有用，比如求和、过滤等。

let obj = { a: 1, b: 2, c: 3 };


let sum = Object.values(obj).reduce((total, value) => total + value, 0);


console.log(sum); // 输出：6

四、Object.entries()

4.1 基本用法

Object.entries() 方法返回一个包含对象自身可枚举属性键值对的数组。

let obj = { name: "John", age: 30, city: "New York" };


let entries = Object.entries(obj);


console.log(entries); // 输出：[["name", "John"], ["age", 30], ["city", "New York"]]

4.2 转换为Map

Object.entries() 可以方便地将对象转换为Map，这在需要保持键值对顺序时非常有用。

let obj = { name: "John", age: 30, city: "New York" };


let map = new Map(Object.entries(obj));


console.log(map); // 输出：Map(3) {"name" => "John", "age" => 30, "city" => "New York"}

4.3 反向操作

使用Object.fromEntries() 可以将键值对数组转换回对象。

let entries = [["name", "John"], ["age", 30], ["city", "New York"]];


let obj = Object.fromEntries(entries);


console.log(obj); // 输出：{ name: "John", age: 30, city: "New York" }

五、对象深拷贝

5.1 JSON.parse() 和 JSON.stringify()

一种常见的深拷贝方法是结合使用JSON.stringify() 和 JSON.parse()。

let obj = { name: "John", age: 30, city: "New York" };


let deepCopy = JSON.parse(JSON.stringify(obj));


console.log(deepCopy); // 输出：{ name: "John", age: 30, city: "New York" }

5.2 Lodash 的 cloneDeep

Lodash 是一个强大的JavaScript库，其中的 cloneDeep 方法可以用来进行深拷贝。

const _ = require('lodash');


let obj = { name: "John", age: 30, city: "New York" };


let deepCopy = _.cloneDeep(obj);


console.log(deepCopy); // 输出：{ name: "John", age: 30, city: "New York" }

六、对象合并

6.1 Object.assign()

Object.assign() 方法用于将一个或多个源对象的所有可枚举属性复制到目标对象。

let target = { name: "John" };


let source = { age: 30, city: "New York" };


Object.assign(target, source);


console.log(target); // 输出：{ name: "John", age: 30, city: "New York" }

6.2 扩展运算符

使用扩展运算符（…）可以更加简洁地合并对象。

let target = { name: "John" };


let source = { age: 30, city: "New York" };


let merged = { ...target, ...source };


console.log(merged); // 输出：{ name: "John", age: 30, city: "New York" }

七、对象属性定义

7.1 Object.defineProperty()

Object.defineProperty() 方法可以精确地添加或修改对象的属性。

let obj = {};


Object.defineProperty(obj, 'name', {


  value: 'John',


  writable: false,


  enumerable: true,


  configurable: true


});


console.log(obj.name); // 输出：John


obj.name = 'Doe'; // 无法修改属性值


console.log(obj.name); // 输出：John

7.2 Object.defineProperties()

Object.defineProperties() 方法可以同时定义多个属性。

let obj = {};


Object.defineProperties(obj, {


  'name': {


    value: 'John',


    writable: false,


    enumerable: true,


    configurable: true


  },


  'age': {


    value: 30,


    writable: true,


    enumerable: true,


    configurable: true


  }


});


console.log(obj); // 输出：{ name: "John", age: 30 }

八、对象冻结

8.1 Object.freeze()

Object.freeze() 方法可以冻结对象，使其不能被修改。

let obj = { name: "John", age: 30 };


Object.freeze(obj);


obj.age = 31; // 无法修改属性值


console.log(obj.age); // 输出：30

8.2 深度冻结

Object.freeze() 只能冻结对象的第一层属性，无法冻结嵌套对象。可以通过递归实现深度冻结。

function deepFreeze(object) {


  let propNames = Object.getOwnPropertyNames(object);


  for (let name of propNames) {


    let value = object[name];


    if (value && typeof value === 'object') {


      deepFreeze(value);


    }


  }


  return Object.freeze(object);


}


let obj = { name: "John", address: { city: "New York" } };


deepFreeze(obj);


obj.address.city = "Los Angeles"; // 无法修改嵌套对象的属性值


console.log(obj.address.city); // 输出：New York

九、对象拷贝

9.1 浅拷贝

浅拷贝只复制对象的第一层属性，可以使用Object.assign() 或扩展运算符实现。

let obj = { name: "John", age: 30 };


let shallowCopy = { ...obj };


shallowCopy.age = 31;


console.log(obj.age); // 输出：30

9.2 深拷贝

深拷贝可以使用递归、JSON方法或第三方库（如Lodash）实现。

function deepCopy(object) {


  if (!object || typeof object !== 'object') {


    return object;


  }


  let copy = Array.isArray(object) ? [] : {};


  for (let key in object) {


    if (object.hasOwnProperty(key)) {


      copy[key] = deepCopy(object[key]);


    }


  }


  return copy;


}


let obj = { name: "John", address: { city: "New York" } };


let deepCopyObj = deepCopy(obj);


deepCopyObj.address.city = "Los Angeles";


console.log(obj.address.city); // 输出：New York

十、对象比较

10.1 浅比较

浅比较只比较对象的第一层属性值是否相等。

function shallowEqual(obj1, obj2) {


  if (obj1 === obj2) return true;


  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) return false;


  let keys1 = Object.keys(obj1);


  let keys2 = Object.keys(obj2);


  if (keys1.length !== keys2.length) return false;


  for (let key of keys1) {


    if (!obj2.hasOwnProperty(key) || obj1[key] !== obj2[key]) return false;


  }


  return true;


}


let obj1 = { name: "John", age: 30 };


let obj2 = { name: "John", age: 30 };


console.log(shallowEqual(obj1, obj2)); // 输出：true

10.2 深比较

深比较递归比较对象的所有嵌套属性。

function deepEqual(obj1, obj2) {


  if (obj1 === obj2) return true;


  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) return false;


  let keys1 = Object.keys(obj1);


  let keys2 = Object.keys(obj2);


  if (keys1.length !== keys2.length) return false;


  for (let key of keys1) {


    if (!obj2.hasOwnProperty(key) || !deepEqual(obj1[key], obj2[key])) return false;


  }


  return true;


}


let obj1 = { name: "John", address: { city: "New York" } };


let obj2 = { name: "John", address: { city: "New York" } };


console.log(deepEqual(obj1, obj2)); // 输出：true

结论

JavaScript 提供了多种方法来转换和操作对象，包括 JSON.stringify()、Object.keys()、Object.values()、Object.entries() 等等。通过合理使用这些方法，我们可以方便地处理对象的各种转换需求。无论是数据传输、存储，还是对象属性的获取和修改，这些方法都能极大地提高我们的开发效率。在实际开发中，选择合适的方法并结合具体场景应用，能让我们的代码更加简洁、易读和高效。

相关问答FAQs：

1. 如何将JSON字符串转换为JavaScript对象？

将JSON字符串转换为JavaScript对象可以使用JSON.parse()方法。使用该方法可以将符合JSON格式的字符串转换为对应的JavaScript对象。例如：

var jsonString = '{"name":"John","age":30,"city":"New York"}';
var obj = JSON.parse(jsonString);
console.log(obj.name); // 输出：John

2. 如何将JavaScript对象转换为JSON字符串？

将JavaScript对象转换为JSON字符串可以使用JSON.stringify()方法。使用该方法可以将JavaScript对象转换为符合JSON格式的字符串。例如：

var obj = { name: "John", age: 30, city: "New York" };
var jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出：{"name":"John","age":30,"city":"New York"}

3. 如何将一个普通对象转换为JavaScript对象？

如果要将一个普通对象转换为JavaScript对象，可以使用对象字面量的方式进行转换。例如：

var obj = { name: "John", age: 30, city: "New York" };
console.log(obj.name); // 输出：John

注意，这种方式创建的对象是JavaScript的原生对象，不是JSON对象。如果要将该对象转换为JSON字符串，可以使用JSON.stringify()方法。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3889088

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部