JS 스크립트에서 if 문을 너무 많이 사용하지 마세요. 다음은 if를 대체하는 6가지 방법입니다.

추천 튜토리얼: "JavaScript Video Tutorial"

최근 코드를 리팩토링할 때 초기 코드에서 이전에 본 적이 없을 정도로 if 문을 너무 많이 사용하는 것을 발견했습니다. . 그렇기 때문에 if 문을 너무 많이 사용하지 않는 데 도움이 되는 간단한 팁을 공유하는 것이 중요하다고 생각합니다. if 语句，其程度是我从未见过的。这就是为什么我认为分享这些简单的技巧是非常重要的，这些技巧可以帮助我们避免过多的使用 if 语句。

接下来会介绍6种方式来代替 if 的使用，这样做不是坚决不使用 if 偏执狂，而是换个方式思考我们的编码思路。

1. 三元运算符

事例1

带有IF的代码：

function saveCustomer(customer) {
  if (isCustomerValid(customer)) {
    database.save(customer)
  } else {
    alert('customer is invalid')
  }
}

重构后代码：

function saveCustomer(customer) {
  return isCustomerValid(customer)
    ? database.save(customer)
    : alert('customer is invalid')
}

使用 ES6

const saveCustomer = customer =>
   isCustomerValid(customer)?
     database.save(customer) : alert('customer is invalid')

事例2

带有IF的代码：

function customerValidation(customer) {
  if (!customer.email) {
    return error('email is require')
  } else if (!customer.login) {
    return error('login is required')
  } else if (!customer.name) {
    return error('name is required')
  } else {
    return customer
  }
}

重构后代码：

const customerValidation = customer =>
  !customer.email   ? error('email is required')
  : !customer.login ? error('login is required')
  : !customer.name  ? error('name is required')
                    : customer

事例3

带有IF的代码：

function getEventTarget(evt) {
    if (!evt) {
        evt = window.event;
    }
    if (!evt) {
        return;
    }
    const target;
    if (evt.target) {
        target = evt.target;
    } else {
        target = evt.srcElement;
    }
    return target;
}

重构后代码：

function getEventTarget(evt) {
  evt = evt || window.event;
  return evt && (evt.target || evt.srcElement);
}

2.短路运算符

事例1

带有IF的代码：

const isOnline = true;
const makeReservation= ()=>{};
const user = {
    name:'Damian',
    age:32,
    dni:33295000
};

if (isOnline){
    makeReservation(user);
}

重构后代码：

const isOnline = true;
const makeReservation= ()=>{};
const user = {
    name:'Damian',
    age:32,
    dni:33295000
};

isOnline&&makeReservation(user);

事例2

带有IF的代码：

const active = true;
const loan = {
    uuid:123456,
    ammount:10,
    requestedBy:'rick'
};

const sendMoney = ()=>{};

if (active&&loan){
    sendMoney();
}

重构后代码：

const active = true;
const loan = {
    uuid:123456,
    ammount:10,
    requestedBy:'rick'
};

const sendMoney = ()=>{};

active && loan && sendMoney();

3.函数委托:

事例1

带有IF的代码：

function itemDropped(item, location) {
    if (!item) {
        return false;
    } else if (outOfBounds(location) {
        var error = outOfBounds;
        server.notify(item, error);
        items.resetAll();
        return false;
    } else {
        animateCanvas();
        server.notify(item, location);
        return true;
    }
}

重构后代码：

function itemDropped(item, location) {
    const dropOut = function() {
        server.notify(item, outOfBounds);
        items.resetAll();
        return false;
    }

    const dropIn = function() {
        server.notify(item, location);
        animateCanvas();
        return true;
    }

    return !!item && (outOfBounds(location) ? dropOut() : dropIn());
}

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。

我和阿里云合作服务器，折扣价比较便宜：89/年，223/3年，比学生9.9每月还便宜，买了搭建个项目，熟悉技术栈比较香（老用户用家人账号买就好了，我用我妈的)推荐买三年的划算点，点击本条就可以查看。

4.非分支策略

此技巧尝试避免使用switch语句，相反是用键/值创建一个映射并使用一个函数访问作为参数传递的键的值。

事例1

带有switch

다음으로 if 사용을 대체하는 6 방법을 소개하겠습니다. 방식을 바꾸다 우리의 코딩 아이디어에 대해 생각해 보세요.

1. 삼항 연산자

사례 1

IF가 포함된 코드:

switch(breed){
    case 'border':
      return 'Border Collies are good boys and girls.';
      break;  
    case 'pitbull':
      return 'Pit Bulls are good boys and girls.';
      break;  
    case 'german':
      return 'German Shepherds are good boys and girls.';
      break;
    default:
      return 'Im default'
}

리팩터링된 코드:

