알아두면 유용한 몇 가지 실용적인 JavaScript 최적화 팁

직장에서 우리는 종종 작은 세부 사항을 통해 코드의 가독성을 높이고 코드를 더욱 우아하게 보이게 할 수 있습니다. 이 글은 여러분이 한눈에 이해할 수 있는 몇 가지 실용적인 JavaScript 최적화 팁을 여러분과 공유할 것입니다. 여러분에게 도움이 되기를 바랍니다!

「난이도:?」 「권장 독서 시간: 5분」min」

正片

减少if...else面条代码

• 一旦当我们写到超过两个if...else的函数的时候就该想想是否有更好的优化方法。【相关推荐：javascript学习教程】
• 比如现在需要让我们根据名称计算出麦某劳的食品价格，你可能会这么做。

• 这样的写法会让函数体有很多的条件判断语句，而当我们想下次增加一个商品的时候就需要修改函数内的逻辑增加一个if...else语句，这一定程度上也违反了开闭原则,当我们需要增加一个逻辑的时候要尽量通过扩展软件实体来解决需求变化，而不是通过修改已有的代码来完成变化。
• 这是很经典的优化方式，我们可以使用一个类似Map机构的数据来保存所有商品，这里我们直接建立一个对象来存储。

• 这样我们下次需要再增加一个商品时就不需要改动getPrice的逻辑了，当然了这里其实更多人喜欢直接在用的地方直接使用foodMap，我这里只是简单举了个例子表述这个思路。
• 那么这时候就有同学会问了，如果我不想key只用字符串呢，这时候你就可以用到new Map了，思路也是差不多的，额外扩展一个实体来存储变化。

管道操作取代冗余循环

• 有这么一个麦某劳食物列表

• 如果你想找出属于套餐1的食物，你会怎么找呢？
• 上面这种是我们以前经常使用的方法，显然我们替换成使用filter与map来取代for循环不仅可以使代码更精简，还可以使语义更加明确，这样我们一下就可以看出是先对数组过滤再重组。

find取代冗余循环

• 还是上面的例子，如果我们要在这个食品对象数组中按照属性值查找特定的食物时，find的用处就出来了。

includes取代冗余循环

• 和上面两个细节类似的这些都是既有的函数也就是不用我们重新写的内置函数，巧用它会节省很多时间。
• 众所周知，一碗康某傅老坛酸菜牛肉面有酸菜，面，牛肉粒，烟头和脚皮组成，那我们想用函数证实这个面里面是否有脚皮我们怎么写会比较简洁呢？

• 同样的，不止是康某傅的酸菜牛肉面可以这样耍，所有类似的在数组里面找到特定元素的操作都可以使用includes函数来调用。

result返回值

• 我们通常在写一些拥有返回值的函数的时候常常会以返回值变量命名而纠结，甚至对于一些长函数的时候还不使用变量而是直接return，这样的习惯其实是不好的，因为等我们下次再去参照这段代码的时候还需要重新捋清逻辑。
• 通常的，在一个小函数中，我们可以使用result

추천 영화

if...else 누들 코드 줄이기

