如何将某些东西附加到数组中?


2,713

如何在JavaScript中将对象(如字符串或数字)附加到数组中?

3,187

使用push()功能追加到数组:

// initialize array 
 
var arr = [ 
 
    "Hi", 
 
    "Hello", 
 
    "Bonjour" 
 
]; 
 

 
// append new value to the array 
 
arr.push("Hola"); 
 

 
console.log(arr);

将打印

["Hi", "Hello", "Bonjour", "Hola"] 

可以使用push()功能追加一个以上值作为as中的一个数组英格尔电话:

// initialize array 
 
var arr = [ "Hi", "Hello", "Bonjour", "Hola" ]; 
 

 
// append multiple values to the array 
 
arr.push("Salut", "Hey"); 
 

 
// display all values 
 
for (var i = 0; i < arr.length; i++) { 
 
    console.log(arr[i]); 
 
}

将打印

Hi 
Hello 
Bonjour 
Hola 
Salut 
Hey 

更新

如果你想一个数组的项目添加到另一个数组,你可以使用firstArray.concat(secondArray)

var arr = [ 
 
    "apple", 
 
    "banana", 
 
    "cherry" 
 
]; 
 

 
arr = arr.concat([ 
 
    "dragonfruit", 
 
    "elderberry", 
 
    "fig" 
 
]); 
 

 
console.log(arr);

将打印

["apple", "banana", "cherry", "dragonfruit", "elderberry", "fig"] 
+65

请注意,.push的返回值不是数组(或新的,如.concat),而是一个表示数组新长度的整数。 10 1月. 162016-01-10 00:09:38

+2

另一件需要注意的事情。不要在'for'条件中使用'arr.length',将它放在一个变量中并在'for'条件中使用该变量。因为这个数组的长度没有变化,所以不需要在每次运行时重新计算长度。 23 2月. 162016-02-23 09:08:06

+6

@RST:根本不使用'for'(使用'.forEach')。 25 2月. 162016-02-25 17:57:20

  0

@RobertSiemer不确定你的观点。从实践来看,对执行没有任何影响,它们都可以工作。而且可能还有更多方法可以做到这一点。我只是添加了我的评论,因为这个答案似乎被使用,并且在它有缺陷的时候赞赏很多,特别是当你有大数组时。 25 2月. 162016-02-25 18:29:44

  0

@RST,我的观点是:修复不是将'arr.length'复制到var中,而是完全不使用'arr.length'。 25 2月. 162016-02-25 21:34:56

+28

我会说原来的代码很好。没有必要优化对'length'属性的访问。口译员在这方面做得非常出色,无论你是否优化它,它在“真实世界”中都没有什么不同。如果你的数组变得如此之大以至于优化“.length”实际上会有所帮助,那么很可能数组不再是正确的数据结构了。使用'forEach'有它的优点,但是性能提高会成为其中的一个很值得怀疑,因为每次迭代的函数调用都会产生成本并且不会节省任何代码。 03 4月. 162016-04-03 13:31:06

+23

@RobertSiemer数组的'length'属性在每次调用时都不计算,它是一个存储在'array'对象中的变量,只有在更改数组时才会更新。因此,在'for'条件下包含'arr.length'实际上没有性能成本。 09 6月. 162016-06-09 16:39:32

  0

@ mikeyq6:我从来没有争论过速度。使用'.length'很容易出现一次性错误。 '.forEach'不是。 13 6月. 162016-06-13 16:41:31

  0

@ mikeyq6:不,我没有谈及“每次迭代计算长度”。用户RST做到了。跟他说话。 - 我反对写一个for循环(用'.length'或其他方式)。 14 6月. 162016-06-14 09:30:25

  0

