前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 通过简写增加代码可读性

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

作者头像
Nian糕
修改2024-03-19 16:28:32
7000
修改2024-03-19 16:28:32
举报
文章被收录于专栏:JavaScript高阶应用
Unsplash
Unsplash
  • 使用三元操作符代替 if else 语句
代码语言:javascript
复制
const x = 20;
let answer;
if (x > 10) {
    answer = 'Love';
} else {
    answer = 'Peace';
}

// 简写
const answer = x > 10 ? 'Love' : 'Peace';
  • 使用 switch 或对象代替 if else if 语句
代码语言:javascript
复制
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语句
代码语言:javascript
复制
if (variable1 !== null || variable1 !== undefined || variable1 !== '' || variable !== 0) {
     let variable2 = variable1;
}

// 简写
`const variable2 = variable1 || 'Love';`
  • 声明变量简写方法
代码语言:javascript
复制
let a;
let b;
let c = 3;

// 简写
let a, b, c =3;
  • 在 ES6 中,如果对象的 value 名称与 key 名称相同,则可以使用简写表示法
代码语言:javascript
复制
const obj = {
  a:a,
  b:b
}

// 简写
const obj = {
  a,
  b
}
  • 除了属性可以简写外,方法也可以简写
代码语言:javascript
复制
const o = {
  method: function() {
    return "Love";
  }
}

// 简写
const o = {
  method() {
    return "Love";
  }
}
  • 箭头函数代替传统函数
代码语言:javascript
复制
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 语句
代码语言:javascript
复制
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
  • 使用模板字符串来连接字符串
代码语言:javascript
复制
const welcome = 'You have logged in as ' + first + ' ' + last + '.'

// 简写
const welcome = `You have logged in as ${first} ${last}`;
  • 使用函数式编程代替 for 循环
代码语言:javascript
复制
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 归档