js的json对象怎么追加对象

JavaScript中向JSON对象追加对象的实用方法

在JavaScript开发中,我们经常需要操作JSON对象（在JS中本质上是普通对象），向现有的JSON对象中追加新的对象或属性是一项常见任务，本文将详细介绍几种在JavaScript中向JSON对象追加对象的方法，并提供实用的代码示例。

直接属性赋值

最简单直接的方法是使用点表示法或方括号表示法来添加新的属性或对象。

// 原始JSON对象
let originalObj = {
  name: "张三",
  age: 25
};
// 添加单个属性
originalObj.city = "北京";
// 添加另一个对象作为属性
originalObj.address = {
  street: "长安街",
  number: 123
};
console.log(originalObj);
// 输出:
// {
//   name: "张三",
//   age: 25,
//   city: "北京",
//   address: {
//     street: "长安街",
//     number: 123
//   }
// }

使用Object.assign()

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，我们可以用它来合并对象。

// 原始JSON对象
let originalObj = {
  name: "李四",
  age: 30
};
// 要追加的对象
let newObjToAdd = {
  city: "上海",
  occupation: "工程师"
};
// 使用Object.assign合并
let mergedObj = Object.assign(originalObj, newObjToAdd);
console.log(mergedObj);
// 输出:
// {
//   name: "李四",
//   age: 30,
//   city: "上海",
//   occupation: "工程师"
// }

注意：Object.assign()会修改原始对象，如果你不想修改原始对象，可以传入一个空对象作为第一个参数：

let mergedObj = Object.assign({}, originalObj, newObjToAdd);

使用展开运算符（ES6+）

ES6引入的展开运算符（...）提供了一种更简洁的方式来合并对象。

// 原始JSON对象
let originalObj = {
  name: "王五",
  age: 28
};
// 要追加的对象
let newObjToAdd = {
  city: "广州",
  hobby: "摄影"
};
// 使用展开运算符合并
let mergedObj = { ...originalObj, ...newObjToAdd };
console.log(mergedObj);
// 输出:
// {
//   name: "王五",
//   age: 28,
//   city: "广州",
//   hobby: "摄影"
// }

这种方法同样不会修改原始对象,而是返回一个新对象。

动态追加对象属性

有时候我们需要根据变量名动态添加属性：

let originalObj = {
  id: 1,
  product: "手机"
};
let dynamicKey = "price";
let dynamicValue = 2999;
// 使用方括号表示法动态添加属性
originalObj[dynamicKey] = dynamicValue;
console.log(originalObj);
// 输出:
// {
//   id: 1,
//   product: "手机",
//   price: 2999
// }

向数组类型的JSON对象追加对象

如果JSON对象包含数组属性,我们可以使用数组的push()方法向其中追加对象：

let originalObj = {
  user: "赵六",
  orders: [
    { id: 1, item: "键盘" },
    { id: 2, item: "鼠标" }
  ]
};
// 向orders数组追加新对象
originalObj.orders.push({ id: 3, item: "显示器" });
console.log(originalObj);
// 输出:
// {
//   user: "赵六",
//   orders: [
//     { id: 1, item: "键盘" },
//     { id: 2, item: "鼠标" },
//     { id: 3, item: "显示器" }
//   ]
// }