使条件函数更有效

Question

I want to make a function that modifies a variable based on the given argument.

The function checks a variable and the number in that string. Then via the argument, I specify either increase or decrease the number by 1 (++1).

There is an array as well, that if the number is equal to the length of the array, then it turns to 1 and if the number is less than 1 then it is equal the size of the array. This is to make sure the number of the string does not get less than 1 or more than the length of the array.

the string with the number is Music1 . So the circle would be like: ...., Music1, Music2, Music3, Music4, Music1, Music2, Music3, ....

 var MyArray = ["Music1", "Music2", "Music3", "Music4"]; var currentMusic = "Music1"; $(".increase").on('click tap', nextMusic); $(".decrease").on('click tap', previousMusic); function nextMusic() { unaryChange('plus') } function previousMusic() { unaryChange('minus') } function unaryChange(operation) { if (currentMusic === "Music4") { currentMusic = "Music1" } else if (currentMusic === "Music0") { currentMusic = "Music4" } if (operation === "plus") { currentMusic = currentMusic.replace(/\\d+$/, function(n) { return ++n }); } else { currentMusic = currentMusic.replace(/\\d+$/, function(n) { return --n }); } console.log(currentMusic); $(".text").text(currentMusic); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="increase">increase</button> <button class="decrease">decrease</button> <p class="text">value</p> 

The above method almost does the job, however I am looking for an easier and more professional solution. It does not look efficient. For example, there must be a better way to specify the argument operation instead of a string like plus , or the conditions.

I need this function to be rewritten in a better way, more professionally and works as described.

Thanks in advance.

Answer 1

It is better to work with array index instead of the values

function unaryChange(operation) {
  var currentIndex = MyArray.findIndex(function(item) {
    return item === currentMusic;
  });

  if(operation === 'plus') {
    newIndex = currentIndex < MyArray.length - 1 && currentIndex + 1 || 0;
  } else {
    newIndex = currentIndex > 0 ? currentIndex -1 : MyArray.length -1;
  }

  currentMusic = MyArray[newIndex]
  $(".text").text(currentMusic);
}

In this case whatever the size of the array it will work.

A working example https://jsbin.com/rahomorupa/4/edit?html,js,console,output

Answer 2

Building on Joe's answer I'd suggest you define constants for plus and minus as +1 and -1 respectively to simplify the increment/decrement logic, along with the modulus operator to handle the array wrap-around:

const PLUS = 1;
const MINUS = -1;

function unaryChange(operation) {
  var currentIndex = MyArray.findIndex(function(item) {
    return item === currentMusic;
  });

  // If it's invoked as unaryChange(PLUS) or unaryChange(MINUS)
  // we don't need any conditional logic to handle the increment,
  // and with the % operator we don't need additional bounds overflow
  // logic. (This latter bit is complicated somewhat by the need to
  // handle a minus step from index 0.)
  const {length} = MyArray;
  const newIndex = ((currentIndex + operation) % length + length) % length;

  currentMusic = MyArray[newIndex]
  $(".text").text(currentMusic);
}

The % operator returns the remainder of a division, which conveniently loops back around to 0 when used with an array index against the array length:

 const array = ['first', 'second', 'third']; for (let i = 0; i < 20; i++) { console.log(array[i % array.length]); } 

Answer 3

You can pass a Boolean for plus , use an arrow function, and a ternary operator:

 var MyArray = ["Music1", "Music2", "Music3", "Music4"]; var currentMusic = "Music1"; $(".increase").on('click tap', nextMusic); $(".decrease").on('click tap', previousMusic); function nextMusic() { unaryChange(true) } function previousMusic() { unaryChange(false) } function unaryChange(plus) { currentMusic = currentMusic == "Music4" ? "Music1" : (currentMusic == "Music0" ? "Music4" : currentMusic); currentMusic = currentMusic.replace(/\\d+$/, n => plus ? ++n : --n); console.log(currentMusic); $(".text").text(currentMusic); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="increase">increase</button> <button class="decrease">decrease</button> <p class="text">value</p> 

Answer 4

I think this is a good start. Accessing the indices of the array versus the values feels a lot cleaner. Using ternaries cleans up a lot of logic into one line as well.

 var MyArray = ["Music1", "Music2", "Music3", "Music4"]; var currentMusic = 0; $(".increase").on('click tap', unaryChange); $(".decrease").on('click tap', unaryChange); function unaryChange() { if (event.target.className === "increase") { currentMusic = (currentMusic < 3 ? currentMusic + 1 : 0) } else { currentMusic = (currentMusic > 0 ? currentMusic -= 1 : 3) } console.log(MyArray[currentMusic]); $(".text").text(MyArray[currentMusic]); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="increase">increase</button> <button class="decrease">decrease</button> <p class="text">value</p> 

Answer 5

Here's how I'd do it. Since it seems that the word Music is just a prefix used to designate a particular unit, I wont store it over and over again in a array. As for jQuery? Yeah, nah.

 "use strict"; function byId(id){return document.getElementById(id)} window.addEventListener('load', onLoaded, false); function onLoaded(evt) { let prefix = 'Music'; let count = 4, index=0; byId('increase').addEventListener('click', function(evt){index++; index %= count; update();}, false); byId('decrease').addEventListener('click', function(evt){index--; if (index<0) index=count-1; update();}, false); function update() { byId('status').textContent = `${prefix}${index+1}`; } } 

 <span id='status'>Music1</span><br> <button id='increase'>+</button><button id='decrease'>-</button> 

Answer 6

Since you have an array of music, it's better to use that instead. There's no need to operate from the text, you just need to update the array index to the next value and pass it to the function, and let it get the song name directly.

Since we want to be between the boundaries of 0 and the array length, here's what is used to do this:

• Get the next song: (currentTrackIndex + 1) % tracks.length . That will get the next index value and apply modulo to it so it will round back if it exceedes the array length.
• Get the previous song: (currentTrackIndex - 1 + tracks.length) % tracks.length . It's pretty much the same as getting the next song, save for the case when the index it's already at zero. If you apply modulo to a negative number, you will get a negative result and will mess up your array index. So instead of using a conditional clause (" if (currentTrackIndex === 0 ...) "), let's add the array length. Why? Because since 0 % n == 0 and n % n == 0 , adding the array length will not change the modulo result, while keeping your index as a positive number.

(I changed the name from MyArray to tracks and unaryChange to changeTrack , to give it better meaning clarity)

var tracks = ["Music1", "Music2", "Music3", "Music4"];

var currentTrackIndex = 0;

$(".increase").on('click tap', nextMusic);
$(".decrease").on('click tap', previousMusic);

function nextMusic() {
  //It will move to the next track. If it's over the array length, it will reset to 0
  changeTrack((currentTrackIndex + 1) % tracks.length)
}

function previousMusic() {
  //It will move to the previous song. If it's below zero, it will reset to the last track index
  changeTrack((currentTrackIndex + tracks.length - 1) % tracks.length)
}

function changeTrack(newTrackIndex) {
  currentTrackIndex = newTrackIndex;
  var currentTrack = tracks[currentTrackIndex];
  console.log(currentTrackIndex);
  $(".text").text(currentTrack);
}