How could I rename an item in a simple array in Angular-CodePudding

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.

CodePudding user response：

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);

CodePudding user response：

Your code just needs a minor correction:

 if (this.myArray[k] == "valueC")

CodePudding user response：

Try this:

const myArray = ['valueA', 'valueB', 'valueC'];
for (const k in myArray) {
  if (myArray[k] == "valueC") {
    myArray[k] = "valueZ";
  }
} 
console.log(myArray);

CodePudding user response：

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

CodePudding user response：

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