Union which mutate array in lodash - javascript

Is there a function in lodash which makes a union of two arrays by modifying the first one? Union should add the element only if there are no duplicates.
Something along the lines of
a=[1,2,3,4,5,6]; _.mergeArrays(a, [6,7]);
[1,2,3,4,5,6,7]

This can be easily done with "vanilla" JavaScript. It requires ES5 (2009) only, which is implemented by all the major web browsers.
var array = [1,2,3,4,5];
var anotherArray = [6,7];
anotherArray.forEach(function(val) {
if (array.indexOf(val) === -1) {
array.push(val);
}
});

You can use spread element, Set which does not allow duplicate entries
var a = [1, 2, 3, 4, 5];
var add = [6, 7, 3, 5];
a = [...new Set([...a, ...add])];
console.log(a);

Related

Can I point to an array using a value with the same name as the array?

I've got 50 different lists, called list1, list2, and so forth. I also have a function which rolls a random number between 1 and 50 and then stores the value in a variable called randomNumber, and what I want to do is to access the list with a matching number.
My attempt at access the list looked like this:
document.getElementById("demo").innerHTML = list + randomNumber;
One solution would be to put all 50 lists into one list, and then use the randomNumber to access the right list through index. I am however still curious if this can be done in a way similar to what I was decribing above the code though.
Inserting the arrays into another array and accessing them by their indexes (or assigning them to property values on an object and accessing them by their associated property names) is the right approach.
The only way to reference scoped variables by strings representing their names is by using eval().
However, I will echo the linked MDN article: Don't do this.
⚠️ Warning: Executing JavaScript from a string is an enormous security risk. It is far too easy for a bad actor to run arbitrary code when you use eval(). See Never use eval()!, below.
Here's an example of using eval to reference each of the arrays below:
const list1 = [1, 2, 3];
const list2 = [4, 5, 6];
console.log(eval('list' + '1')); // [1, 2, 3]
console.log(eval('list' + '2')); // [4, 5, 6]
And here's an example of the recommended approach:
const list1 = [1, 2, 3];
const list2 = [4, 5, 6];
// As an object:
const listNames = {
list1,
list2,
};
// As an array:
const lists = [
list1,
list2,
];
console.log(listNames['list' + '1']); // [1, 2, 3]
console.log(lists[0]); // [1, 2, 3]
console.log(listNames['list' + '2']); // [4, 5, 6]
console.log(lists[1]); // [4, 5, 6]

.flat() is not a function, what's wrong?

