如何将对象添加到数组

Posted

技术标签:

【中文标题】如何将对象添加到数组【英文标题】:How to add an object to an array 【发布时间】:2011-09-09 09:21:03 【问题描述】:

如何将对象添加到数组(在 javascript 或 jquery 中)? 比如这段代码有什么问题?

function() 
  var a = new array();
  var b = new object();
  a[0] = b;

我想用这段代码在function1的数组中保存很多对象,然后调用function2来使用数组中的对象。

    如何将对象保存在数组中? 如何将对象放入数组并将其保存到变量中?

【问题讨论】:

请不要像编辑 5 那样更正已发布代码中的错误。如果您纠正了问题中的一个简单错误,通常没有理由存在答案。 另外,push 已经在这里被多次推荐过。请不要再用另一个push 建议污染这个线程。 【参考方案1】:

使用 Array.push() 将任何内容放入数组中。

var a=[], b=;
a.push(b);    
// a[0] === b;

关于数组的额外信息

一次添加多个项目

var x = ['a'];
x.push('b', 'c');
// x = ['a', 'b', 'c']

将项目添加到数组的开头

var x = ['c', 'd'];
x.unshift('a', 'b');
// x = ['a', 'b', 'c', 'd']

将一个数组的内容添加到另一个数组

var x = ['a', 'b', 'c'];
var y = ['d', 'e', 'f'];
x.push.apply(x, y);
// x = ['a', 'b', 'c', 'd', 'e', 'f']
// y = ['d', 'e', 'f']  (remains unchanged)

从两个数组的内容创建一个新数组

var x = ['a', 'b', 'c'];
var y = ['d', 'e', 'f'];
var z = x.concat(y);
// x = ['a', 'b', 'c']  (remains unchanged)
// y = ['d', 'e', 'f']  (remains unchanged)
// z = ['a', 'b', 'c', 'd', 'e', 'f']

【讨论】:

我还有一个问题:myArray = []; myArray.push('text': '一些文本', 'id' : 13);现在 myArray 是空的。因此,如果我们尝试从 myArray[0]['text'] 获取值,它将为空,为什么? take.ms/jSvbn 似乎有些不对劲。确保没有范围界定问题。使用 let/var 来声明 myArray。因为 myArray.push 总是会改变 myArray.【参考方案2】:
var years = [];
for (i= 2015;i<=2030;i=i+1)
    years.push(operator : i)

这里的数组 years 的值类似于

years[0]=operator:2015
years[1]=operator:2016

这样继续下去。

【讨论】:

【参考方案3】:

首先,没有objectarray。有ObjectArray。其次,您可以这样做:

a = new Array();
b = new Object();
a[0] = b;

现在a 将是一个以b 作为唯一元素的数组。

【讨论】:

+1 表示最不复杂的答案。我已在下面对其进行了扩展,以包括对 OP 问题 2 的回答。【参考方案4】:

使用ES6 表示法,您可以执行以下操作:

对于追加,您可以像这样使用spread operator:

var arr1 = [1,2,3]
var obj = 4
var newData = [...arr1, obj] // [1,2,3,4]
console.log(newData);

【讨论】:

【参考方案5】: JavaScript 是 case-sensitive。调用 new array()new object() 将抛出 ReferenceError,因为它们不存在。 最好避免使用new Array(),因为它有error-prone behavior。 相反,使用= [val1, val2, val_n] 分配新数组。对于对象,请使用= 。 在扩展数组时有很多方法(如 John 的 answer 所示),但最安全的方法是使用 concat 而不是 pushconcat 返回一个新数组,而原始数组保持不变。 push 改变了调用数组 should be avoided,特别是如果该数组是全局定义的。 freeze 对象和新数组也是一个很好的做法,以避免意外突变。冻结的对象既不可变也不可扩展(浅层)。

应用这些观点并回答您的两个问题,您可以定义如下函数:

function appendObjTo(thatArray, newObj) 
  const frozenObj = Object.freeze(newObj);
  return Object.freeze(thatArray.concat(frozenObj));

