Javascript数组推送—如何在数组中添加元素

847 阅读8分钟

数组是列表对象,其原型有方法来执行突变操作。JavaScript数组的长度和其元素的类型都不是固定的。JavaScript数组被用来在一个单一的变量中存储多个值。一个数组数据结构可以在一个名称下保存许多值,你可以通过引用索引号来访问这些值。

我们可以用以下方法在数组中添加新的项目:

  1. javascript数组push()方法在数组的末端添加项目。
  2. javascript数组unshift()方法在数组的开头添加项目。
  3. Javascript数组splice() 方法用于在数组中添加元素。

让我们来谈谈如何在Javascript中添加元素。

Javascript数组推送

数组push()是一个内置的JavaScript函数,在数组的末尾添加一个新元素,并返回新的长度。**push()**方法可以修改数组 或集合的长度,它可以向数组中添加数字字符串对象 、数组或任何值。

语法

让我们看看 数组push()方法的语法:

array.push(element)

你可以使用push()方法在一次调用中向数组中追加一个以上的值:

array.push(item1, item2, item3,...,itemN)

参数

Javascript push()方法接收要添加到数组中的项目。

返回值

它返回代表数组新长度的数字。

push()方法可以和类似数组的对象的**call()apply()**一起使用。array.push()方法依赖于长度 属性来决定在哪里插入给定的元素。

如果长度不能转换为数字,那么使用的索引就是0。

它包括长度不存在的可能性,在这种情况下,长度也将被创建。

例子

data = ['Python', 'Javascript', 'PHP']
len = data.push('Golang')
console.log('The modified array is: ', data)
console.log('The length of modified array is: ', len)

输出

The modified array is:  [ 'Python', 'Javascript', 'PHP', 'Golang' ]
The length of modified array is:  4

首先,我们定义了一个数组,然后添加一个名为Golang 的新项,并存储新的数组长度。然后打印变异的数组和它的长度。

Javascript添加到数组

在JavaScript数组中添加元素是指在数组中添加尽可能多的元素,如整数、字符串、数组、对象、字符串数组、整数数组、数组数组。

例子

让我们以 Node.js为例来了解如何在javascript中向数组中添加一个项目:

// app.js

const songs = ['Dangerous', 'Thriller'];
const totalSongs = songs.push('Stranger In Moscow');

console.log(totalSongs);

console.log(songs);

请看输出:

es git:(master) ✗ node app
3
[ 'Dangerous', 'Thriller', 'Stranger In Moscow' ]

在这个例子中,我们已经添加了第三个元素 "Stanger in Moscow"。在向数组中添加了一个项目后,我们打印了变异的数组和它的长度。

在数组中添加多个元素

要在JavaScript数组中添加多个元素,可以使用array.push()函数。我们可以在一个时间内添加多个元素作为参数。

例子

data = ['Python', 'Javascript', 'PHP']
len = data.push('Golang', 'C#', 'Swift')
console.log('The modified array is: ', data)
console.log('The length of modified array is: ', len)

输出

The modified array is:  [ 'Python', 'Javascript', 'PHP', 'Golang', 'C#', 'Swift' ]
The length of modified array is:  6

你可以看到,我们一次就添加了三个元素,所有的元素都被添加到数组中。push()函数可以用多个参数调用,这些参数将被依次追加到数组中。

在Javascript中使用数组push()合并数组

要在JavaScript中合并数组,可以使用array.push()函数。你可以使用array.push()方法来合并数组。让我们举个例子,看看我们如何合并两个数组。

例子

// server.js

const artists = ['michael', 'elvis'];
const newArtists = ['justin', 'charlie'];

Array.prototype.push.apply(artists, newArtists);

console.log(artists);

请看输出结果:

es git:(master) ✗ node app
[ 'michael', 'elvis', 'justin', 'charlie' ]es git:(master) ✗

