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

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

ecmascript 编程算法

0 人点赞