用法:

// Given
const myArray = ["A", "B"];
// "save it to a variable"
const newArray = appendObjTo(myArray, hello: "world!");
// returns: ["A", "B", hello: "world!"]. myArray did not change.

【讨论】:

“使用”是我个人首选的答案。 @boghyon,我很好奇冻结和突变。您是在谈论由于 concat 方法而可能直接发生的数组更改,还是由于在执行“.concat()”的过程中可能从脚本中的其他地方对数组进行的更改?如果是第二个,由于javascript是单线程的,即使在异步代码的情况下,是否应该自动阻止这种情况,因为至少在理论上,控制应该在方法完成之前不返回? @jdmayfield:JS 的评估策略是call by object-sharing。当对象被传递时,它们不会被复制。这些对象中的突变在被传递时,总是立即对调用者可见,无论突变器是否被异步调用、完成或不被调用。由于这种副作用通常会导致错误,因此我们将返回与原始对象分离的新对象。使对象不可变(例如通过freeze)只是防止意外突变的额外步骤。 @jdmayfield:但正如您可能已经猜到的那样,当对象变得很大时,每次创建新对象可能会很快变得低效。对于这种情况,有一些有用的库,它们通过利用持久数据结构来提高效率,例如Mori(有点死)和Immutable.js。以下是“为什么不可变”的简短介绍:youtu.be/e-5obm1G_FY【参考方案6】:

/* array literal */
var aData = [];

/* object constructur */
function Person(firstname, lastname) 
  this.firstname = firstname;
  this.lastname = lastname;
  this.fullname = function() 
    // return (this.firstname + " " + this.lastname);
    return (`$this.firstname $this.lastname`); // es6 template string
  ;


/* store object into array */
aData[aData.length] = new Person("Java", "Script"); // aData[0]

aData.push(new Person("John", "Doe"));
aData.push(new Person("Anna", "Smith"));
aData.push(new Person("Black", "Pearl"));

aData[aData.length] = new Person("stack", "overflow"); // aData[4]

/* loop array */
for (var i in aData) 
  alert(aData[i].fullname());


/* convert array of object into string json */
var jsonString = JSON.stringify(aData);
document.write(jsonString);

Push object into array

【讨论】:

【参考方案7】:

将 Gabi Purcaru 的答案扩展为包括对第 2 项的答案。

a = new Array();
b = new Object();
a[0] = b;

var c = a[0]; // c is now the object we inserted into a...

【讨论】:

【参考方案8】:

通过 push 你甚至可以将多个对象添加到数组中

  let myArray = [];

   myArray.push(
              name:"James", dataType:TYPES.VarChar, Value: body.Name,
              name:"Boo", dataType:TYPES.VarChar, Value: body.Name,
              name:"Alina", dataType:TYPES.VarChar, Value: body.Name
             );

【讨论】:

【参考方案9】:

obejct 显然是一个错字。但是objectarray 都需要大写字母。

new Arraynew Object 可以使用短手,它们是 []

您可以使用.push 将数据推送到数组中。这会将其添加到数组的末尾。或者你可以设置一个索引来包含数据。

function saveToArray() 
    var o = ;
    o.foo = 42;
    var arr = [];
    arr.push(o);
    return arr;


function other() 
    var arr = saveToArray();
    alert(arr[0]);


other();

【讨论】:

【参考方案10】:

替代答案是这样的。

如果你有这样的数组:var contacts = [bob, mary];

如果你想在这个数组中放另一个数组,你可以这样做:

声明函数构造函数

function add (firstName,lastName,email,phoneNumber) 
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.phoneNumber = phoneNumber;

从函数中创建对象:

var add1 = new add("Alba","Fas","Des@gmail.com","[098] 654365364");

并将对象添加到数组中:

contacts[contacts.length] = add1;

【讨论】:

【参考方案11】:
a=[];
a.push(['b','c','d','e','f']);

