Here i have a Store constructor which has a property named arr which is created using new Array(height*width) provided height and length were sent as arguments to Store constructor.What i know is new Array(20) will create an array which can contain 20 elements.
The Store constructor has a prototype property which uses a map array and fill this.arr of the new Store instance.
But surprisingly the array length gets extended after the fill up process.It becomes 40.I know push method insert elements at the end of an array.Does it mean the array was already has 20 elements.But it supposed to be empty ,right?? i am confused!!!
var map=['d d d d d ',
'e e e e e ']
function Store(width,height){
this.width=width;
this.height=height;
this.arr=new Array(this.width*this.height);
}
Store.prototype.set=function(map){
for(i=0;i<this.height;i++){
for(j=0;j<this.width;j++){
this.arr.push(map[i][j]);
}
}
}
var store=new Store(map[0].length,map.length);
document.write('previously : '+store.arr.length+'</br>');
store.set(map);
document.write('now : '+store.arr.length);
When you create an Array, with Array constructor, it creates a sparse Array with the length specified. So when you say Array(20) it has created an Array with 20 elements (by changing the length property), which are not defined yet, in it. So, lets say that the length is set to 5 and you are trying to access the element at 0. Now, JavaScript will look for the property 0 in the Array object and it will not find anything. So, it will return undefined. But when you do something like array[0] = 1, it assigns the property 0, the value 1. So the next time when you look for array[0], it will return 1. Practically, when you simply create an Array, there is nothing in it.
Regarding the push, quoting from MDN's Array.prototype.push,
The push() method adds one or more elements to the end of an array and returns the new length of the array.
So, it has been extending the array whenever you are pushing something to it. You might want to do something like this
this.arr[i][j] = map[i][j];
new Array(20) creates an array with 20 elements that are undefined. But the very storage within the array is preallocated. This is considered to be a more efficient way of handling arrays. If you know the array length in advance, always use this approach. (By the way, it is even more beneficial to have all the elements of the array to be of the same type)
In case you preallocate an array, do not push elements to it. Assign values to elements within the array, like this:
var map=['d d d d d ',
'e e e e e ']
function Store(width,height){
this.width=width;
this.height=height;
this.arr=new Array(this.width*this.height);
}
Store.prototype.set=function(map){
for(i=0;i<this.height;i++){
for(j=0;j<this.width;j++){
this.arr[i*j+j] = map[i][j];
}
}
}
var store=new Store(map[0].length,map.length);
document.write('previously : '+store.arr.length+'</br>');
store.set(map);
document.write('now : '+store.arr.length);
If you do not know the array size in advance, create an empty zero length array, and push (or unshift, push puts an element to the last position in the array, unshift puts the element to the first, 0 index, position in the array) elements to it. This works slower, because each push or unshift will dynamically change the size of the array.
Related
I am trying to copy one array values into another, but without breaking the links that is associated with this array other words i can not just assign the new array to this value, thats why i cannot use methods like slice() or concat().
Here is the code of the function that does the thing:
self.updateBreadcrumbs = function (newBreadcrumbs) {
var old_length = self.breadcrumbs.length;
var new_length =newBreadcrumbs.length;
var j = new_length > old_length ? new_length: old_length;
for (var i = 0; i < j; i++) {
if(old_length < i+1){
self.breadcrumbs.push(newBreadcrumbs[i]);
continue;
}
if(new_length < i+1){
delete self.breadcrumbs[i];
continue;
}
if (self.breadcrumbs[i].title !== newBreadcrumbs[i].title) {
self.breadcrumbs[i] = newBreadcrumbs[i];
}
}
}
My problem is that length of the array does not change when i delete something from the array.
P.S If you know any easier way to do this i am totally open for propositions.
Length of an Array can never change by deleting elements in it.
However It can be altered with splice
eg.
var arr=[1,2,3,4,5]; //length 5
arr.splice(0,1); //length 4
Unlike what common belief suggests, the delete operator has nothing to do with directly freeing memory. delete is only effective on an object's properties. It has no effect on array length
The splice() method changes the content of an array by removing
existing elements and/or adding new elements.
More about Splice
The length property of an Array object is a property that is maintained by it's methods, it is not an inherent characteristic of the object itself. So, if you take an action on it that is not one of Array's own methods, it will not update the length property. In this case, it is the splice method that you would want to use ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice )
Interestingly, you can change the makeup of an array by directly altering its length . . . for example, if you have an array with 6 elements in it and you were to change its length property to 5 (i.e., array.length = 5;), it would no longer recognize the 6th element as being part of the array.
More on the length property: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length
An Array is (aside from its prototype methods) not much more than a simple object. The difference is in the length property which has a spcieal setter method, and the different way of adding a new property.
If a property is added to the object, its name is tested for being a numerical value and whether this value is >= the current array length. if so, the internal length is updated.
If the length is set, it is checked, whether the new value is smaller than the old one, and if so, all own properties with a property name that is a numerical value and >= the new length will be deleted.
If you delete an indexed element from an array, it will just be deleted (and accessing this index later will return undefined, as it would do with any non-existent property). It won't change the array length, nor will increasing the array length create any properties for the added index positions (sparse array). Using [] or new Aray[10000] will both create Arrays with exactly the same memory footprint. Just the length property has a different initial value.
This is completely different from Arrays in other languages, where an array of size n will have n storage spaces reserved for the elements (being pointers to objects or being native value types). So in other languages, creating an array with a given size and filling it is faster than creating an empty array and adding values (in which case each time a larger consecutive space must be allocated and the array must be copied to this larger memory psoition before adding the element). OTOH, accessing the elements of an JS array is somewhat slower (as they are just named properties which have to be located in the property list first) than in other languages where an element is at its given, fixed position.
This answer will not help if you use array, but.
If you still need to delete item by key and you can use object:
$o = {'blue' : '', 'apple' : '', 'red' : ''};
console.log(Object.keys($o).length); // will output 3
delete $o['apple'];
console.log(Object.keys($o).length); // will output 2
I want to create a property on a polymer custom element that let's the user define a number of elements to repeat.
<my-element repeated-elements='5'></my-element>
This should tell my element to repeat the element inside of the component five times. For that I need an array with length of 5, so anything like this would do:
['','','','','']
Is there a way to do this in JavaScript? The number would be passed as a number, not a string. So somehow I would need to convert any number to the amount of array items in an array. Metaphorically speaking:
convertToArrayLength(5);
I'm completely lost here, I have no idea at all how this could be done.
The array constructor does exactly that:
var arr = Array(5);
console.log(arr, arr.length);
//=> Array [ <5 empty slots> ] 5
You don't need to put new before calling Array (just a peculiarity of the API).
Note though that arrays in JavaScript are dynamic, so most of the time you don't need to specify the length of your array beforehand and can simply initialize your variable with:
var arr = [];
// And then push to it as you go:
arr.push(x);
JavaScript will re size the array automatically as you push to it.
var array = new Array(5); // undefined
array.length; // 5
array.push("FOO"); // 6
array.length; // 6
All you have to do is make sure you assign the variable as an Array with either [] or new Array
I created an object which contains an array.
I noticed that when I dont enter any values into the array, it still has one - its size,
So how can I check if the array is actually empty?
Here's how I'm creating the array:
array = { text:[10] }
The size of the array is not an array entry (aka array "element"). It is a property, length, but it's not an entry. An empty array is exactly that: empty.
The code you posted in a comment:
array = { text:[10] }
does not create an empty array. It creates an array of length 1 with the entry 10 in it.
If you want to create an empty array with a specific length, you can't do that in a single statement with an array literal ([]). You have two ways you can do it:
Using an array literal and assigning to length:
var a = [];
a.length = 10;
or using new Array:
var a = new Array(10);
But there's virtually never any reason, in JavaScript, to predefine the length of the array, because standard JavaScript arrays aren't really arrays at all. It does make sense with the new typed arrays (Uint32Array and such), and to do it you have to use the array constructor (new Uint32Array(10)).
I have a strange problem. I need a multidimensional javascript array that has numeric indexes e.g.:
MyArray = new Array();
$(".list-ui-wrapper").each(function(){
var unique = $(this).attr('id').replace(/[^\d.]/g,'');
MyArray ["'"+unique+"'"] = new Array();
});
The unique is a 8 digit integer. So if I dont wrap it inside the quotes, the ListUI_col_orders array will become extremly big, because if the unique = 85481726 then javascript will fill the array with 85481725 undefined elements before the the new empty array at the 85481726th index.
My problem is that later if i generate the unique again i cannot access the array anymore:
var unique = $(this).attr('id').replace(/[^\d.]/g,'');
console.log(MyArray [unique]); // undefined
console.log(MyArray ['"'+unique+'"']); // undefined
console.log(MyArray [unique.toString()]); // undefined
Any tips?
If you are going to use an array that's mostly sparse, then use a Hash table instead.
eg, set your variable as follows:
ListUI_col_Orders = {};
Then your indexing will be a key, so you don't have to worry about all the interstitial elements taking up space.
...because if the unique = 85481726 then javascript will fill the array with 85481725 undefined elements before the the new empty array at the 85481726th index.
No, it won't. JavaScript standard arrays are sparse. Setting an element at index 85481725 results in an array with one entry, and a length value of 85481726. That's all it does. More: A myth of arrays
The problem is that you're trying to retrieve the information with a different key than the key you used to store it. When storing, you're using a key with single quotes in it (actually in the key), on this line of code:
MyArray ["'"+unique+"'"] = new Array();
Say unique is 85481726. That line then is equivalent to this:
MyArray ["'85481726'"] = new Array();
Note that the key you're using (the text between the double quotes) has ' at the beginning and end. The actual property name has those quotes in it. Since it doesn't fit the definition of an array index, it doesn't affect length. It's a non-index object property. (How can you add a property to an array that isn't an array index? Arrays are not really arrays, see the link above.)
Later, you never use that key when trying to retrieve the value:
var unique = $(this).attr('id').replace(/[^\d.]/g,'');
console.log(MyArray [unique]); // undefined
console.log(MyArray ['"'+unique+'"']); // undefined
console.log(MyArray [unique.toString()]); // undefined
The keys you tried there were 85481726, "85481726" (with double quotes), and 85481726 again. Note that you never tried '85481726' (with single quotes), which is the key you used originally. Since you didn't use the same key, you didn't get the value.
Either use consistent quotes, or (much better) don't use quotes at all. Don't worry about the array length being a large number, JavaScript arrays are inherently sparse. Adding an entry with a large index does not create several thousand undefined entries in front of it.
All of that being said, unless you need the "array-ness" of arrays, you can just use an object instead. Arrays are useful if you use their features; if you're not using their array features, just use an object.
More about the sparseness of arrays: Consider this code:
var a = [];
a[9] = "testing";
console.log(a.length); // 10
Although the length property is 10, the array has only one entry in it, at index 9. This is not just sophistry, it's the actual, technical truth. You can tell using in or hasOwnProperty:
console.log(a.hasOwnProperty(3)); // false
console.log("3" in a); // false
When you try to retrieve an array element that doesn't exist, the result of that retrieval is undefined. But that doesn't mean there's an element there; there isn't. Just that trying to retrieve an element that doesn't exist returns undefined. You get the same thing if you try to retrieve any other property the object doesn't have:
var a = [];
a[9] = "testing";
console.log(a[0]); // undefined
console.log(a[200]); // undefined
console.log(a["foo"]); // undefined
Final note: All of this is true of the standard arrays created with [] or new Array(). In the next spec, JavaScript is gaining true arrays, created with constructors like Int32Array and such. Those are real arrays. (Many engines already have them.)
I have to push elements in an associative array from another array after some processing and I'm doing something this:
for(var i in this.aNames) {
var a = this.aNames[i];
// some processing on a
aList[i] = a;
aList.push(i);
}
But it's not giving me the proper array.
EDIT :
Here aNames is an associative array like this
'1232':'asdasdasd',
'6578':'dasdasdas'
...... and so on of about 100 elements.
I'm using for here as I want to do some changes in every element of the array.
Then I'm displaying the result array on the page but it's showing the key value together with the array data.
I.e. it should only display asdasdasd or asdasdasd but it's displaying keys too, like 1232 asdasdasd 6578 dasdasdas.
There are multiple things which may go wrong...
Primarily, make sure that this is pointing to the correct context and that this.aNames is actually returning a complex object (associative array).
Also, what's aList? Is it an array? If it is, push should append your array with the key of the current member (the member's name).
If you want to append the values of the members on your source object, you need to do something like this:
var obj = {name: 'dreas'},
arr = []; // arr is an array
arr.push(obj["name"]); // arr now contains a single element, 'dreas'
In your for..in construct, you are both adding elements to an alleged array (aList) with push but also creating new members on your array (with the subscript notation, aList[i] = "asd" since i in this case (for..in iteration) refers to the member's name).
So, what you need to do is decide if you want to add elements to an array or members to an object, not both.
If you just want to clone an array, use a for loop. If on the other hand you want to clone an object, it's not that trivial because members can also be complex objects containing their own members, and simply doing arr[i] = obj.member will only copy a pointer to arr[i] if member is a complext object, not a value type.
Just to make sure my terminology is understandable:
var anObject = {name: "dreas"},
anArray = [1,2,3];
anObject["name"] <= member (results in "dreas")
anArray[1] <= element (results in 2)