• if...else를 2개 이상 작성하면 함수를 사용하는 경우 더 나은 최적화 방법이 있는지 생각해 봐야 합니다. [관련 권장사항: 자바스크립트 학습 튜토리얼]🎜
• 예를 들어, 이제 우리는 이름을 기준으로 Mai Lao의 식품 가격을 계산해야 합니다. 🎜🎜🎜🎜
• 이렇게 작성하면 함수 본문에 조건부 판단문이 많이 들어가게 되고, 다음에 제품을 추가하고 싶을 때에는 함수의 로직을 수정하고 if를 추가해야 합니다. ..else 문은 🎜열기 및 닫기 원칙🎜을 어느 정도 위반합니다. 논리를 추가해야 하는 경우 요구사항 변경을 해결하기 위해 최선을 다해 소프트웨어 엔터티를 확장해야 합니다. 기존 코드를 수정하여 변경을 완료합니다. 🎜
• 이것은 Map과 유사한 데이터 구조를 사용하여 모든 제품을 저장할 수 있는 매우 고전적인 최적화 방법입니다. 🎜🎜🎜🎜
• 이렇게 하면 다음에 다른 제품을 추가해야 할 때 getPrice의 논리를 변경할 필요가 없습니다. 물론 여기에서는 foodMap을 사용하는 것을 더 좋아하는 사람들이 더 많습니다. 에서 직접적으로 이 아이디어를 표현하기 위해 간단한 예를 들었습니다. 🎜
• 그러면 이때 어떤 반 친구들이 키에 문자열만 사용하고 싶지 않다면 어떻게 해야 하느냐고 물을 것입니다. 그러면 new Map을 사용할 수 있습니다. 거의 동일하며 변경 사항을 저장하기 위해 추가 엔터티가 확장되었습니다. 🎜🎜

  🎜파이프라인 작업이 중복 루프를 대체합니다🎜

  • Mai Moulau 음식 목록이 있습니다🎜🎜🎜🎜
    • 찾고 싶다면 out 세트 1에 속한 음식을 어떻게 찾나요? 🎜
    • 위 내용은 이전에 자주 사용했던 방법인데, for 루프를 filter 및 map로 대체하면 분명히 알 수 있습니다. , 코드를 더 간소화하면 의미도 더 명확해질 수 있으므로 배열이 먼저 필터링된 다음 재구성되는 것을 한 눈에 볼 수 있습니다. 🎜🎜🎜🎜🎜find는 중복 루프를 대체합니다🎜
      • 이 음식 배열의 속성 값에 따라 특정 음식을 찾으려면 위의 예를 그대로 사용하세요. 개체를 사용하면 find의 유용성이 나옵니다. 🎜🎜🎜🎜🎜include redundant loops🎜
        • 위의 두 가지 사항과 유사하게 기존 함수, 즉 필요하지 않은 내장 함수입니다. 함수를 현명하게 사용하면 많은 시간을 절약할 수 있습니다. 🎜
        • 우리 모두 알다시피 🎜캉푸라오탄 사우어크라우트 우육면🎜 한 그릇에는 🎜사우어크라우트🎜, 🎜국수🎜, 🎜소고기큐브🎜, 🎜담배꽁초🎜, 🎜발피부🎜가 들어있습니다. 이 국수를 확인하는 기능을 사용하세요. 안쪽에 발 피부가 있는지 어떻게 더 간결하게 쓸 수 있나요? 🎜🎜🎜🎜
        • 마찬가지로 🎜강푸의 양배추 우육면🎜을 이렇게 플레이할 수 있을 뿐만 아니라, 배열에서 특정 요소를 찾는 유사한 모든 연산을 includes 함수를 사용하여 호출할 수 있습니다. 🎜🎜

          🎜결과 반환 값🎜

          • 반환 값이 포함된 일부 함수를 작성할 때 반환 값 변수의 이름을 지정하는 데 종종 어려움을 겪습니다. 일부 긴 함수, 변수는 사용되지 않고 직접 return됩니다. 이 습관은 다음에 이 코드를 참조할 때 다시 작성해야 하기 때문에 실제로 좋지 않습니다. 🎜
          • 일반적으로 작은 함수에서는 result를 반환 값으로 사용할 수 있습니다. 🎜🎜🎜🎜🎜

            조기 반환

            • 그러나 위의 반환 값으로 result를 사용하는 것이 모든 상황에 적용되는 것은 아닙니다. 후속 동료가 중복된 프로그램을 읽지 않도록 함수 본문을 일찍 종료해야 할 때도 있습니다. result作为返回值并不适用于所有情况，往往有些时候我们需要提前结束函数体来避免后面的同事阅读多余的程序。

            • 如下的例子中当我们selectedKey不存在的时候应该立即return，这样就不用继续阅读下面的代码，否则面对更复杂的函数时会增加很多的阅读成本。

            

            保持对象完整

            • 经常在我们通过请求拿到后端返回的数据会根据其中一些属性进行处理，如果需要处理的属性少的时候很多同学会习惯使用第一种方法。
            • 但其实这种习惯是不好的，因为当你无法确定这个函数以后还需不需要增加依赖属性的时候应该保持对象的完整，就像我上篇文章提到的，学会拥抱变化，假如getDocDetail不止要用到icon和content,可能以后还会有title，date等属性，所以我们不如直接将完整对象传入，不仅增加缩短参数列表还会让代码更易读。

            

            巧用运算符

            • 当我们需要创建新变量时, 有时需要检查为其值引用的变量是否为null

            다음 예에서 selectedKey가 존재하지 않으면 즉시 반환해야 다음 코드를 계속 읽을 필요가 없습니다. 우리는 더 복잡한 기능에 직면하게 될 것입니다. 그러면 독서 비용이 많이 증가할 것입니다.

            

            • 객체를 그대로 유지하세요

            요청을 통해 백엔드에서 반환된 데이터를 받을 때 일부 속성에 따라 처리되는 경우가 많습니다. 처리해야 하는 속성이 많기 때문에 많은 학생들은 첫 번째 방법을 사용하는 데 익숙해질 것입니다.

            그러나 사실 이 습관은 좋지 않습니다. 왜냐하면 나중에 함수에 종속성 속성을 추가해야 하는지 확신할 수 없으면 객체를 그대로 유지해야 하기 때문입니다. 지난 글에서 언급했듯이 🎜변화를 수용하는 법을 배우세요🎜. , getDocDetail이 icon 및 content를 사용할 뿐만 아니라 title 및 date도 포함할 수 있습니다. future. 및 기타 속성을 사용하므로 전체 객체를 직접 전달할 수도 있습니다. 그러면 매개변수 목록이 단축될 뿐만 아니라 코드를 더 읽기 쉽게 됩니다. 🎜🎜🎜🎜🎜연산자의 현명한 사용🎜🎜🎜🎜새로운 변수를 생성해야 할 때, 그 값이 참조하는 변수가 null인지 확인해야 할 때가 있습니다. 또는 정의되지 않은 경우 간단한 쓰기를 사용할 수 있습니다. 🎜🎜🎜🎜🎜🎜마지막에 작성🎜🎜🎜우선 이 글을 읽어주신 모든 분들께 감사드립니다. 이 글은 여기에서 공유되며 모든 사람에게 도움이 될 수 있기를 바랍니다. 🎜🎜🎜【추천 관련 동영상 튜토리얼: 🎜웹 프론트엔드🎜】🎜

위 내용은 알아두면 유용한 몇 가지 실용적인 JavaScript 최적화 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!