The following code
function steamrollArray(arr) {
// I'm a steamroller, baby
return arr.flat();
}
steamrollArray([1, [2], [3, [[4]]]]);
returns
arr.flat is not a function
I tried it in Firefox and Chrome v67 and the same result has happened.
What's wrong?
The flat method is not yet implemented in common browsers (only Chrome v69, Firefox Nightly and Opera 56). It’s an experimental feature. Therefore you cannot use it yet.
You may want to have your own flat function instead:
Object.defineProperty(Array.prototype, 'flat', {
value: function(depth = 1) {
return this.reduce(function (flat, toFlatten) {
return flat.concat((Array.isArray(toFlatten) && (depth>1)) ? toFlatten.flat(depth-1) : toFlatten);
}, []);
}
});
console.log(
[1, [2], [3, [[4]]]].flat(2)
);
The code was taken from here by Noah Freitas originally implemented to flatten the array with no depth specified.
This can also work.
let arr = [ [1,2,3], [2,3,4] ];
console.log([].concat(...arr))
Or for older browsers,
[].concat.apply([], arr);
Array.flat is not supported by your browser. Below are two ways to implement it.
As a function, the depth variable specifies how deep the input array structure should be flattened (defaults to 1; use Infinity to go as deep as it gets) while the stack is the flattened array, passed by reference on recursive calls and eventually returned.
function flat(input, depth = 1, stack = [])
{
for (let item of input)
{
if (item instanceof Array && depth > 0)
{
flat(item, depth - 1, stack);
}
else {
stack.push(item);
}
}
return stack;
}
As a Polyfill, extending Array.prototype if you prefer the arr.flat() syntax:
if (!Array.prototype.flat)
{
Object.defineProperty(Array.prototype, 'flat',
{
value: function(depth = 1, stack = [])
{
for (let item of this)
{
if (item instanceof Array && depth > 0)
{
item.flat(depth - 1, stack);
}
else {
stack.push(item);
}
}
return stack;
}
});
}
Similar issue, solved by using ES6 .reduce() method:
const flatArr = result.reduce((acc, curr) => acc.concat(curr),[]);
use _.flatten from lodash package ;)
var arr=[[1,2],[3,4],[5,6]];
var result=[].concat(...arr);
console.log(result); //output: [ 1, 2, 3, 4, 5, 6 ]
Another simple solution is _.flattenDeep() on lodash
https://lodash.com/docs/4.17.15#flattenDepth
const flatArrays = _.flattenDeep([1, [2], [3, [[4]]]]);
console.log(flatArrays);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
const array = [
[
[6, 6],
[3, 3],
],
[[7, 7, [9]]],
]
function simplifyArray(array) {
const result = []
function recursivePushElem(arr) {
arr.forEach(i => {
if (Array.isArray(i)) recursivePushElem(i)
else result.push(i)
})
}
recursivePushElem(array)
console.log(result)
return result
}
simplifyArray(array)
you could simply use this [].concat(...objArrs) that would work the same as the flat() method and allow more compatibility in browsers
You can set your full array to a string then split it. .toString().split(',')
Updated due to community bot.
So basically if you want to flatten out an array that does contain any objects but strictly strings or numbers, by using .toString() it converts each element of the array to a string (if it isn't already), and then joins all of the elements together using a comma as a separator.
Once we have our string all separated by a comma we can use .split() to create an array.
NOTE*** The reason this wont work with objects is that .toString() will return [object object] as it is the default string representation of an object in JavaScript.
If your array consists solely of numbers than you would need to map through your array and convert each string number value to a number.
const array1 = [
['one', 'oneTwo'],
'two',
'three',
'four',
]
console.log('a1', array1.toString().split(','))
const numberArray = [1, 2, [3, 4, [5, 6]], [[7, [8,9]]], 10];
console.log(numberArray.toString().split(',').map(num => Number(num)));
Not sure if it is a valid answer however in my attemp to flat an array I employed the destructuring_assignment introduced in ES6.
// typeScriptArray:Array<Object> = new Array<Object>();
let concatArray = [];
let firstArray = [1,2,3];
let secondArray = [2,3,4];
concatArray.push(...firstArray);
concatArray.push(...secondArray);
console.log(concatArray);
It works like a charm even though I'm not sure if any broswer compatibily issues may arise.

How to iterate over array in reverse order with Lodash?

I want to iterate over an array in reverse order using Lodash. Is that possible?
My code looks like below.
var array = [1, 2, 3, 4, 5];
_.each(array, function(i) {
_.remove(array, i);
});
When I do _.pullAt(array, 0) new array is [2, 3, 4, 5]. All array elements shifted to left by 1 position, and current index is pointing to element 3. After next iteration, 3 will get deleted and then 5. After 3rd iteration array contains [2, 4] which I couldn't delete.
If I iterate over the array in reverse order, then this problem won't arise. In Lodash, can I iterate over an array in reverse order?
You can use _.reverse available in version 4:
var array = [1, 2, 3, 4, 5];
array = _.reverse(array)
console.log(array)
//5, 4, 3, 2, 1
See How do I empty an array in JavaScript? if you only want that and choose your weapon.
Otherwise, strictly answering the question, to iterate the indices from the length of the array to zero, you could use the "down-to" --> operator1. But that's not really necessary, even underscore isn't necessary in this case as the .pop function is enough.
var arr = [1, 2, 3, 4, 5],
index = arr.length;
while (index --> 0) {
console.log(index);
arr.pop();
}
console.log(arr);
If you're using Lodash like the functions referenced in the question seem to indicate, you could use _.eachRight.
var arr = [1, 2, 3, 4, 5];
_.eachRight(arr, function(value) {
console.log(value);
arr.pop();
});
console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
1 The down-to operator doesn't exist and is only a -- decrement followed by a > comparison.

Convert ES6 Iterable to Array

Say you have an array-like Javascript ES6 Iterable that you know in advance will be finite in length, what's the best way to convert that to a Javascript Array?
The reason for doing so is that many js libraries such as underscore and lodash only support Arrays, so if you wish to use any of their functions on an Iterable, it must first be converted to an Array.
In python you can just use the list() function. Is there an equivalent in ES6?
You can use Array.from or spread syntax (...).
Example:
const x = new Set([ 1, 2, 3, 4 ]);
const y = Array.from(x);
console.log(y); // = [ 1, 2, 3, 4 ]
const z = [ ...x ];
console.log(z); // = [ 1, 2, 3, 4 ]
Summary:
Array.from() function, it takes an iterable as in input and returns an array of the iterable.
Spread syntax: ... in combination with an array literal.
const map = new Map([[ 1, 'one' ],[ 2, 'two' ]]);
const newArr1 = [ ...map ]; // create an Array literal and use the spread syntax on it
const newArr2 = Array.from( map ); //
console.log(newArr1, newArr2);
Caveat when copying arrays:
Be cognizant of the fact that via these methods above only a shallow copy is created when we want to copy an array. An example will clarify the potential issue:
let arr = [1, 2, ['a', 'b']];
let newArr = [ ...arr ];
console.log(newArr);
arr[2][0] = 'change';
console.log(newArr);
Here because of the nested array the reference is copied and no new array is created. Therefore if we mutate the inner array of the old array, this change will be reflected in the new array (because they refer to the same array, the reference was copied).
Solution for caveat:
We can resolve the issue of having shallow copies by creating a deep clone of the array using JSON.parse(JSON.stringify(array)). For example:
let arr = [1, 2, ['a', 'b']]
let newArr = Array.from(arr);
let deepCloneArr = JSON.parse(JSON.stringify(arr));
arr[2][0] = 'change';
console.log(newArr, deepCloneArr)
You can use the Array.from method, which is being added in ES6, but only supports arrays and iterable objects like Maps and Sets (also coming in ES6). For regular objects, you can use Underscore's toArray method or lodash's toArray method, since both libraries actually have great support for objects, not just arrays. If you are already using underscore or lodash, then luckily they can handle the problem for you, alongside adding various functional concepts like map and reduce for your objects.
The following approach is tested for Maps:
const MyMap = new Map([
['a', 1],
['b', 2],
['c', 3]
]);
const MyArray = [...MyMap].map(item => {
return {[item[0]]: item[1]}
});
console.info( MyArray ); //[{"a", 1}, {"b", 2}, {"c": 3}]
<Your_Array> = [].concat.apply([], Array.from( <Your_IterableIterator> ));
You could also do the following, but both approaches are certainly not recommendable (merely a proof-of-concept for completeness):
let arr = [];
for (let elem of gen(...)){
arr.push(elem);
}
Or "the hard way" using ES5 + generator function (Fiddle works in current Firefox):
var squares = function* (n) {
for (var i = 0; i < n; i++) {
yield i * i;
}
};
var arr = [];
var gen = squares(10);
var g;
while (true) {
g = gen.next();
if (g.done) {
break;
}
arr.push(g.value);
}

How can I push array inside array

I have an array and I want to put it in another array using indexes.
For example:
arry[1].push(sub_array_1)
array[2].push (sub_array_2)
But I get an error if I write:
var sub_array_1 = [1, 2, 2, 2, 2];
arry[1].push(sub_array_1)
Using spread operator
var subArray = [1, 4, 6, 7];
var mainArray = [6, 7, 8];
var index = 1;
mainArray = [...mainArray.slice(0, index), subArray, ...mainArray.slice(index)];
Assuming:
var arry = [9,8,7];
var sub_array_1 = [1,2,2,2,2];
If you are trying to insert sub_array_1 into arry, as a single element, just use splice directly:
arry.splice(1, 0, sub_array_1);
The result will be:
[9,[1,2,2,2,2],8,7]
On the other hand, if you are trying to insert the contents of sub_array_1 before the second element of arry, you can do something like this:
Array.prototype.splice.apply(arry, [1, 0].concat(sub_array_1));
The result will be:
[9,1,2,2,2,2,8,7]
Here is a more general function:
function insert(arrayDest, index, arraySrc) {
Array.prototype.splice.apply(arrayDest, [index, 0].concat(arraySrc));
}
[EDITED]
Starting with ES6, you can simplify the above code using the spread operator (...). For example:
function insert(arrayDest, index, arraySrc) {
arrayDest.splice(index, 0, ...arraySrc);
}
You're using wrong syntax! Follow the either below mentioned approach.
var sub_array_1 = [1,2,2,2,2];
arry[1] = sub_array_1;
// OR
var sub_array_1 = [1,2,2,2,2];
arry.push(sub_array_1);
.push(ele) will add an item to an array, thereby incrementing the length of array by 1. Remember array index starts at 0.
If you need to add an item(array/object/other) to a particular index, use [index]. Eg: arry[0] = [1,23]; arry[1] = [4,5,6,7];
obj.arrayOne.push(arrayLetters);
or
obj['arrayOne'].push(arrayLetters);
let array = []
array.push({"index": 0, "value":100})
console.log(array)
maybe it helping for you

Categories