如何降低程式碼複雜度 ?

栏目: IOS · 发布时间: 6年前

内容简介：ECMAScript 5ECMAScript 2015

if else 與 switch case 是最基本的邏輯判斷方式，但卻也是 複雜度 的元兇，實務上善用 ECMAScript 的語言特性與 Higher Order Function，可以降低複雜度，讓程式碼可讀性更高，也更容易維護。

Version

ECMAScript 5

ECMAScript 2015

&& 與 ||

If Else

const func = product => {
  if (product === 'iPhone')
    return product;
  else
    return false;
};

console.log(func());
console.log(func('iPhone'));

若為 true 則直接回傳，否則回傳 false 。

如何降低程式碼複雜度 ?

&& Logic Operator

const func = product => product === 'iPhone' && product;

console.log(func());
console.log(func('iPhone'));

可使用 && ，若為 false 直接回傳 false ，若為 true 才會繼續執行 && 右側部分。

如何降低程式碼複雜度 ?

If Else

const func = product => {
  if (product === 'iPhone')
    return true;
  else
    return product;
};

console.log(func());
console.log(func('iPad'));
console.log(func('iPhone'));

若需求反過來，只有 false 直接回傳，否則回傳 true 。

如何降低程式碼複雜度 ? 

const func = product => product === 'iPhone' || product;

console.log(func());
console.log(func('iPad'));
console.log(func('iPhone'));

可使用 || ，若為 true 直接回傳 true ，若為 false 才會繼續執行 || 右側部分。

如何降低程式碼複雜度 ?

Array.includes()

If

const func = product => {
  if (product === 'iPhone' || product === 'iPad' || product === 'Apple Watch' || product === 'Macbook') {
    return true;
  }
};

console.log(func('Apple Watch'));

常見的需求， || 若其中一個條件成立就回傳值。

如何降低程式碼複雜度 ?

Includes()

const apples = [
  'iPhone',
  'iPad',
  'Apple Watch',
  'Macbook',
];

const func = product => apples.includes(product);

console.log(func('Apple Watch'));

Array.prototype.includes() 的原意是判斷 item 是否在 array 中，若有則回傳 true ，否則傳回 false 。

利用 includes() 這個特性，可將所有要判斷的項目改寫在 array 中，改用 includes() 判斷，不只清爽，可讀性也很高。

如何降低程式碼複雜度 ?

Guard Clause

Nested If

const apples = [
  'iPhone',
  'iPad',
  'Apple Watch',
  'Macbook',
];

const func = (product, quantity) => {
  if (product) {
    if (apples.includes(product)) {
      console.log(`${product} is Apple product`);

      if (quantity > 10) {
        console.log('big quantity');
      }
    }
  } else {
    throw new Error('No Apple product');
  }
};

func();
func('Macbook');
func('iPad', 20);

若都使用 正向判斷 ，可能會造成 nested if else 而難以維護。

如何降低程式碼複雜度 ?

Guard Clause

const apples = [
  'iPhone',
  'iPad',
  'Apple Watch',
  'Macbook',
];

const func = (product, quantity) => {
  if (!product) throw new Error('No Apple product');

  if (!apples.includes(product)) return;
  console.log(`${product} is Apple product`);

  if (quantity > 10) console.log('big quantity');
};

func();
func('Macbook');
func('iPad', 20);

可使用 Guard Clause 將反向邏輯提早 return ，讓所有 if 判斷都扁平化只有一層，這也是為什麼有些 Lint 會警告你不能寫 else ，因為使用 Guard Clause 之後，就不會再出現 else 了。

如何降低程式碼複雜度 ?

Array.every() / Array.some()

For of

const apples = [
  { name: 'iPhone', color: 'white' },
  { name: 'iPad', color: 'black' },
  { name: 'Macbook', color: 'silver' }
];

const func = color => {
  let isSame = true;

  for (let product of apples) {
    if (!isSame) break;
    isSame = product.color === color;
  }

  return isSame;
};

console.log(func('white'));

若要 全部條件 都成立，實務上我們也會將資料與條件全部先放在 array 中。

最直覺方式就是透過 for loop 判斷。

如何降低程式碼複雜度 ?

Array.every()

const apples = [
  { name: 'iPhone', color: 'white' },
  { name: 'iPad', color: 'black' },
  { name: 'Macbook', color: 'silver' }
];

const func = color => apples.every(x => x.color === color);

console.log(func('white'));

若要 全部條件 都成立，可使用 Array.prototype.every() ，則所有條件都為 true 才會回傳 true 。

如何降低程式碼複雜度 ?

Array.some()

const apples = [
  { name: 'iPhone', color: 'white' },
  { name: 'iPad', color: 'black' },
  { name: 'Macbook', color: 'silver' }
];

