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

  • 使用三元操作符代替 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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券