Related
I work on an Angular project and I built an array.
Now I'd like to rename one of the items of the array. I found the way to rename the keys of an array but I still don't know how to do to apply this to its values.
Here is my array below.
I'd like to change 'valueC' by 'valueZ'.
myArray = ['valueA', 'valueB', 'valueC']
I tried the following code :
for (const k in this.myArray) {
if (k == "valueC") {
this.myArray[k] = "valueZ";
}
But it does not work.
Could you help me ?
Any help would be very appreciated, thanks.
Below are two possible methods!
const myArray = ['valueA', 'valueB', 'valueC']
//rename - if index known
myArray[2] = 'valueZ';
console.log('if index known', myArray);
//rename - if index not known
const foundIndex = myArray.findIndex(x => x === 'valueC');
if (foundIndex > -1) {
myArray[2] = 'valueZ';
}
console.log('if index not known', myArray);
Your code just needs a minor correction:
if (this.myArray[k] == "valueC")
Try this:
const myArray = ['valueA', 'valueB', 'valueC'];
for (const k in myArray) {
if (myArray[k] == "valueC") {
myArray[k] = "valueZ";
}
}
console.log(myArray);
You need to track the index, easy with a forEach
this.myArray.forEach((k, index) => {
if (k == "valueC") {
this.myArray[index] = "valueZ";
}
})
My prefered way :
Though, be sure to have the value "valueC" inside the array
otherwise indexOf will return a -1, provoquing an error
// without index control
this.myArray[this.myArray.indexOf("valueC")] = "valueZ";
// with index control
const index = this.myArray.indexOf("valueC")
if (index >= 0) {
this.myArray[index] = "valueZ";
}
Also note this for future usage :)
for (const k in array) : in that case k is the index of elements in array
for (const k of array) : in that case k is the value of elements in array
On top of all the other solutions here, another approach, and one I believe is better in that it gets you in the mindset of immutability, is to return a new object instead of modifying the current one.
Ex:
this.myArray = this.myArray.map(x => {
if(x !== 'valueC')
return x;
return 'valueZ';
});
So map here will return a new array object for us, in this case a string array given your current array is a string array. Another pattern in use here is only checking for the negative case. Instead of having if/else or a chain of them, we know that for all case that aren't 'valueC' we retain their original value and only valueC's value needs to change to valueZ
Here is some Javascript code that creates a 2-dimension array and fills each cell with a random number.
// populate 2D array with integers
const row = 5, col = 7
let pic = new Array(row).fill(0).map(item => (new Array(col).fill(0)))
for (let x = 0; x < row; x++) {
for (let y = 0; y < col; y++) {
pic[x][y] = Math.floor((Math.random() * 90) + 10)
}
}
console.log(JSON.stringify(pic))
I'm looking for a more 'elegant' solution. My questions:
Is there a way to use the fill so that I can put in my target values? Then I can be finished with creating the array in one line.
How do I use a double .map to populate the 2D array, instead of a double for loop?
Is there a way to assign the output from the map / for loops directly into a variable? Then I don't need a separate create statement.
What is the best way to reshape an array? For example, changing a 1-by-10 array into a 5-by-2 array.
Is there a way to enforce a type? For instance the first dimension is a string, 2nd is an integer, etc.
Feel free to add your own definition of elegance. One of the things I'm looking for is a flexible approach that can also work with 3D arrays.
You could take a nested Array.from with a length and a mapping function.
const
fn = () => Math.floor(Math.random() * 5),
row = 5,
col = 7,
array = Array.from({ length: row }, () => Array.from({ length: col }, fn));
array.forEach(a => console.log(...a));
Is there a way to use the fill so that I can put in my target values? Then I can be finished with creating the array in one line.
No, fill is not that flexible. There is Array.from(iterable, callback) but I find it cumbersome and it is slow. I'd rather write that utility quickly
function array(n, callback){
const output = Array(n);
for(let i=0; i<n; ++i) output[i] = callback(i);
return output;
}
How do I use a double .map to populate the 2D array, instead of a double for loop?
map creates a new Array, by calling the callback function for each item on the current Array. You can abuse it to mutate the Array that is iterating. You can ignore the returnes Array and abuse it as forEach; but then map simply is the wrong tool.
var newMatrix = Array(5).fill().map(() => Array(7).fill().map(() => Math.random()));
the fill part is necessary, because Array(length) creates a sparse Array of that length and map only iterated defined indices (even if they contain undefined)
Is there a way to assign the output from the map / for loops directly into a variable? Then I don't need a separate create statement.
I'm not sure what you mean, because you already do that here let pic = new Array(row).fill(0).map(...)
What is the best way to reshape an array? For example, changing a 1-by-10 array into a 5-by-2 array.
function array(n, callback) {
const output = Array(n);
for (let i = 0; i < n; ++i) output[i] = callback(i);
return output;
}
function toGroupsOf(n, data) {
return array(Math.ceil(data.length / n), i => data.slice(n * i, n * (i + 1)));
}
const oneByTen = [array(10, v => v)];
console.log(oneByTen);
const twoByFive = toGroupsOf(5, oneByTen.slice().flat());
console.log(twoByFive);
Is there a way to enforce a type? For instance the first dimension is a string, 2nd is an integer, etc.
No, not in JS. btw. everything but the last dimension will be Arrays, not String.
But check out Typescript.
Feel free to add your own definition of elegance. One of the things I'm looking for is a flexible approach that can also work with 3D arrays.
// a general purpose function to create n-dimensional arrays.
// m(...dimensions, (...indices) => value)
function m(...args) {
return args.reduceRight((cb, length) => (...indices) => {
const output = Array(length);
for (let i = 0; i < length; ++i)
output[i] = cb(...indices, i);
return output;
})();
}
let data = m(5,7, () => Math.floor(Math.random() * 90 + 10));
console.log(data);
// 4-dimensions
console.log(m(2,3,4,5, Math.random));
// a 5x5 identity-matrix
console.log(m(5,5, (i,j) => i === j? 1: 0).join("\n"));
I'm a user of strongly typed languages like Scala, where for instance, you could never store a string in an integer variable. I find the laissez faire of Javascript difficult.
I have mixed opinions on that. I loved the way that static types and compile-time errors found little mistakes/oversights back when I learned (in AS3). Nowadays and with Typescript I often find Typescript to be too opinionated and find myself thinking f off compiler, I know/mean what I'm writing here and prefer the flexibility of JS. On the other hand, I still enjoy the assistance that comes from the IDE knowing what Objects I'm currently dealing with and what properties/methods they provide.
Heavily inspired by: https://stackoverflow.com/a/53859978/9758920
const row = 5, col = 7;
let pic = [...Array(row)].map(r => [...Array(col)].map(c => ~~(Math.random()*90)+10));
console.log(pic)
This should work.
const randomNumber = Math.floor((Math.random()*90)+10);
const randomMatrix = (row, col) => {
return new Array(row).fill(randomNumber).map(item => (new Array(col).fill(randomNumber)))
}
console.log(randomMatrix(5, 7))
Try the snippet below. initializeArray accepts parameters for width, height and a value for each cell.
const initialize2DArray = (w, h, val = null) =>
Array.from({ length: h }).map(() => Array.from({ length: w }).fill(val));
console.log(initialize2DArray(3, 3, 0)) // 3x3 matrix filled with zeros
If you prefer a N-dimension array, try the snippet below:
const initializeNDArray = (val, ...args) =>
args.length === 0
? val
: Array.from({ length: args[0] }).map(() => initializeNDArray(val, ...args.slice(1)));
console.log(initializeNDArray(-1, 3, 3, 3))
I was wondering what would be the best way to split an array into two different arrays using JavaScript, but to keep it in the realms of functional programming.
Let's say that the two arrays should be created depending on some logic. For instance splitting one array should only contain strings with less than four characters and the other the rest.
const arr = ['horse', 'elephant', 'dog', 'crocodile', 'cat'];
I have thought about different methods:
Filter:
const lessThanFour = arr.filter((animal) => {
return animal.length < 4;
});
const fourAndMore = arr.filter((animal) => {
return animal.length >= 4;
});
The problem with this for me is that you have to go through your data twice, but it is very readable. Would there be a massive impact doing this twice if you have a rather large array?
Reduce:
const threeFourArr = arr.reduce((animArr, animal) => {
if (animal.length < 4) {
return [[...animArr[0], animal], animArr[1]];
} else {
return [animArr[0], [...animArr[1], animal]];
}
}, [[], []]);
Where the array's 0 index contains the array of less than four and the 1 index contains the array of more than three.
I don't like this too much, because it seems that the data structure is going to give a bit of problems, seeing that it is an array of arrays. I've thought about building an object with the reduce, but I can't imagine that it would be better than the array within an array solution.
I've managed to look at similar questions online as well as Stack Overflow, but many of these break the idea of immutability by using push() or they have very unreadable implementations, which in my opinion breaks the expressiveness of functional programming.
Are there any other ways of doing this? (functional of course)
collateBy
I just shared a similar answer here
I like this solution better because it abstracts away the collation but allows you to control how items are collated using a higher-order function.
Notice how we don't say anything about animal.length or < 4 or animals[0].push inside collateBy. This procedure has no knowledge of the kind of data you might be collating.
// generic collation procedure
const collateBy = f => g => xs => {
return xs.reduce((m,x) => {
let v = f(x)
return m.set(v, g(m.get(v), x))
}, new Map())
}
// custom collator
const collateByStrLen4 =
// collate by length > 4 using array concatenation for like elements
// note i'm using `[]` as the "seed" value for the empty collation
collateBy (x=> x.length > 4) ((a=[],b)=> [...a,b])
// sample data
const arr = ['horse','elephant','dog','crocodile','cat']
// get collation
let collation = collateByStrLen4 (arr)
// output specific collation keys
console.log('greater than 4', collation.get(true))
console.log('not greater than 4', collation.get(false))
// output entire collation
console.log('all entries', Array.from(collation.entries()))
Check out that other answer I posted to see other usage varieties. It's a pretty handy procedure.
bifilter
This is another solution that captures both out outputs of a filter function, instead of throwing away filtered values like Array.prototype.filter does.
This is basically what your reduce implementation does but it is abstracted into a generic, parameterized procedure. It does not use Array.prototype.push but in the body of a closure, localized mutation is generally accepted as OK.
const bifilter = (f,xs) => {
return xs.reduce(([T,F], x, i, arr)=> {
if (f(x, i, arr) === false)
return [T, [...F,x]]
else
return [[...T,x] ,F]
}, [[],[]])
}
const arr = ['horse','elephant','dog','crocodile','cat']
let [truthy,falsy] = bifilter(x=> x.length > 4, arr)
console.log('greater than 4', truthy)
console.log('not greater than 4', falsy)
Though it might be a little more straightforward, it's not nearly as powerful as collateBy. Either way, pick whichever one you like, adapt it to meet your needs if necessary, and have fun !
If this is your own app, go nuts and add it to Array.prototype
// attach to Array.prototype if this is your own app
// do NOT do this if this is part of a lib that others will inherit
Array.prototype.bifilter = function(f) {
return bifilter(f,this)
}
The function you are trying to build is usually known as partition and can be found under that name in many libraries, such as underscore.js. (As far as I know its not a builtin method)
var threeFourArr = _.partition(animals, function(x){ return x.length < 4 });
I don't like this too much, because it seems that the data structure is going to give a bit of problems, seeing that it is an array of arrays
Well, that is the only way to have a function in Javascript that returns two different values. It looks a bit better if you can use destructuring assignment (an ES6 feature):
var [smalls, bigs] = _.partition(animals, function(x){ return x.length < 4 });
Look at it as returning a pair of arrays instead of returning an array of arrays. "Array of arrays" suggests that you may have a variable number of arrays.
I've managed to look at similar questions online as well as Stack Overflow, but many of these break the idea of immutability by using push() or they have very unreadable implementations, which in my opinion breaks the expressiveness of functional programming.
Mutability is not a problem if you localize it inside a single function. From the outside its just as immutable as before and sometimes using some mutability will be more idiomatic than trying to do everything in a purely functional manner. If I had to code a partition function from scratch I would write something along these lines:
function partition(xs, pred){
var trues = [];
var falses = [];
xs.forEach(function(x){
if(pred(x)){
trues.push(x);
}else{
falses.push(x);
}
});
return [trues, falses];
}
A shorter .reduce() version would be:
const split = arr.reduce((animArr, animal) => {
animArr[animal.length < 4 ? 0 : 1].push(animal);
return animArr
}, [ [], [] ]);
Which might be combined with destructuring:
const [ lessThanFour, fourAndMore ] = arr.reduce(...)
If you are not opposed to using underscore there is a neat little function called groupBy that does exactly what you are looking for:
const arr = ['horse', 'elephant', 'dog', 'crocodile', 'cat'];
var results = _.groupBy(arr, function(cur) {
return cur.length > 4;
});
const greaterThanFour = results.true;
const lessThanFour = results.false;
console.log(greaterThanFour); // ["horse", "elephant", "crocodile"]
console.log(lessThanFour); // ["dog", "cat"]
Kudos for the beautiful response of the user Thank you, here an alternative using a recursion,
const arr = ['horse', 'elephant', 'dog', 'crocodile', 'cat'];
const splitBy = predicate => {
return x = (input, a, b) => {
if (input.length > 0) {
const value = input[0];
const [z, y] = predicate(value) ? [[...a, value], b] : [a, [...b, value]];
return x(input.slice(1), z, y);
} else {
return [a, b];
}
}
}
const splitAt4 = splitBy(x => x.length < 4);
const [lessThan4, fourAndMore ] = splitAt4(arr, [], []);
console.log(lessThan4, fourAndMore);
I don't think there could be another solution than returning an array of arrays or an object containing arrays. How else is a javascript function return multiple arrays after splitting them?
Write a function containing your push logic for readability.
var myArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var x = split(myArr, v => (v <= 5));
console.log(x);
function split(array, tester) {
const result = [
[],
[]
];
array.forEach((v, i, a) => {
if (tester(v, i, a)) result[0].push(v);
else result[1].push(v);
});
return result;
}
Sorry if this is a dupplicate, can't seem to find it.
var a = [1,2,3,4];
a.forEach(function(value){
if(value == 1) a.push(5);
console.log(value);
});
I wonder if there is a way (any sort of loop or datatype) so that this will ouput 1 2 3 4 5 during the loop (or in any order, as long as all the 5 numbers are in there)
Using Array.prototype.forEach() will not apply the callback to elements that are appended to, or removed from, the array during execution. From the specification:
The range of elements processed by forEach is set before the first
call to callbackfn. Elements which are appended to the array after the
call to forEach begins will not be visited by callbackfn.
You can, however, use a standard for loop with the conditional checking the current length of the array during each iteration:
for (var i = 0; i < a.length; i++) {
if (a[i] == 1) a.push(5);
console.log(a[i]);
}
Obvious solution :
var a = [1,2,3,4];
for (var i=0; i<a.length; i++){
var value = a[i];
if(value == 1) a.push(5);
console.log(value);
}
Since you appear to use Harmony, how about a generator like this:
function *iter(array) {
for (var n = 0; n < array.length; n++)
yield array[n];
}
and then
var a = [1,2,3,4];
for(var p of iter(a)) {
if(p == 1) a.push(5)
console.log(p)
}
prints 1 2 3 4 5
If you need a method that uses a callback as apposed to the for loop reduce will work.
var a = [1,2,3,4];
var result = a.reduce(function(total, item) {
total.push(item);
if (item === 4) total.push(5);
return total;
}, []);
console.log(result);
Better Alternate solution:
if (a.indexOf(1) >= 0) a.push(5);
a.forEach( ... );
OK, maybe not strictly better, since it traverses the array twice. However you ought to consider why you're trying to modify the array whilst iterating over it in the first place. It's an unusual situation.
SO this is a quick test that seems to work well :
var a = [1,2,3,4,5];
a.forEach (function (val,index,array) {
if (val == 5) {
array.push (6);
};
console.log (val);
});
a.forEach(function fn(item, index) {
if (item == 5) {
array.push (6);
};
})
var a = [1,2,3,4];
Object.keys(a).forEach(idx => {
if(a[idx]==1) a.push(5);
console.log(a[idx]);
});
OP here. I've since learned that ES6 Sets do include items added during forEach.
So if you can use a set instead of an array, you can do:
var a = new Set([1,2,3,4]);
a.forEach(function(value){
if(value == 1) a.add(5);
console.log(value);
});
which does indeed log 5 as well.
Just an alternative to the for loop. Of course Sets are different than arrays in several ways, so you'd need to understand the differences and how it effects your other code.
I would like to split a string into fixed-length (N, for example) pieces. Of course, last piece could be shorter, if original string's length is not multiple of N.
I need the fastest method to do it, but also the simplest to write. The way I have been doing it until now is the following:
var a = 'aaaabbbbccccee';
var b = [];
for(var i = 4; i < a.length; i += 4){ // length 4, for example
b.push(a.slice(i-4, i));
}
b.push(a.slice(a.length - (4 - a.length % 4))); // last fragment
I think there must be a better way to do what I want. But I don't want extra modules or libraries, just simple JavaScript if it's possible.
Before ask, I have seen some solutions to resolve this problem using other languages, but they are not designed with JavaScript in mind.
You can try this:
var a = 'aaaabbbbccccee';
var b = a.match(/(.{1,4})/g);
See this related question: https://stackoverflow.com/a/10456644/711085 and https://stackoverflow.com/a/8495740/711085 (See performance test in comments if performance is an issue.)
First (slower) link:
[].concat.apply([],
a.split('').map(function(x,i){ return i%4 ? [] : a.slice(i,i+4) })
)
As a string prototype:
String.prototype.chunk = function(size) {
return [].concat.apply([],
this.split('').map(function(x,i){ return i%size ? [] : this.slice(i,i+size) }, this)
)
}
Demo:
> '123412341234123412'.chunk(4)
["1234", "1234", "1234", "1234", "12"]
function stringToChanks(string, chunkSize) {
const chunks = [];
while (string.length > 0) {
chunks.push(string.substring(0, chunkSize));
string = string.substring(chunkSize, string.length);
}
return chunks
}