【讨论】:

嗨,欢迎来到 SO。请不要只转储代码作为答案。解释您的想法,以便用户更好地了解正在发生的事情。谢谢。【参考方案12】:

我用自动列表创建对象的方式:

var list = [];

function saveToArray(x) 
    list.push(x);
;

function newObject () 
    saveToArray(this);
;

【讨论】:

【参考方案13】:

您可以像这样使用扩展运算符 (...):

let arr = [num: 1, char: "a", num: 2, char: "b"];

arr = [...arr,num: 3, char: "c"];

//...arr --> spread operator
console.log(arr);

【讨论】:

【参考方案14】:

您可以使用 "concat()" 方法将对象添加到数组中:

let arr = [num: 1, char: "a", num: 2, char: "b"];

arr = arr.concat(num: 3, char: "c");

console.log(arr); 
// [num: 1, char: "a", num: 2, char: "b", num: 3, char: "c"]

【讨论】:

【参考方案15】:

如果您这样使用代码,则会遇到范围问题。如果您打算在函数之间使用它(或者如果调用,则将其作为参数传递),您必须在函数之外声明它。

var a = new Array();
var b = new Object();

function first() 
a.push(b);
// Alternatively, a[a.length] = b
// both methods work fine


function second() 
var c = a[0];


// code
first();
// more code
second();
// even more code

【讨论】:

【参考方案16】:

性能

今天 2020 年 12 月 4 日,我在 Chrome v86、Safari v13.1.2 和 Firefox v83 上对 MacOs HighSierra 10.13.6 进行测试,以选择解决方案。

结果

适用于所有浏览器

基于length (B) 的就地解决方案对于小型阵列来说速度最快,而在 Firefox 中对于大型阵列以及 Chrome 和 Safari 来说速度也很快 基于 push (A) 的就地解决方案对于 Chrome 和 Safari 上的大阵列速度最快,而对于 Firefox 和小型阵列速度最快 就地解决方案 C 对于大型阵列来说速度较慢,而对于小型阵列来说速度中等 非就地解决方案 D 和 E 对于大型阵列来说速度很慢 非就地解决方案 E、F 和 D(在 Firefox 上)对于小型阵列来说很慢

详情

我执行 2 个测试用例:

对于有 10 个元素的小数组 - 你可以运行它HERE 对于有 1M 个元素的大数组 - 你可以运行它HERE

下面的 sn-p 显示了解决方案之间的差异 A, B, C, D, E, F

PS:答案 B 已被删除 - 但实际上它是第一个使用此技术的答案,因此如果您有权查看它,请点击“取消删除”。

// https://***.com/a/6254088/860099
function A(a,o) 
  a.push(o);
  return a;
 

// https://***.com/a/47506893/860099
function B(a,o) 
  a[a.length] = o;
  return a;
 

// https://***.com/a/6254088/860099
function C(a,o) 
  return a.concat(o);


// https://***.com/a/50933891/860099
function D(a,o) 
  return [...a,o];


// https://***.com/a/42428064/860099
function E(a,o) 
  const frozenObj = Object.freeze(o);
  return Object.freeze(a.concat(frozenObj));


// https://***.com/a/6254088/860099
function F(a,o) 
  a.unshift(o);
  return a;
 


// -------
// TEST
// -------


[A,B,C,D,E,F].map(f=> 
  console.log(`$f.name $JSON.stringify(f([1,2],))`)
)
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"> </script>
  
This shippet only presents functions used in performance tests - it not perform tests itself!

以下是 chrome 的示例结果

【讨论】:

以上是关于如何将对象添加到数组的主要内容,如果未能解决你的问题,请参考以下文章

如何将对象数组添加到chartjs?

如何将对象添加到数组的顶部位置?

如何将更多对象添加到继续编号但不重新开始的对象数组中?

在 PHP 中,如何将对象元素添加到数组中?

如何将对象添加到静态数组中

如何使用 Node.js 和 Mongoose 将对象添加到嵌套数组