为什么要使用函数调用或创建一个额外的长度变量,或者当您只需使用['for ... of']时可以获取每个循环的长度(https://developer.mozilla.org/en/docs/Web/ JavaScript/Reference/Statements/for ...)循环? 02 8月. 162016-08-02 01:21:39

+1

@Mojimi作为一个初学者,忽略任何关于边缘案例中的性能问题的建议,比如这个。使用更具表达性的语法。随着时间的推移,Javascript运行时会增加越来越多的优化 - 它们会内联forEach'回调函数(其中一些函数可能已经这样做了),并且生成的机器代码没有区别,如果函数被调用的次数足以被编译由运行时解释。实际上,对于任何不是汇编程序的语言,都有同样的建议。 17 12月. 172017-12-17 09:35:06


940

如果你只追加一个变量,然后push()作品就好了。如果您需要追加另一个数组,使用concat()

var ar1 = [1, 2, 3]; 
var ar2 = [4, 5, 6]; 

var ar3 = ar1.concat(ar2); 

alert(ar1); 
alert(ar2); 
alert(ar3); 

会吐出:

"1,2,3" 
"4,5,6" 
"1,2,3,4,5,6" 

的CONCAT不影响ar1ar2除非重新分配,例如:

ar1 = ar1.concat(ar2); 
alert(ar1); 

将显示:

"1,2,3,4,5,6" 

很多伟大的信息here

+157

只是确保人们赶上 var ar3 = ar1.concat(ar2); 部分。 ar1.concat(ar2)不会将值保存到ar1中。您必须将其分配给ar3或返回给ar1,例如: ar1 = ar1。的concat(AR2); 12 7月. 132013-07-12 22:47:49

+24

我想说这实际上是错误的答案。问题是“我如何在JavaScript中追加数组?”,但是'concat'实际上**创建了**新**数组。这是一个重要的区别!相反,我会说Omnimike下面的答案实际上是最好的答案:使用** Push.apply **将整个数组推送到现有数组而不创建新数组。 18 9月. 152015-09-18 13:09:46

  0

@StijndeWitt你仍然可以在不创建新数组的情况下追加数据,如前面的注释中所述'ar1 = ar1.concat(ar2);'将追加到'ar1' 01 4月. 162016-04-01 01:30:22

+2

@cameronjonesweb事实上,它所做的是创建一个新数组与'ar1'相同的内容,追加'ar2',然后返回新的数组。从这行代码中省略赋值部分('ar1 = ...'),你会发现* original *'ar1'实际上并没有改变。如果你想避免复制,你需要'push'。不要相信我,相信[文档](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/concat):“concat()方法返回一个新数组” “concat”文档中的第一句话。 03 4月. 162016-04-03 13:26:19


358

一些快速基准(每个测试= 500K附加元素,结果是多次运行的平均值),结果如下:

火狐3.6(苹果机):

  • 小阵列:arr[arr.length] = b更快(300ms vs.800毫秒)
  • 大阵列:arr.push(b)更快(500毫秒与900毫秒)

的Safari 5.0(苹果机):

  • 小数组:arr[arr.length] = b更快(90个毫秒与115ms )
  • 大阵列:arr[arr.length] = b更快(160ms对185ms)

谷歌浏览器6.0(苹果机):

  • 小数组:无显著差异(和Chrome为快!只有〜38MS !!)
  • 大型阵列:无显著差异(160毫秒)

我喜欢arr.push()语法好,但我想我会用arr[arr.length]版本更好,至少在原始速度。我很想看看IE浏览器运行的结果。


我的基准测试循环:

function arrpush_small() { 
    var arr1 = []; 
    for (a = 0; a < 100; a++) 
    { 
     arr1 = []; 
     for (i = 0; i < 5000; i++) 
     { 
      arr1.push('elem' + i); 
     } 
    } 
} 

function arrlen_small() { 
    var arr2 = []; 
    for (b = 0; b < 100; b++) 
    { 
     arr2 = []; 
     for (j = 0; j < 5000; j++) 
     { 
      arr2[arr2.length] = 'elem' + j; 
     } 
    } 
} 


function arrpush_large() { 
    var arr1 = []; 
    for (i = 0; i < 500000; i++) 
    { 
     arr1.push('elem' + i); 
    } 
} 

function arrlen_large() { 
    var arr2 = []; 
    for (j = 0; j < 500000; j++) 
    { 
     arr2[arr2.length] = 'elem' + j; 
    } 
} 
+8

问题是如果.length是一个存储值,或者是在被访问时计算出来的,因为如果后者是真的,那么使用简单变量(如j)作为索引值可能会更快 15 8月. 122012-08-15 18:55:29

+4

+1对于静态,你如何制作这些基准? 23 8月. 122012-08-23 06:23:07

+17

@yozloy:http://jsperf.com是你的朋友:) 25 8月. 122012-08-25 19:37:43

+4

很想在同一个测试中看到concat()! 30 4月. 132013-04-30 00:10:14

+2

我想知道这在过去四年里有多大改变。 (jsperf现在会很方便。) 26 5月. 142014-05-26 20:07:24

+8

这种类型的基准测试很有趣,但具有讽刺意味的是,它并不能让应用程序变得更快。渲染循环在任何循环中都要昂贵得多。此外,这些JS语言的内部结构不断被浏览器开发人员优化。这是我倒下的原因,而不是这个答案的趣味性。如果你想要更快的应用程序,首先要做基准测试,然后看看要改变什么 - 99次出现100次,这不会是像这次测试所显示的那样。通常它的可怜的开发人员JS/CSS--而不是浏览器内部的东西使其变得缓慢。 25 9月. 142014-09-25 21:59:20

+1

为了方便他人,我创建了一个jsperf和@ JensRoland的测试:http://jsperf.com/pushetc继续并添加您自己的比较并更新它。 17 6月. 152015-06-17 13:30:52

+7

我同意LessQuesar在尽可能坚持内置。微型优化本身并不好,但他说浏览器总是提高发动机速度是正确的。举个例子:在撰写本文时,对于上面列出的所有技术,每个浏览器的性能几乎相同。这意味着几年前有这么小的收获,现在没有收获。 13 8月. 152015-08-13 00:35:54

  0

呵呵,Chrome只是快速的,因为它强制优先,在加快中断周期以确保速度的情况下,以及打开大量和大量进程。 07 4月. 162016-04-07 09:26:13


33

如果arr是一个数组,并val是您要添加使用的值:

arr.push(val); 

例如

arr = ['a', 'b', 'c']; 
arr.push('d'); 
console.log(arr); 

将记录:

['a', 'b', 'c', 'd'] 

34

使用concat

a = [1, 2, 3]; 
b = [3, 4, 5]; 
a = a.concat(b); 

a现在包含的所有元素,[1, 2, 3, 3, 4, 5]

参考:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/concat


15

如果你知道最高的指数(如存储在一个变量“i”),那么你可以做

myArray[i + 1] = someValue; 

但是,如果你不知道,那么你既可以使用

myArray.push(someValue); 

其他答案建议,或者您可以使用

myArray[myArray.length] = someValue; 

请注意,数组基于零,所以.length返回最高索引加1。

另外请注意,您不必为了增加实际上,你可以跳过值,如

myArray[myArray.length + 1000] = someValue; 

在这种情况下,在之间的值将有undefined值。

因此,在循环浏览JavaScript以验证该值实际上存在于此时是一种很好的做法。

这可以通过什么来完成类似如下:

if(myArray[i] === "undefined"){ continue; } 

,如果你确信你没有数组中的任何零,那么你可以这样做:

if(!myArray[i]){ continue; } 

中当然,在这种情况下,请确保你没有使用myArray [i]作为条件(因为互联网上的一些人建议基于结尾,只要我是更大的那么最高的索引就会返回undefined,其结果为false )


249

我认为值得一提的是,可以使用多个参数来调用push,这些参数将按顺序附加到数组中。例如:

var arr = ['first']; 
arr.push('second', 'third'); 
console.log(arr); // ['first', 'second', 'third'] 

由于这样的结果,你可以使用push.apply到一个数组追加到另一个阵列,像这样:

arr.push.apply(arr, ['forth', 'fifth']); 
console.log(arr); // ['first', 'second', 'third', 'forth', 'fifth'] 

Annotated ES5有什么pushapply做的更多信息。

2016更新:与spread,你不需要那么apply了,如:

arr.push(...['fourth', 'fifth']); 
console.log(arr) // ['first', 'second', 'third', 'fourth', 'fifth'] 
+18

追加一个项目的数组,而不是创建一个新的数组的最佳答案。 20 8月. 142014-08-20 18:45:20

+1

@GabrielLittman特别是因为追加到一个数组,恕我直言,应该修改数组,而不是创建一个新的。 22 8月. 142014-08-22 01:44:20

+2

我喜欢push.apply版本,宁愿使用'Array.prototype.push.apply()'。 16 2月. 152015-02-16 23:41:06

  0

有时候保留对数组的引用很重要 - 例如在AngularJs中当数组在某个控制器的作用域中,某些服务需要更新数组中的数据以供显示时。这就是为什么我喜欢这个解决方案。 15 3月. 162016-03-15 04:14:59


64

您可以使用pushapply功能追加两个数组。

var array1 = [11, 32, 75]; 
var array2 = [99, 67, 34]; 

Array.prototype.push.apply(array1, array2); 

这将追加到array2array1。现在array1包含[11, 32, 75, 99, 67, 34]。 此代码比编写for循环要复制数组中的每个项目要简单得多。

  0

这就是我需要的,保持原始数组参考 12 2月. 162016-02-12 10:15:02


26

如果要追加两个数组 -

var a = ['a', 'b']; 
var b = ['c', 'd']; 

那么你可以使用:

var c = a.concat(b); 

如果你想添加记录g到阵列(var a=[]),那么你可以使用:

a.push('g'); 

9

让数组长度属性完成工作:

myarray[myarray.length] = 'new element value added to the end of the array'; 

myarray.length返回数组中的字符串数。 JS基于零为,所以数组的下一个元素键将是数组的当前长度。 EX:

var myarray = [0, 1, 2, 3], 
    myarrayLength = myarray.length; //myarrayLength is set to 4 

21

push()方法增加了新的项的数组的末尾,并返回新的长度。例如:

var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.push("Kiwi"); 

// The result of fruits will be: 
Banana, Orange, Apple, Mango, Kiwi 

您的问题的确切答案已经回答了,但让我们看看其他一些将项目添加到数组的方法。

unshift()方法将新项添加到数组的开头,并返回新的长度。示例:

var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.unshift("Lemon", "Pineapple"); 

// The result of fruits will be: 
Lemon, Pineapple, Banana, Orange, Apple, Mango 

最后,concat()方法用于连接两个或多个数组。例如:

var fruits = ["Banana", "Orange"]; 
var moreFruits = ["Apple", "Mango", "Lemon"]; 
var allFruits = fruits.concat(moreFruits); 

// The values of the children array will be: 
Banana, Orange, Apple, Mango, Lemon 

31

随着新ES6 spread operator,使用push接合两个阵列变得更容易:

var arr = [1, 2, 3, 4, 5]; 
var arr2 = [6, 7, 8, 9, 10]; 
arr.push(...arr2); 
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 

这增加的arr2内容到的arr结束。

Babel REPL Example


8

只是想添加一个片段无损添加元素。

var newArr = oldArr.concat([newEl]); 

8

concat(),当然,可以用2个维阵列被使用。不需要循环。

VAR一个= [ [1,2], [3,4]];

var b = [ [“a”,“b”], [“c”,“d”]];

b = b.concat(a);

alert(b [2] [1]); //结果2


23

的Javascript 的ECMAScript 5标准,大多数浏览器都支持的,现在,你可以使用apply()追加array1array2

var array1 = [3, 4, 5]; 
var array2 = [1, 2]; 

Array.prototype.push.apply(array2, array1); 

console.log(array2); // [1, 2, 3, 4, 5] 

的Javascript 的ECMAScript 6标准,该标准是由Chrome和FF和IE边缘的支持,你可以使用spread操作:

"use strict"; 
let array1 = [3, 4, 5]; 
let array2 = [1, 2]; 

array2.push(...array1); 

console.log(array2); // [1, 2, 3, 4, 5] 

spread运营商将与array2.push(3, 4, 5);当浏览器代替array2.push(...array1);正在思考这个逻辑。

奖励点

如果你想创建另一个变量来存储来自两个阵列中的所有项目,你可以这样做:

ES5var combinedArray = array1.concat(array2);

ES6const combinedArray = [...array1, ...array2]

传播运算符(...)将传播集合中的所有项目。


4

如果您想要将单个值附加到数组中,只需使用push方法... 它将在数组末尾添加一个新元素。 但是,如果你打算添加多个元素,然后将元素存储在一个新的数组中 并用第一个数组连接第二个数组......按照您希望的方式。

arr=['a','b','c']; 
arr.push('d'); 
//now print the array in console.log and it will contain 'a','b','c','d' as elements. 

5

,如果你想2个阵列,而不重复的结合,你可以尝试以下

array_merge = function (arr1, arr2) { 
    return arr1.concat(arr2.filter(function(item){ 
    return arr1.indexOf(item) < 0; 
    })) 
} 

使用代码:

array1 = ['1', '2', '3'] 
array2 = ['2', '3', '4', '5'] 
combined_array = array_merge(array1, array2) 

输出: [1,2 ,3,4,5]


5

如果您使用ES6,则可以使用spread运算符来完成此操作。

var arr = [ 
    "apple", 
    "banana", 
    "cherry" 
]; 

var arr2 = [ 
    "dragonfruit", 
    "elderberry", 
    "fig" 
]; 

arr.push(...arr2); 

16

有几种方法追加在JavaScript的数组:

1)push()方法将一个或多个元素添加到数组的结尾,并返回的新长度阵列。

