迹忆客 专注技术分享

在 JavaScript 中将对象推送到数组

使用 Array.push() 方法将对象推送到数组，例如 arr.push(object);。

Array.push() 方法会将提供的对象推送到数组的末尾。

const arr = [];

const obj = {name: 'Tom'};

arr.push(obj);

console.log(arr); // 👉️ [{name: 'Tom'}]

我们使用 Array.push() 方法将对象推送到数组。

该对象被推到数组的末尾。

如果我们只有对象应包含的值，请在将对象推入数组之前创建对象。

const arr = [];

const obj = {};
const name = 'Tom';

obj['name'] = name;

arr.push(obj);

console.log(arr); // 👉️ [{name: 'Tom'}]

我们可以使用括号表示法向对象添加一个或多个键值对。

将键值对分配给对象后，使用 Array.push() 方法将对象添加到数组的末尾。

在声明时将对象添加到数组中

如果你还没有声明数组，你可以在声明变量时将对象添加到数组中。

const obj1 = {name: 'Tom'};
const obj2 = {name: 'Alice'};

const arr = [obj1];
console.log(arr); // [ { name: 'Tom' } ]

const arr2 = [obj1, obj2];
console.log(arr2); // [ { name: 'Tom' }, { name: 'Alice' } ]

我们在方括号之间添加了对象来声明一个对象数组。

使用 Array.push() 将多个对象推送到数组

可以使用相同的方法将多个对象推送到一个数组。

const arr = [];

const obj1 = {name: 'Alice'};
const obj2 = {name: 'Jiyik'};
const obj3 = {name: 'Carl'};

arr.push(obj1, obj2, obj3);

// 👇️ [{name: 'Alice'}, {name: 'Jiyik'}, {name: 'Carl'}]
console.log(arr);

我们使用 Array.push() 方法在一条语句中将 3 个对象推送到一个数组。

Array.push() 方法获取一个或多个值并将它们推送到数组。

这使我们能够在调用 push() 方法时将多个以逗号分隔的对象作为参数传递。

使用 unshift() 将对象推送到数组的开头

如果要将对象推到数组的开头，请使用 Array.prototype.unshift() 方法。

const arr = [{id: 2, name: 'Jiyik'}];

const obj = {id: 1, name: 'Alice'};

arr.unshift(obj);

// 👇️ [ { id: 1, name: 'Alice' }, { id: 2, name: 'Jiyik' } ]
console.log(arr);

Array.unshift() 方法将一个或多个元素添加到数组的开头。

将多个对象推送到数组的开头

Array.unshift() 方法也可以用多个对象调用。

const arr = [{id: 3, name: 'Carl'}];

const obj1 = {id: 1, name: 'Alice'};
const obj2 = {id: 2, name: 'Jiyik'};

arr.unshift(obj1, obj2);

// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Jiyik' },
//   { id: 3, name: 'Carl' }
// ]
console.log(arr);

该语句将 2 个提供的对象添加到数组的开头。

我们还可以使用点表示法将键值对添加到对象。 只需确保键的名称不包含空格并且不以特殊字符开头。

let arr = [];

const obj = {};

obj.name = 'Tom';
obj.age = 30;

console.log(obj); // 👉️ { name: 'Tom', age: 30 }

arr.push(obj);

console.log(arr); // 👉️ [ { name: 'Tom', age: 30 } ]

使用点符号向对象添加属性更加简洁和优雅。

但是，如果键的名称包含空格，请确保使用括号表示法。

或者，我们可以使用扩展语法 ... 将对象推入数组。

使用扩展语法将对象推入数组

将对象压入数组：

1. 使用 let 关键字声明数组。
2. 使用扩展语法 ... 解压数组并添加对象。
3. 将数组变量的值重新分配给结果。

let arr = [{id: 1, name: 'Alice'}];

const obj = {id: 2, name: 'Jiyik'};

arr = [...arr, obj];

// 👇️ [ { id: 1, name: 'Alice' }, { id: 2, name: 'Jiyik' } ]
console.log(arr);

我们使用扩展语法 ... 将数组的元素解包到一个新数组中，并在末尾添加对象。

可以想象 ... 语法将数组的元素（对象）解压缩到一个新数组中，我们可以向其中添加其他对象。

请注意 ，我们在声明 arr 变量时使用了 let 关键字。

这很重要，因为不能重新分配使用 const 声明的变量。

如果你想在数组的开头添加对象，你也可以在对象之后解压数组。

let arr = [{id: 1, name: 'Alice'}];

const obj = {id: 2, name: 'Jiyik'};

arr = [obj, ...arr];

// 👇️ [ { id: 2, name: 'Jiyik' }, { id: 1, name: 'Alice' } ]
console.log(arr);

数组元素解包的顺序被保留。

如果需要将对象推入特定索引处的数组，请使用 Array.splice() 方法。

使用 Array.splice() 将对象推送到数组

使用 Array.splice() 方法将对象推送到数组，例如 arr.splice(1, 0, object);。

Array.splice() 方法将插入对象的索引和对象作为参数。

const arr = [
  {id: 1, name: 'Alice'},
  {id: 3, name: 'Carl'},
];

const obj2 = {id: 2, name: 'Jiyik'};

arr.splice(1, 0, obj2);

// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Jiyik' },
//   { id: 3, name: 'Carl' }
// ]
console.log(arr);

代码示例将对象插入数组中索引为 1 的位置。

我们将以下参数传递给 Array.splice() 方法：

1. start 索引 - 开始更改数组的索引。
2. delete 计数 - 从起始索引开始要从数组中删除的元素数。
3. 从 start 开始添加到数组的元素。

我们使用 1 作为起始索引，将对象添加到索引 1 处的数组。

我们为 delete count 参数指定了 0 值，以不从数组中删除任何元素。

最后，我们将对象作为第三个参数传递给 Array.splice() 方法。

我们可以使用相同的方法将多个对象添加到指定索引处的数组。

const arr = [
  {id: 1, name: 'Alice'},
  {id: 4, name: 'Dean'},
];

const obj2 = {id: 2, name: 'Jiyik'};
const obj3 = {id: 3, name: 'Carl'};

arr.splice(1, 0, obj2, obj3);

// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Jiyik' },
//   { id: 3, name: 'Carl' },
//   { id: 4, name: 'Dean' }
// ]
console.log(arr);

我们将多个对象传递给 Array.splice() 方法，它们都被添加到从索引 1 开始的数组中。

使用 Array.concat 将对象推送到数组

我们还可以使用 Array.concat() 方法将对象推送到数组。

const arr = [];

const obj1 = {name: 'Tom'};
const obj2 = {name: 'Alice'};

const arr2 = arr.concat(obj1, obj2);

console.log(arr2); // 👉️ [ { name: 'Tom' }, { name: 'Alice' } ]

Array.concat 方法用于合并两个或多个数组。

我们在第一个数组上调用了 concat() 方法并向它传递了 2 个对象。

可以根据需要使用尽可能多的逗号分隔值调用 concat() 方法。

该方法返回一个新数组，该数组首先由调用它的数组中的元素填充。然后，每个提供的对象都被添加到新数组中。