JavaScript: Упростите формулу, чтобы избежать операторов if

Question

Я думаю, что есть способ написать этот код более хорошим способом с помощью однострочной формулы, в которой не используются операторы if, так что X (0 -> 0,5 -> 1) Y должно быть (0 -> 1 -)> 0).

var h = 200;
var w = 200;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');


for(var i = 0; i < w; i++){
   var x = i/w;
   var y;
   
   if(x < 0.5){
    y = 1 - x * 2;
   } else {
    y = (x - 0.5) * 2;
   }
   
   drawPoint(x, y);
}

function drawPoint(x, y){
  ctx.fillRect(x * w, y * h, 1, 1);
}

<canvas id="canvas" width="200px" height="200px" style="position: absolute; width: 200px; height: 200px; background-color: #aaa;"></canvas>

Answer 1

Одним из вариантов будет использование троичного оператора . Это позволило бы вам упростить условную логику до одной строки, как показано ниже:

const h = 200;
const w = 200;
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');

for(var i = 0; i < w; i++){
   const x = i/w;

   // Use ternary operator, and apply factor to ternary result
   const y = ((x < 0.5) ? (1 - x) : (x - 0.5)) * 2;

   drawPoint(x, y);
}

function drawPoint(x, y){
  ctx.fillRect(x * w, y * h, 1, 1);
}

Обратите внимание, что это технически все еще "если-как" утверждение под капотом - тем не менее, оно позволяет вам выразитьЭквивалентная логика для вашего исходного кода в одной строке.

Если вы действительно хотели бы избежать выражения «если-как», вы можете использовать следующий метод числовой интерполяции, чтобы достичь того, что вам нужно:

for(var i = 0; i < w; i++){
   const x = i/w;

   const c = Math.round(x); // Returns 0 if x < 0.5 otherwise 1
   const y = (((1 - c) * (1 - x)) + (c * (x - 0.5))) * 2;

   drawPoint(x, y);
}

Однако я бы предпочел избегать такого подхода, поскольку, на первый взгляд, не совсем понятно, что происходит.