const dogSwitch = (breed) =>({
  "border": "Border Collies are good boys and girls.",
  "pitbull": "Pit Bulls are good boys and girls.",
  "german": "German Shepherds are good boys and girls.",  
})[breed]||'Im the default';


dogSwitch("border xxx")

ES6 사용

const calc = {
    run: function(op, n1, n2) {
        const result;
        if (op == "add") {
            result = n1 + n2;
        } else if (op == "sub" ) {
            result = n1 - n2;
        } else if (op == "mult" ) {
            result = n1 * n2;
        } else if (op == "p" ) {
            result = n1 / n2;
        }
        return result;
    }
}

calc.run("sub", 5, 3); //2

사례 2

IF 코드 포함:

const calc = {
    add : function(a,b) {
        return a + b;
    },
    sub : function(a,b) {
        return a - b;
    },
    mult : function(a,b) {
        return a * b;
    },
    p : function(a,b) {
        return a / b;
    },
    run: function(fn, a, b) {
        return fn && fn(a,b);
    }
}

calc.run(calc.mult, 7, 4); //28

리팩터링됨 코드:

const bob = {
  name:'Bob',
  salary:1000,
  job_type:'DEVELOPER'
};

const mary = {
  name:'Mary',
  salary:1000,
  job_type:'QA'
};

const calc = (person) =>{

    if (people.job_type==='DEVELOPER')
        return person.salary+9000*0.10;

    if (people.job_type==='QA')
        return person.salary+1000*0.60;
}

console.log('Salary',calc(bob));
console.log('Salary',calc(mary));

사례 3

IF가 포함된 코드:

const qaSalary  = (base) => base+9000*0.10;
const devSalary = (base) => base+1000*0.60;

//Add function to the object.
const bob = {
  name:'Bob',
  salary:1000,
  job_type:'DEVELOPER',
  calc: devSalary
};

const mary = {
  name:'Mary',
  salary:1000,
  job_type:'QA',
  calc: qaSalary
};

console.log('Salary',bob.calc(bob.salary));
console.log('Salary',mary.calc(mary.salary));

리팩터링된 코드:

rrreee

2. 단락 연산자

🎜🎜🎜🎜 I가 포함된 코드 F:🎜rrreee🎜리팩터링됨 코드:🎜rrreee🎜🎜사례 2🎜🎜🎜IF가 포함된 코드:🎜rrreee🎜리팩터링된 코드:🎜rrreee🎜🎜🎜3. 함수 커미션: 🎜🎜🎜🎜🎜IF가 포함된 코드: 🎜rrreee🎜리팩터링된 코드 : 🎜rrreee🎜다들 이력서에 쓸 프로젝트가 없다고 해서 프로젝트 찾는 걸 도와주고, [빌딩 튜토리얼]도 줬어요. 🎜🎜서버에서 Alibaba Cloud와 협력하고 있으며 할인된 가격은 상대적으로 저렴합니다. 89/년, 223/3년으로 학생용 월 9.9보다 저렴합니다. 프로젝트를 구축하기 위해 구입했는데 더 많습니다. 기술 스택에 익숙해지면 편안합니다. (오래된 사용자는 가족을 통해 구매할 수 있습니다.) 좋습니다. 엄마가 추천한 최고의 거래를 3년 동안 활용하겠습니다. 🎜🎜🎜🎜4. 비분기 전략 🎜🎜🎜🎜이 트릭은 switch 문을 사용하지 않고 대신 키/값이 있는 맵을 생성하고 키 값에 액세스하는 함수를 사용합니다. 매개변수로 전달됩니다. 🎜🎜🎜사례 1🎜🎜🎜 스위치가 포함된 코드: 🎜rrreee🎜리팩터링된 코드: 🎜rrreee🎜🎜🎜5 데이터로서의 함수 🎜🎜🎜🎜우리는 JS의 함수가 첫 번째 클래스라는 것을 알고 있습니다. 그래서 이를 사용하여 코드를 함수 객체로 분할할 수 있습니다. 🎜🎜IF가 포함된 코드: 🎜rrreee🎜리팩터링된 코드: 🎜rrreee🎜🎜🎜 6. 다형성 🎜🎜🎜🎜다형성은 객체가 여러 형태를 가질 수 있는 능력입니다. OOP에서 다형성의 가장 일반적인 용도는 부모 클래스 참조를 사용하여 자식 클래스 객체를 참조하는 것입니다. 🎜🎜IF가 포함된 코드: 🎜rrreee🎜리팩터링된 코드: 🎜rrreee🎜🎜원본 텍스트: https://dev.to/damxipo/avoid-use-if-on-our-js-scripts-1b95🎜🎜저자: Damian Ciplat 🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 코스🎜를 방문하세요! ! 🎜

위 내용은 JS 스크립트에서 if 문을 너무 많이 사용하지 마세요. 다음은 if를 대체하는 6가지 방법입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!