提高 JavaScript 可读性的技巧

1.避免对布尔变量使用否定意义的名称

老实说，双重否定理解起来更费劲。
例如：isStarted vs isNotStarted
原代码：

const isInvalidApiKey = apiKey === null

if (isInvalidApiKey) {}

改进后的代码：

const isValidApiKey = apiKey != null

if (!isValidApiKey) {}

2.避免使用标记位参数

不知道函数使用的标记参数是什么？那么你最好先阅读函数声明。

原代码：

renderResult(true)

function renderResult(isAuthenticated) {
    if (isAuthenticated) {
       return <p>App</p>
    } else {
        return <p>Please login</p>
    }

}

使用对象参数：

renderResult({isAuthenticated: true})

function renderResult({isAuthenticated}) {
    if (isAuthenticated) {
        return <p>App</p>
    } else {
        return <p>Please login</p>
    }

}

使用2个函数：

function renderAuthenticatedApp() {
    return <p>App</p>
}

function renderUnAuthenticatedApp() {
    return <p>Please login</p>
}

isAuthenticated ? renderAuthenticatedApp() : renderUnAuthenticatedApp()

3.使用卫语句

卫语句就是把复杂的条件表达式拆分成多个条件表达式，比如一个很复杂的表达式，嵌套了好几层的if-else语句，将其转换为多个if语句，实现它的逻辑，这多条的if语句就是卫语句。

例如，原代码即将形成了一个嵌套地狱：

if (statusCode === 200) {
    // success
} else {
    if (statusCode === 500) {
        // Internal Server Error
    } else if (statusCode === 400) {
        // Not Found
    } else {
        // Other error
    }
}

使用卫语句改进后：

if (statusCode === 500) {
    // Internal Server Error
}

if (statusCode === 400) {
    // Not Found
}

if (statusCode !== 200) {
    // Other error
}

// success

4.用对象字面量替换switch语句

老实说，我也喜欢switch，但我其实并不知道什么时候使用switch语句和对象字面量。我依靠直觉来判断该选哪一个。

例如：

let drink
switch(type) {
    case 'cappuccino':
        drink = 'Cappuccino';
        break;
    case 'flatWhite':
        drink = 'Flat White';
        break;
    case 'espresso':
        drink = 'Espresso';
        break;
    default:
        drink = 'Unknown drink';
}

可以改进为：

const menu = {
    'cappuccino': 'Cappuccino',
    'flatWhite': 'Flat White',
    'espresso': 'Espresso',
    'default': 'Unknown drink'
}

const drink = menu[type] || menu['default']