Sorry for misleading title here, I wasn't able to frame any proper one.
I am confused in array when there is nothing inside them (prints by empty X n
) but they have length.
eg I create array by const a = [,,,]
. This creates an array whose length is 3 but nothing inside it. If i print it in browser console, it prints the following:
What does empty mean here?
If I run map or forEach function and try to console something, I get nothing.
Have added some code.
const a = [,,,] console.log("print a: ",a) console.log("print a.length: ",a.length) console.log("print typeof a[0]: ", typeof a[0]) console.log("a.forEach((data, index) => { console.log(data, index) }): ", a.forEach((data, index) => { console.log(data, index) })) console.log("") const b = [undefined, undefined, undefined] console.log("print b: ", b) console.log("print b.length: ", b.length) console.log("print typeof b[0]: ", typeof b[0]) console.log("b.forEach((data, index) => { console.log(data, index) }): ", b.forEach((data, index) => { console.log(data, index) })) console.log("") console.log("compare a[0] and b[0]: ", a[0] === b[0])
The only thing which differs is when I print a and b (though stackoverflow console prints them same but browser console prints differently) and when I try to loop through the array. Also momentjs isEqual gives them equal ( jsfiddle here )
My main doubts are:
I have read about null and undefined array values and have understood it. But for this one, I haven't find anything proper. Most of the search I found were related to const a = [] is an empty array or how to check if array is empty and so on.
So, if someone can explain or give any proper links to read, it will be very helpful.
Please let me know, if I should add anything else.
First a clarification what you've created is called a sparse array . To put it simply, sparse arrays are similar to normal arrays but not all of their indexes have data. In some cases, like JavaScript, this leads to slightly more significant handling of them. Other languages simply have a normal array of fixed length with some values that are "zero" in some sense (depends on what value can signify "nothing" for a specific array - might be 0
or null
or ""
, etc).
The empty slot in a sparse array is exactly what it sounds like - slot that is not filled with data. JavaScript arrays unlike most other implementations, are not fixed size and can even have some indexes simply missing . For example:
const arr = []; // empty array
arr[0] = "hello"; // index 0 filled
arr[2] = "world"; // index 2 filled
You will get an array with no index 1. It's not null
, nor it's empty, it's not there. This is the same behaviour you get when you have an object without a property:
const person = {foo: "hello"};
You have an object with a property foo
but it doesn't have, for example, a bar
property. Exactly the same as how the array before doesn't have index 1
.
The only way JavaScript represents a "value not found" is with undefined
, however that conflates
undefined
" Here as an example:
const person1 = { name: "Alice", age: undefined }; const person2 = { name: "Bob" }; console.log("person1.age", person1.age); console.log("person2.age", person2.age); console.log("person1.hasOwnProperty('age')", person1.hasOwnProperty('age')); console.log("person2.hasOwnProperty('age')", person2.hasOwnProperty('age'));
You get undefined
when trying to resolve age
in either case, however the reasons are different.
Since arrays in JavaScript are objects, you get the same behaviour:
const arr = []; // empty array arr[0] = "hello"; // index 0 filled arr[2] = "world"; // index 2 filled console.log("arr[1]", arr[1]); console.log("arr.hasOwnProperty(1)", arr.hasOwnProperty(1));
Sparse arrays get a different treatment in JavaScript. Namely, array methods that iterate the collection of items will only go through the filled slots and would omit the empty slots. Here is an example:
const sparseArray = []; // empty array sparseArray[0] = "hello"; // index 0 filled sparseArray[2] = "world"; // index 2 filled const arr1 = sparseArray.map(word => word.toUpperCase()); console.log(arr1); //["HELLO", empty, "WORLD"] const denseArray = []; // empty array denseArray[0] = "hello"; // index 0 filled denseArray[1] = undefined; // index 1 filled denseArray[2] = "world"; // index 2 filled const arr2 = denseArray.map(word => word.toUpperCase()); //error console.log(arr2);
As you can see, iterating a sparse array is fine, but if you have an explicit undefined
, in the array, then word => word.toUpperCase()
will fail because word
is undefined
.
Sparse arrays are useful if you have numerically indexed data that you want to run .filter
, .find
, .map
, .forEach
and so on. Let's illustrate again:
//some collection of records indexed by ID const people = []; people[17] = { id: 17, name: "Alice", job: "accountant", hasPet: true }; people[67] = { id: 67, name: "Bob", job: "bank teller", hasPet: false }; people[3] = { id: 3, name: "Carol", job: "clerk", hasPet: false }; people[31] = { id: 31, name: "Dave", job: "developer", hasPet: true }; /* some code that fetches records */ const userChoice = 31; console.log(people[userChoice]); /* some code that transforms records */ people.map(person => `Hi, I am ${person.name} and I am a ${person.job}.`).forEach(introduction => console.log(introduction)); /* different code that works with records */ const petOwners = people.filter(person => person.hasPet).map(person => person.name); console.log("Current pet owners:", petOwners)
its just what it is empty
its neither undefined
or null
const a = [,,,,]
is same as const a = new Array(4)
here a
is an array with no elements populated and with only length
property
do this, let arr1 = new array()
and then console.log(arr1.length)
you'll get 0 as output. and if you do console.log(arr1)
you'll get [ <4 empty items> ]
if you change the length property of arr1 like this arr1.length = 4
you will have an empty array with it's length property = 4, but no items are populated so those slot will be empty
and if you do console.log(typeof(arr1[0])
you get undefined
only because there is no other possible types to show. And no methods of Array will be applied with an array with empty elements
so,
Empty array means an array with length property and with unpopulated slots
this is different from arrays with undefined
because in JS undefined
is a type and you can execute and have results by calling all array methods on it, whereas an array with empty
elememts have no type and no array methods can be applied on it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.