JSエレガンス（JSコード最適化のヒント）

この記事は、金の創造への道を始めるための「新人創造セレモニー」イベントに参加しました。

前に書く

卒業シーズンのもう1年で、暇なときにため息をつきます。私は若すぎてコーディングの習慣がなく、コーディングの効率に注意を払っていなかったので、ぼんやりと覚えています。インターンシップの段階今日は、プログラミングの最適化のヒントをいくつかまとめました。フロントエンドクラブに入ろうとしている若いキューティーの参考として、高齢者はそれを確認し、修正を追加することを歓迎します。

JSコード最適化のヒント

最適化の場合はシリアル

多くのビジネスでは、多くのブランチが関与することがよくあります。ブランチが多すぎる場合、if-else-ifをcode_1のような非常に醜いコードセグメントに簡単に書き込むことができます。最適化方法は何ですか？コードを見てみましょう

code-1最適化されていないコード

ロジックは非常に単純で、コードに従って対応する色を返します

// code-1
// 未优化前代码
function getColor(code){
  if(code === '200'){
    return 'blue-blue'
  }else if(code === '201'){
    return 'green-green'
  }else if(code === '202'){
    return 'red-red'
  }else{
    return 'other-other'
  }
}
console.log(getColor('200'))
复制代码

code-2はスイッチの最適化を使用します

スイッチ最適化を使用した後のコードの行数は減っていないことがわかりますが、構造は最適化されており、コードはより快適に見え、読み取りは比較的簡単であり、これは最適な選択ではありません

// code-2
// 使用 switch 优化
function getColor2(code){
  switch(code){
    case '200':
      return 'blue-blue'
      break
    case '201':
      return 'green-green'
      break
    case '202':
      return 'red-red'
      break
    default:
      return 'other-other'
      break
  }
}
console.log(getColor2('200'))
复制代码

code-3はマップ最適化を使用します

明らかに、マッピングに最適化されたコードを使用すると、コードの可読性に影響を与えることなくコードサイズが削減されます。より複雑なブランチの場合、マッピング方法には明らかな利点があり、そうすることには別の利点があります。複雑な場合、マッピングを抽出してjsonファイルとしてコードに導入することで、コードをさらに最適化し、保守を容易にすることができます。

// code-3
// 使用映射优化 
function getColor3(code){
  var colorMap = {
    '200': 'blue-blue',
    '201': 'green-green',
    '202': 'red-red',
  }
  return colorMap[code] || 'other-other'
}
console.log(getColor3('200'))
复制代码

オプションの連鎖演算子？

名前が示すように、オプションは、読み取り属性がnull（null または undefined）として参照されている場合、コード1などのエラーを引き起こさないことを意味します。reqのデータ構造を判別できない場合、タイプ、チェーン操作req.data.params.typeで取得する必要があり、リクエスト、データ、パラメータの取得に失敗するとエラーが発生するため、&&記号で1つずつ判断する必要があります。

if(req && req.data && req.data.params && req.data.params.type === '200'){}
复制代码

使用しますか？。最適化

？。を使用した後、コードの単純さとラビングの増加がわかります。！

if(req?.data?.params?.type === '200'){}
复制代码

オブジェクトをマージする

オブジェクトのマージは、ビジネスで非常に一般的なロジックであると言えます。主に2つの最適化された書き込み方法があります。

未优化代码

通过逐一赋值的方式合并，这种方式非常 ugly，随着 key 值越多，代码 ugly 的程度会急剧增加

let info = {
  name: 'yimwu',
  tel: '134xxxxx320'
}
let otherInfo = {
  name: 'yimwu',
  age: '18',
  address: 'gd'
}
info.age = otherInfo.age
info.address = otherInfo.address
console.log(info)
复制代码

通过扩展运算符优化

let info = {
  name: 'yimwu',
  tel: '134xxxxx320'
}
let otherInfo = {
  name: 'yimwu',
  age: '18',
  address: 'gd'
}
info = {...info, ...otherInfo}
console.log(info)
复制代码

通过 ES6 方法 Object.assign() 优化

let info = {
  name: 'yimwu',
  tel: '134xxxxx320'
}
let otherInfo = {
  name: 'yimwu',
  age: '18',
  address: 'gd'
}
Object.assign(info, otherInfo)
console.log(info)
复制代码

深拷贝

我们都知道对象存在引用，当我们想将一个对象的所有内容赋值给另外一个对象时，如果只是简单的用 “ = ”赋值，两个对象将共享一块内存，也就是说两个对象指向同一个内存块的引用，那么之后改变任何一个对象中的值，两个对象都会同步改变，这并不是我们想要的，因此，在对象赋值时我们需要进行深拷贝，对对象进行拷贝赋值，保证两个对象指向不同的内存块，这样才能保证对象的修改不会互相影响

未优化代码

深拷贝传统的写法需要对对象进行深度遍历，每个对象的 key 逐个赋值

function deepClone(obj) {
  if (typeof obj != 'object') return obj;
  var temp = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
          if (obj[key] && typeof obj[key] == 'object') {
              temp[key] = deepClone(obj[key])
          } else {
              temp[key] = obj[key];
          }
      }
  }
  return temp;
}
let info = {
  name: 'yimwu',
  tel: '134xxxxx320',
  address: {
    home: 'jy',
    company: 'gz'
  }
}

let infoCopy = deepClone(info)

复制代码

通过 JSON 方法优化

通过 JSON.parse 和 JSON.stringify 巧妙地将对象转化成字符串再进行解析，js 将重新赋值到新的内存块中，达到深拷贝的效果

let info = {
  name: 'yimwu',
  tel: '134xxxxx320',
  address: {
    home: 'jy',
    company: 'gz'
  }
}

let infoCopy = JSON.parse(JSON.stringify(info))
复制代码

写在最后

今天抽空就先写这么几点，后续继续补充其他相关的优化小Tip，欢迎各位评论区补充，指正！
博主接下来将持续更新好文，欢迎关注博主哟！！
如果文章对您有帮助麻烦亲点赞、收藏 + 关注和博主一起成长哟！！❤❤❤