var a = [1, 2, 3]; 
 
a.push(4, 5); 
 
console.log(a);

输出:

[1, 2, 3, 4, 5] 

2)unshift()方法将一个或多个元素添加到数组的开头,并返回的数组的新长度:

var a = [1, 2, 3]; 
 
a.unshift(4, 5); 
 
console.log(a);

输出:

[4, 5, 1, 2, 3] 

3)concat()方法用于合并两个或更多个阵列。此方法不会更改现有数组,而是返回一个新数组。

var arr1 = ["a", "b", "c"]; 
 
var arr2 = ["d", "e", "f"]; 
 
var arr3 = arr1.concat(arr2); 
 
console.log(arr3);

输出:

[ "a", "b", "c", "d", "e", "f" ] 

4)可以使用阵列的.length属性将元素添加到数组的末尾:

var ar = ['one', 'two', 'three']; 
 
ar[ar.length] = 'four'; 
 
console.log(ar);

输出:

["one", "two", "three", "four"] 

5)splice()方法改变阵列的通过去除现有元件和/或添加新元素的含量:

var myFish = ["angel", "clown", "mandarin", "surgeon"]; 
 
myFish.splice(4, 0, "nemo"); 
 
//array.splice(start, deleteCount, item1, item2, ...) 
 
console.log(myFish);

