Suppose I am a user script developer and I don't have control over the on-page javascript. The page creates arrays with random lengths, filling them with random values (including falsy ones, such as undefined). Not every element has to be assigned a value, so there may be empty slots.
A simplified example (Firefox console):
var arr = new Array(3);
arr[0] = null;
arr[1] = undefined;
console.log(arr); \\ Array [ null, undefined, <1 empty slot> ]
console.log(arr[1]); \\ undefined
console.log(arr[2]); \\ undefined
console.log(arr[1] === arr[2]); \\ true
console.log(typeof arr[1]); \\ undefined
console.log(typeof arr[2]); \\ undefined
As we can see, Firefox displays undefined and empty slots differently, whereas for javascript they seem to be identical.
Now suppose I want to clean such an array, removing all empty slots but leaving undefined elements intact. How do I do that?
You can use the in operator to check if the array has a key. It will return false for empty slots, but true for slots with values, including the value undefined:
var arr = new Array(3);
arr[0] = null;
arr[1] = undefined;
1 in arr; // true
2 in arr; // false
Note that you can't distinguish between empty slots and slots past the end of the array using that, but if you know the length of the array, then you already know that 3 isn't part of it, so you don't need to test 3 in arr.
You can also filter out the empty slots like this:
arr = arr.filter( ( _, i ) => i in arr );
You could use Array#forEach, which omits sparse elements.
var arr = new Array(3);
arr[0] = null;
arr[1] = undefined;
console.log(arr);
var withoutSparse = [];
arr.forEach(function (a, i) {
console.log(i);
withoutSparse.push(a);
});
console.log(withoutSparse);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Related
I am trying to filter an array of arrays of objects, but it does not work.
constructNewGrid(filterText){
if(searchText == ""){
this.constructedGrid = this.fullGrid;
return;
}
this.constructedGrid = [];
this.constructedGrid = this.fullGrid.filter(array => array.filter(obj => {
if(obj.name == filterText)
return obj;
}));
console.log(this.constructedGrid);
}
I want to return an array of arrays with the correct object if found one but when I console log it constructedGridis the same array but why?
The code should go to the first array should look up whether there is an object with the name equals to the filter text it should return the array with the corrosponding object and then the next array should be checked and so on.
This, would be the format:
[
[[{name: string}], empty, empty], // array of lenth 3
[empty, empty, [{name: string}], empty], // array of length 4
...
]
If one object is found it should push it in an array separately such that if two objects where found in the same array, it should put them both in separately push them in two separat arrays and those should be in one single array:
Result should be
[
[[obj1]],
[[obj2]],
...
]
It seems in possible for me. I got sometime an error that I am out of memory haha...
You'll need map in addition to filter, because filter just decides whether to keep what's there, it doesn't change what's there. map does. Something like this:
this.constructedGrid = this.fullGrid
// Map the inner array to one that only has matching entries
.map(array => array.filter(obj => obj && obj.name === filterText))
// Remove blank inner arrays from the overall array
.filter(array => array.length);
Live Example:
const fullGrid = [
[[{name: "target"}], , ],
[, null, [{name: "target"}], undefined],
];
const filterText = "target";
const constructedGrid = fullGrid
// Map the inner array to one that only has matching entries
.map(array => array.filter(obj => obj && obj[0] && obj[0].name === filterText))
// Remove blank inner arrays from the overall array
.filter(array => array.length);
console.log(constructedGrid);
.as-console-wrapper {
max-height: 100% !important;
}
Note that you only need that second filter if you want to remove arrays that are completely empty from the outer array. If you want to leave them, just remove that call. Edit: From your reply to my question on the question, it sounds like you want to remove that second .filter.
Note the guard in the first filter, the obj && obj[0] && part. It's there because you said sometimes array entries are "empty." I don't know if you literally meant empty — a sparse array — or entries that are undefined. If you literally meant empty (a sparse array), you don't need the guard, but it's probably best to have it.
As of ES2020, you could use the optional chaining operator instead:
.filter(obj => obj?.[0]?.name === filterText)
obj?.[0]?.name evaluates to undefined if obj is null or undefined, or obj[0] is null or undefined; it evaluates to obj[0].name otherwise. Since undefined === filterText will be false, entries with a null or undefined obj will be left out. Again, though, new feature, you'll need to check support on your target browsers if you're not transpiling.
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.
e.g. 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:
What type of array is it?
What does empty mean here?
How is it different from array which has all undefined values or empty array? or is it not?
Do we use it or any sample use case for this one
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.
Intro to sparse arrays
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).
Empty slots
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
"the property exists and the value assigned to it is undefined"
"the property does not exist at all"
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));
Why it matters
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.
I'm building my own map method to be as close as the native map method.
Since the native map pushes(i think) the changed values into a new array, it still keeps the empty slots. I wasn't able to find a solution to push an empty slot into an array, like this example below.
[1, 2, 3].push(some code) // [1, 2, 3, empty]
I tried pushing an array with one empty item prefixed with a spread operator arr.push(...(new Array(1))) or arr.push(...[,]) but that just pushes undefined.
I solved my problem by not using push and instead assigning values to the array index that way skipped indices will be set to empty.
But I'm writing this post to see if anyone knows that if it's possible to use the push method to push an empty slot to an array.
No, it's not possible, not with the push method. empty can only exist if the array has a certain length, but a whole number property of the array does not exist at some index. This is called a sparse array, and cannot be created with push (or other array methods, if they're called on and with non-sparse arrays).
The only way to do so would be to assign to an index for which a lower index doesn't exist yet.
Look at the results for the below two snippets in your browser console, not the snippet console:
const arr = [];
arr[1] = 'a';
console.log(arr);
Or to set the .length of the array above the last index that the array has:
const arr = [];
arr.length = 1;
console.log(arr);
But the two approaches above are very weird to do and probably have no good reason to be used. Better to avoid sparse arrays entirely.
Keep in mind that an empty slot is different from undefined, which is perfectly possible to have as an array value:
const arr = [];
arr.push(undefined);
console.log(arr);
You can create an empty slot in an array by incrementing the array length:
var a = []
a.push(1)
a.length++
a.push(3)
console.log(a)
console.log(1 in a) // anything at index 1?
Alternatively, you can push something and then delete it:
var a = []
a.push(1)
a.push(2)
a.push(3)
delete a[1]
console.log(a)
console.log(1 in a) // anything at index 1?
There is no need to actually push to a new array in your implementation. You can simply do new Array(this.length) where this.length is the array you are mapping through length.
For example consider this map implementation:
if (!Array.prototype.mapIt) {
Object.defineProperty(Array.prototype, "mapIt", {
value: function(fn) {
if (this === null) {
throw new TypeError('Array.prototype.mapIt called on null or undefined');
}
if (typeof fn !== 'function') {
throw new TypeError('predicate must be a function');
}
let _array = this.filter(x => x != null) // remove empty values
let result = new Array(_array.length) // the new array we will return
for (var i = 0; i < _array.length; i++) {
result[i] = fn.call(arguments[1], _array[i], i, _array) // call the predicate
}
return result;
}
});
}
let arr = [1, 2, , , 3] // the test array
let result = arr.mapIt((c, i, a) =>
console.log(`current: ${c}`, `index: ${i}`, `array: ${a}`) || c + 2)
console.log('result: ', result)
console.log('original array: ', arr)
Hope this helps you with an gives you an idea about a possible map implementation.
This question already has answers here:
How do I check in JavaScript if a value exists at a certain array index?
(19 answers)
Closed 5 years ago.
I am using like to check if array is not empty
if(array != null){
//code
}
I also found like that
if(Array.isArray(array)){
//code
}
and
if(array.length){
//code
}
Which one is better to use above three ?
I suggest to use Array.isArray and the length property of the array
if (Array.isArray(array) && array.length) {
// code
}
because it checks if array is an array and if the length has a truthy value.
Comparing your attempts:
Truthy check
if (array != null) { // which is basically the same as if (array) {
//code
}
This is true for all truthy values, like 1, 'a', {}. This result is not wanted.
Array check
if (Array.isArray(array)) {
// code
}
This checks only if array is an array, but not the length of it. Empty arrays returns true, which is not wanted.
Length check
if (array.length) {
// code
}
This works only for objects which may have a property of length, which have a truthy value.
While this comes close to the wanted result, it might be wrong, for example with objects like
{ length: 'foo' }
or with array-like objects.
If you want to know if an Object is an Array, then Array.isArray() will do.
If you want to know if an Array has items, than array.length !== 0 will do.
If you want to know if a variable is not null than array !== null will do.
I am use to array.length
To check if array is not empty, use if( array.length > 0) {}
It's better to check the length of the array but there is one issue in it. Consider if someone entered an undefined value in the array then the array will be empty but still have the length greater than 0.
for(var i=0,i<array.length;i++){
if(typeof(array[i]) !== 'undefined'){
};
};
var isEmptyArray = function(arr) {
return (arr || []).length === 0;
}
var arr1 = [1, 2, 3];
var arr2 = [];
var arr3 = undefined;
console.log(isEmptyArray(arr1)); // false
console.log(isEmptyArray(arr2)); // true
console.log(isEmptyArray(arr3)); // true
the best solution is
if (array.length>0){
....
}
but this sentence have a problem if you plan in deleting indexes from the array, since you can have an array like this [undefined,undefined,undefined], whos length is 3 but is technically empty.
var a = [1,2,3];
delete a[0];
delete a[1];
delete a[2];
a.length > 0 /// true
a /// [undefined x 3]
Take this in consideration to make the exact sentence
edit: don't do this. this was a stupid way of doing something I tried when I was new to programming
I have a list of 32 pieces of data in an array that are paired like this
"foo:bar","baz:example","cat:dog"
and I want to loop through that array to and stop on the pair that matches the user's input. So, for example, if the user types in "foo" it'll return both "foo" and "bar" separately, and if the user types in "bar" it'll return both "foo" and "bar". There are no values that repeat.
Right now what I have is a huge table with if statements. So if the user's input is x, then it returns the correct value. I had to do the matching by hand, and I'm assuming that looping through the array until the correct value is found would be more efficient than 64 different ifs.
I've tried something like this (just an example) using two separate arrays:
for (var i=0;i<array.length;i++) {
if (array[i] === user_input) {
var index = indexOf(array[i]);
break;
}
}
and then using the index variable as the index number of the value in each array, but it returns undefined
I've also tried this: Separate key and value pairs into two arrays
But it gives me all the values in the array, which I don't want. I just want one specific value that the user inputs. And while I can select one specific portion of the array using the index number, I can't figure out how to make that dynamic (e.g. changing based on what the user inputs).
Is it even possible to do this? And if not, what would be the best way?
Thanks.
You can do this:
function getPair(arr, search) {
var rtn = arr.filter(function (v, i) {
return new RegExp("\\b" + search + "\\b").test(v);
})[0];
return rtn ? rtn.split(':') : -1;
}
Use it like this:
var array = ["foo:bar","baz:example","cat:dog"];
getPair(array, "foo"); // ["foo","bar"]
Note: The above function returns -1 if the search string isn't found in the array.
Here's a function that iterates over the array, and checks if the user_input is anywhere. If so, it will return the string that it found a match for.
function getPair(array, user_input) {
for (var i=0;i<array.length;i++) {
var pair = array[i].split(':');
if (pair.indexOf(user_input) >= 0) {
return pair;
}
}
return [];
}
var array = ["foo:bar","baz:example","cat:dog"];
getPair(array, "foo"); //will return ['foo', 'bar']
getPair(array, "bar"); //will return ['foo', 'bar']
getPair(array, "dog"); //will return ['cat', 'dog']
getPair(array, "zzz"); //will return []
I would suggest to work with objects. First, convert your array:
var pair,obj1={},obj2={};
for (var i=0;i<array.length;i++) {
pair=array[i].split(":");
obj1[pair[0]]=pair[1];
obj2[pair[1]]=pair[0];
}
This will give you the following objects:
obj1={
"foo":"bar",
"baz":"example",
"cat":"dog"
};
obj2={
"bar":"foo",
"example":"baz",
"dog":"cat"
};
Then based on the user input:
if (obj1[user_input]) {return [user_input,obj1[user_input]];}
else if (obj2[user_input]) {return [obj2[user_input],user_input];}
else return undefined;
Live demo: http://jsfiddle.net/x23qG/