首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 通过简写增加代码可读性

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

作者头像
Nian糕
修改2024-03-19 16:28:32
6650
修改2024-03-19 16:28:32
举报
Unsplash
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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.02.20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档