输出:

["angel", "clown", "mandarin", "surgeon","nemo"] 

6)也可以简单地通过指定一个新的索引并指定一个值添加到阵列的新元件:

var ar = ['one', 'two', 'three']; 
 
ar[3] = 'four'; // add new element to ar 
 
console.log(ar);

输出:

["one", "two","three","four"] 
  0

对于1),这表示“没有修改原始数组”。但是这实际上是'push'的作用:它通过将新元素推到原始数组上来修改原始数组。我看错了,还是应该编辑? 24 5月. 172017-05-24 15:17:28


8

现在,您可以利用ES6语法,只是做:

let array = [1, 2]; 
 
console.log([...array, 3]);

保持原有阵列不变。

  0

我想要寻找这个,谢谢你,先生 01 6月. 172017-06-01 07:53:30


2

我们没有附加功能的JavaScript数组,但我们有不印字,假设有下面的数组:

var arr = [1, 2, 3, 4, 5]; 

,我们喜欢一个值追加到这个数组,我们能做的,arr.push(6),这将增加6到数组的末尾:

arr.push(6); // return [1, 2, 3, 4, 5, 6]; 

我们也可以用不印字,看看我们如何能将此:

arr.unshift(0); //return [0, 1, 2, 3, 4, 5]; 

它们是添加或追加新值到数组的主要函数。


4

您在.push()中的值。 示例: array.push(value);


4

您可以使用新的JavaScript它来做居6特点:

// initialize array 

var arr = [ 
    "Hi", 
    "Hello", 
    "Bangladesh" 
]; 

// append new value to the array 

arr= [...arr , "Feni"]; 

// or you can put a variable value 

var testValue = "Cool"; 

arr = [...arr , testValue ]; 

console.log(arr); 

// final output [ 'Hi', 'Hello', 'Bangladesh', 'Feni', 'Cool' ] 

1

使用方法push()将项目追加到一个数组。看下面的例子。

array=['a','b','c']; 
 
array.push('d') 
 
console.log(array);


0

您可以使用push方法。

Array.prototype.append = function(destArray){ 
    destArray = destArray || []; 
    this.push.call(this,...destArray); 
    return this; 
} 
var arr = [1,2,5,67]; 
var arr = [7,4,7,8]; 
console.log(arr.append(arr1));// [7, 4, 7, 8, 1, 4, 5, 67, 7] 
console.log(arr.append("Hola"))//[1, 2, 5, 67, 7, 4, 7, 8, "H", "o", "l", "a"]