admin管理员组

文章数量:1126449

How can I add an object to an array (in javascript or jquery)? For example, what is the problem with this code?

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

I would like to use this code to save many objects in the array of function1 and call function2 to use the object in the array.

1. How can I save an object in an array?
2. How can I put an object in an array and save it to a variable?

How can I add an object to an array (in javascript or jquery)? For example, what is the problem with this code?

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

I would like to use this code to save many objects in the array of function1 and call function2 to use the object in the array.

1. How can I save an object in an array?
2. How can I put an object in an array and save it to a variable?

• javascript
• jquery
• arrays
• function
• object

Share Improve this question Follow edited Nov 19, 2021 at 18:09 Super Kai - Kazuya Ito 1 asked Jun 6, 2011 at 15:05 nasernaser 4,43744 gold badges1919 silver badges1313 bronze badges 2

• 22 Please don't correct errors in posted code, as edit 5 did. If you correct a simple error in the question, often there is no reason for the answer to exist. – Paul Commented Aug 6, 2015 at 3:01
• 4 Also, push has been suggested multiple times here already. Please, do not pollute this thread anymore with another push suggestion. – Boghyon Hoffmann Commented Apr 14, 2018 at 14:17

Add a comment  | 

16 Answers 16

Sorted by: Reset to default 772

Put anything into an array using Array.push().

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

---

Extra information on Arrays

Add more than one item at a time

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

Add items to the beginning of an array

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

Add the contents of one array to another

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)

Create a new array from the contents of two arrays

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']

var years = [];
for (i= 2015;i<=2030;i=i+1){
    years.push({operator : i})
}

here array years is having values like

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

it continues like this.

First of all, there is no object or array. There are Object and Array. Secondly, you can do that:

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

Now a will be an array with b as its only element.

Using ES6 notation, you can do something like this:

For appending you can use the spread operator like this:

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

• JavaScript is case-sensitive. Calling new array() and new object() will throw a ReferenceError since they don't exist.
• It's better to avoid new Array() due to its error-prone behavior.
  Instead, assign the new array with = [val1, val2, val_n]. For objects, use = {}.
• There are many ways when it comes to extending an array (as shown in John's answer) but the safest way would be just to use concat instead of push. concat returns a new array, leaving the original array untouched. push mutates the calling array which should be avoided, especially if the array is globally defined.
• It's also a good practice to freeze the object as well as the new array in order to avoid unintended mutations. A frozen object is neither mutable nor extensible (shallowly).

Applying those points and to answer your two questions, you could define a function like this:

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

Usage:

// 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.

/* 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

With push you can even add multiple objects to an array

  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}
             );

You can use with Spread Operator (...) like this:

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

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

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

Expanding Gabi Purcaru's answer to include an answer to number 2.

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

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

obejct is clearly a typo. But both object and array need capital letters.

You can use short hands for new Array and new Object these are [] and {}

You can push data into the array using .push. This adds it to the end of the array. or you can set an index to contain the data.

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

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

other();

On alternativ answer is this.

if you have and array like this: var contacts = [bob, mary];

and you want to put another array in this array, you can do that in this way:

Declare the function constructor

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

make the object from the function:

var add1 = new add("Alba","Fas","[email protected]","[098] 654365364");

and add the object in to the array:

contacts[contacts.length] = add1;

a=[];
a.push(['b','c','d','e','f']);

The way I made object creator with auto list:

var list = [];

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

function newObject () {
    saveToArray(this);
};

Performance

Today 2020.12.04 I perform tests on MacOs HighSierra 10.13.6 on Chrome v86, Safari v13.1.2 and Firefox v83 for chosen solutions.

Results

For all browsers

• in-place solution based on length (B) is fastest for small arrays, and in Firefox for big too and for Chrome and Safari is fast
• in-place solution based on push (A) is fastest for big arrays on Chrome and Safari, and fast for Firefox and small arrays
• in-place solution C is slow for big arrays and medium fast for small
• non-in-place solutions D and E are slow for big arrays
• non-in-place solutions E,F and D(on Firefox) are slow for small arrays

Details

I perform 2 tests cases:

• for small array with 10 elements - you can run it HERE
• for big array with 1M elements - you can run it HERE

Below snippet presents differences between solutions A, B, C, D, E, F

PS: Answer B was deleted - but actually it was the first answer which use this technique so if you have access to see it please click on "undelete".

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

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

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

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

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

// https://stackoverflow.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!

And here are example results for chrome

You are running into a scope problem if you use your code as such. You have to declare it outside the functions if you plan to use it between them (or if calling, pass it as a parameter).

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

1. To save an object in an array, simply assign it, e.g. to add {type: "foobar"} to arr[0], you can use arr[0]["type"]="foobar";
2. To save it to a variable, declare the array outside the function.

var arr = []; // create a globally accessible array 
function addToArray(i, obj){
  if(typeof arr[i] === 'undefined'){
    arr[0]=[];
  }
  for (const p in obj) { // add objects to array element i
    arr[i][p]=obj[p];
  }
  // print array element to console
  var out="arr["+i+"]={";
  for (const p in arr[i]) {
    out+=p+": "+arr[0][p]+", ";
  }
  out=out.replace(/, $/,"}")
  console.log(out);
}

<button onclick="addToArray(0, {'fruit': 'banana', 'plant': 'tree'});">add objects to array element 0</button>
<p></p>
<button onclick="addToArray(0, {'leaf color':'green', 'climate': 'tropical'});">add some more</button>

本文标签： javascriptHow to add an object to an arrayStack Overflow