JavaScript 通过简写增加代码可读性

Unsplash

• 使用三元操作符代替 if else 语句

const x = 20;
let answer;
if (x > 10) {
    answer = 'Love';
} else {
    answer = 'Peace';
}

// 简写
const answer = x > 10 ? 'Love' : 'Peace';

• 使用 switch 或对象代替 if else if 语句

if(a == 1) {
    console.log('Love')
}else if(a == 2) {
    console.log('Peace')
}else {
    console.log('Nian糕')
}

// 简写
switch(a) {
    case 1:
        console.log('Love')
    case 2:
        console.log('Peace')
    default:
        console.log('Nian糕')
}

// 简写
let handler = {
    1: () => {
        console.log('Love')
    },
    2: () => {
        console.log('Peace')
    },
    default: () => {
        console.log('Nian糕')
    }
}
handler[a]() || handler['default']()

• 将变量值分配给另一个变量时，确保源变量不为 null, undefined, 0 或空值，使用短路求值来代替一个多重条件的if语句

if (variable1 !== null || variable1 !== undefined || variable1 !== '' || variable !== 0) {
     let variable2 = variable1;
}

// 简写
`const variable2 = variable1 || 'Love';`

• 声明变量简写方法

let a;
let b;
let c = 3;

// 简写
let a, b, c =3;

• 在 ES6 中，如果对象的 value 名称与 key 名称相同，则可以使用简写表示法

const obj = {
  a:a,
  b:b
}

// 简写
const obj = {
  a,
  b
}

• 除了属性可以简写外，方法也可以简写

const o = {
  method: function() {
    return "Love";
  }
}

// 简写
const o = {
  method() {
    return "Love";
  }
}

• 箭头函数代替传统函数

function sayHello(name) {
  console.log('Love', name);
}

setTimeout(function() {
  console.log('Peace')
}, 2000)

list.forEach(function(item) {
  console.log(item);
})

// 简写
sayHello = name => console.log('Love', name)
setTimeout(() => console.log('Peace'), 2000)
list.forEach(item => console.log(item))

• 使用 ES6 来指定参数默认值来代替函数中传递参数的默认值的 if 语句

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

// 简写
volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) // 24

• 使用模板字符串来连接字符串

const welcome = 'You have logged in as ' + first + ' ' + last + '.'

// 简写
const welcome = `You have logged in as ${first} ${last}`;

• 使用函数式编程代替 for 循环

for (var i = 1; i <= 10; i++) {
    a[i] = a[i] + 1;
}

// 简写
let b = a.map(item => ++item)

参考资料
19+ JavaScript Shorthand Coding Techniques

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^