如果第二个数组(本例中的newArtists不要使用apply()方法。这是因为一个函数所能处理的最大参数数在实践中是有限的。

所以,apply()将把第二个数组添加到第一个数组中,我们可以通过返回原始数组看到组合后的数组,在我们的例子中,它是艺术家。

如果你想把一个数组的项目追加到另一个数组中,你可以使用数组的concat()函数。 我们也可以使用Javascript的concat()方法来合并数组。

请看下面的代码。我们已经采取了一个字符串数组:

// server.js

const artists = ['michael', 'elvis'];

artists.push('justin', 'charlie');

console.log(artists); // ['michael', 'elvis', 'justin', 'charlie']

在这里,我们又添加了两个艺术家。现在,请看下面的代码:

// server.js

const artists = ['michael', 'elvis'];
const newArtists = ['justin', 'charlie'];
artists.push(newArtists);

console.log(artists);

请看输出:

es git:(master) ✗ node app
[ 'michael', 'elvis', [ 'justin', 'charlie' ] ]
➜  es git:(master) ✗

这里,第三个元素是一个数组。所以它已经把第三项作为一个完整的数组加入。所以我们不能像我们用apply()那样合并它。

我们可以用Javascript的pop()方法从数组中删除这个元素。

使用数组push()将对象添加到数组中

要在JavaScript中向数组中添加一个对象,可以使用array.push()方法。 push()方法将一个或多个元素添加到一个数组的末端。array.push()函数返回形成的数组的新长度。一个对象可以被插入,绕过对象作为push()方法的参数。因此,该对象被添加到数组的末端。

例子

在这里,请看下面的代码:

// app.js

arrObj = [
  {
    name: 'Krunal',
    age: 26
  },
  {
    name: 'Ankit',
    age: 24
  }
];
arrObj.push({
  name: 'Rushabh',
  age: 27
});
console.log(arrObj);

请看下面的输出:

➜  es git:(master) ✗ node app
[ { name: 'Krunal', age: 26 },
  { name: 'Ankit', age: 24 },
  { name: 'Rushabh', age: 27 } ]
➜  es git:(master) ✗

如果你想添加一个对象到数组中,你必须传递一个对象作为参数,并确保键值是相同的。 所以,这就是如何在Javascript中把键和值都推入数组。

使用push()将数组添加到数组中

要在JavaScript中把一个数组添加到一个数组中,可以使用array.push()方法。push()函数允许我们将一个数组推入一个数组。 我们可以把一个数组添加到一个数组中,就像把一个元素添加到数组中一样。

例子

// app.js

arrArray = [
  ['Krunal', 'Ankit'],
  ['Rushabh', 'Dhaval']
];
arrArray.push([
  'Tejash', 'Rajesh'
]);
console.log(arrArray);

请看输出:

Javascript Array Push Example | Add Element To Array In JS

如果你只是追加单个变量,那么array.push()方法就会像一个魅力十足的工具。如果你要追加另一个数组,请使用concat()方法。当你不需要修改原始数组时,这种方法是有益的,这就是为什么它是标准的做法,并被Javascript社区所适应。

data = ['Python', 'Javascript', 'PHP']
data2 = ['Java', 'Kotlin', 'Swift']

langs = data.concat(data2)
console.log(data)
console.log(data2)
console.log(langs)

输出

[ 'Python', 'Javascript', 'PHP' ]
[ 'Java', 'Kotlin', 'Swift' ]
[ 'Python', 'Javascript', 'PHP', 'Java', 'Kotlin', 'Swift' ]

Javascript数组concat()是一个纯粹的函数,不改变其原始数组。相反,它返回一个新的数组。因此,请在此确保concat()函数创建了一个新的数组。

它不会对现有的数组进行添加或追加,而是简单地创建一个副本,在该副本中执行操作,并返回该数组。

Javascript的array.push.apply()函数对于将一个数组添加到数组中也很有用。

let arr = ['Python'];
arr.push('Javascript', 'PHP');
arr.push.apply(arr, ['Dart', 'Golang']);
console.log(arr);

输出

[ 'Python', 'Javascript', 'PHP', 'Dart', 'Golang' ]

你可以使用push()和apply()函数来追加两个数组。

现在,从2016年的更新来看:通过传播,你不再需要那个apply()方法了:

let arr = ['Python'];
arr.push('Javascript', 'PHP');
arr.push(...['Dart', 'Golang']);
console.log(arr);

输出

[ 'Python', 'Javascript', 'PHP', 'Dart', 'Golang' ]

你可以看到输出是一样的,但这种方式更简洁,对其他编码者更有吸引力。

在JavaScript中追加多维数组

要在JavaScript中追加多维数组,使用array.push()方法。

这里的元素将是一个数组。

例子

请看下面的编程例子:

// app.js
 mulArray = [];
 $data = ['Tejash', 'Rajesh'];
 $info = [35, 40];
 mulArray.push($data, $info);
 console.log(mulArray);

请看输出;

es git:(master) ✗ node app
[ [ 'Tejash', 'Rajesh' ], [ 35, 40 ] ]
➜  es git:(master) ✗

有几种方法可以将新的元素追加到JavaScript数组中。如果你想在JavaScript中删除数组中的元素,我们也有一篇文章来介绍。

请看下面的方法。

将一个元素添加到数组中的特定位置

要添加一个元素到一个特定的位置,你需要参考它在数组中的索引位置。 这里我们在指定的位置添加两个新元素。

例子

// app.js
let list = ["foo", "bar"];
list[2] = "baz";
list[3] = "qux";
console.log(list)

请看下面的输出:

Add an element at specified an index

将元素添加在 阵列的开始

使用unshift()方法:它和push一样,只是它把元素插入到数组的开始而不是结束:

  1. unshift/push:在数组的开头/结尾添加一个元素。
  2. shift/pop:删除并返回数组的第一个/最后一个元素。

下面是一个简单的图:

   unshift -> array <- push
   shift   <- array -> pop

和图表如下:

          add  remove  start  end
   push    X                   X
    pop           X            X
unshift    X             X
  shift           X      X

总结

JavaScript数组push()是一个用来将新的HTML元素纳入一个数组的函数。默认情况下,push()方法会将新的项目附加在数组的末尾。 当JavaScript push()函数应用于一个数组后,它将提供一个特定的返回值。

一个简单的例子,假设你有一个数组,是《权力的游戏》中斯塔克家族的子女。然而,其中一个成员布兰 不见了,这很有趣,因为他是六国的国王。因此,使用push()方法,你可以通过将 "Bran"分配给数组中最后一个索引之后的索引来添加他。

本教程就到此为止。