const func = color => apples.some(x => x.color === color);

console.log(func('white'));

若只要 有一個條件 成立即可，可使用 Array.prototype.some() 。

如何降低程式碼複雜度 ?

Default Parameter

|| Logic Operator

const func = (product, quantity) => {
  if (!product) return;

  quantity = quantity || 1;

  return `We have ${quantity} ${product}!`;
};

console.log(func());
console.log(func('iPad'));
console.log(func('iPhone', 2));

ES5 function 並沒有提供 Default Parameter，因此會透過判斷 parameter 是否為 undefined 與 || 的小技巧設定預設值。

但由於 0 、 '' 與 false 也視為 Falsy Value，若你的需求是能接受 0 、 '' 與 false ，就不能使用這種技巧

如何降低程式碼複雜度 ?

Default Parameter

const func = (product, quantity = 1) => {
  if (!product) return;

  return `We have ${quantity} ${product}!`;
};

console.log(func());
console.log(func('iPad'));
console.log(func('iPhone', 2));

ECMAScript 2015 提供了 Default Parameter 之後，語意更加清楚，也不用判斷 undefined 了。

如何降低程式碼複雜度 ?

Object Destructing

If Else

const func = product => {
  if (product && product.name)  {
    return product.name;
  } else {
    return 'unknown';
  }
};

console.log(func());
console.log(func({}));
console.log(func({ name: 'iPhone', color: 'white' }));

若 parameter 為 object，在 ES5 為避免 parameter 為 undefined 或 null ，又避免根本無 property，必須小心翼翼的判斷 object 與 property。

如何降低程式碼複雜度 ?

Object Destructing

const func = ({ name } = {}) => name || 'unknown';

console.log(func());
console.log(func({}));
console.log(func({ name: 'iPhone', color: 'white' }));

透過 ECMAScript 2015 的 Default Parameter 與 Object Destructing，可一次解決判斷 object 與 property 問題。

  • 當 parameter 為 undefined 時，會使用預設值 {}
  • 當 object 沒有 property 時， Object Destructing 拆解後為 undefined ，都是 unknown
  • 否則會正常取得 property 值

如何降低程式碼複雜度 ?

Object Literal / Map / Array

Switch Case

const func = color => {
  switch (color) {
    case 'white':
      return ['iPhone', 'iPad'];
    case 'silver':
      return ['Macbook', 'Apple Watch'];
    case 'black':
      return ['Apple TV', 'Mac Pro'];
    default:
      return [];
  }
};

console.log(func());
console.log(func('white'));

switch case 在實務上也難以避免。

如何降低程式碼複雜度 ?

Object Literal

const apples = {
  white: ['iPhone', 'iPad'],
  silver: ['Macbook', 'Apple Watch'],
  black: ['Apple TV', 'Mac Pro'],
};

const func = color => apples[color] || [];

console.log(func());
console.log(func('white'));

由於 object 本身就是 key / value，因此可以把 object 當 Dictionary 使用取代 switch case 。

Default 值就使用 || 表示。

如何降低程式碼複雜度 ?

Map

const apples = new Map()
  .set('white', ['iPhone', 'iPad'])
  .set('silver', ['Macbook', 'Apple Watch'])
  .set('black', ['Apple TV', 'Mac Pro']);

const func = color => apples.get(color) || [];

console.log(func());
console.log(func('white'));

ECMAScript 2015 提供了新的 Map ，想法類似 object。

如何降低程式碼複雜度 ?

Array

const apples = [
  {name: 'iPhone', color: 'white'},
  {name: 'iPad', color: 'white'},
  {name: 'Macbook', color: 'silver'},
  {name: 'Apple Watch', color: 'silver'},
  {name: 'Apple TV', color: 'black'},
  {name: 'Mac Pro', color: 'black'},
];

const func = color =>
  apples
    .filter(x => x.color === color)
    .map(x => x.name);

console.log(func());
console.log(func('white'));

也可以把所有條件都放進 array，改用 Array.prototype 下豐富的 method。

如何降低程式碼複雜度 ?

Conclusion

  • 並不是所有的判斷都只能用 if else 與 switch case ，透過一些 ECMAScript 的語言特性與 Higher Order Function，可以有效降低程式碼複雜度

Reference

Jecelyn Yeen , 5 Tips to Write Better Conditionals in JavaScript


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
Designing for Emotion

Designing for Emotion

Aarron Walter / Happy Cog / 2011-10-18 / USD 18.00

Make your users fall in love with your site via the precepts packed into this brief, charming book by MailChimp user experience design lead Aarron Walter. From classic psychology to case studies, high......一起来看看 《Designing for Emotion》 这本书的介绍吧!

码农工具
MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2025 码农网 粤ICP备17054400号-3