代码优雅小技巧（持续更新）

代码写的好，不仅读起来让人神清气爽，还很帅啊有木有~

菜鸟不断学习中，每天进步一点点……

主要参考文档：

1.ths.js.org/2020/09/30/…

2.zhuanlan.zhihu.com/p/435016985

1.示例一

优化前

let flag = true;
if (flag) {
  log();
}

function log() {
  console.log("如果flag值为真的时候打印这段文字");
}

优化后

let flag = true;
flag && log();

function log() {
  console.log("如果flag值为真的时候打印这段文字");
}

代码更清晰，更简洁

2.示例二：使用条件三目运算符

优化前

function demo(flag) {
  if (flag) {
    success();
  } else {
    fail();
  }
}

优化后

function demo(flag) {
  flag ? success() : fail();
}

三目运算符很常用，代码精炼执行效率高

3.示例三：使用可选链运算符（?.）

优化前

if( person && person.details && person.details.name ) {
        const personFirstName = person.details.name.firstName || '';
}

优化后

if( person?.details?.name?.firstName ) {
        const personFirstName = person.details.name.firstName || '';
}

注意：这个新特性有兼容性，可以用babel类插件来兼容它 如 babel-plugin-proposal-optional-chaining

4.示例四

优化前

let x;
let y;
let z = 3;

优化后

let x, y, z=3;

5.示例五

优化前

const x = 1920, y = 1080;
const obj = { x:x, y:y };

优化后

const obj = { x, y };

ES6 提供了一种更简单的方法来为对象分配属性。 如果变量名称与对象键名相同可以用以上方法赋值

6.示例六：循环的短写法

优化前

const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++)

优化后

for (let fruit of fruits)

如果只想访问index可以这样

for (let index in fruits)

如果只想访问对象的key

const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj)
  console.log(key) // 输出: continent, country, city

7.示例七：多条件判断

优化前

// Longhand
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}

优化后

var types = {
 test1: test1,
 test2: test2,
 test3: test3,
 test4: test4
};
var func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

还有些情况可以使用Switch case语句代替也更优雅一些