JavaScript 、React 代码优化

1. if/else 优化

带有返回值

• 优化前：

function demo(flag) {

if (flag) {

return 'xxx1'

} else {

return 'xxx2'

}

}

• 优化后(使用三元条件表达式）：

function demo(flag) {

return flag ? 'xxx1' : 'xxx2'

}

if 条件执行函数

• 优化前：

if (flag) {

operate()

}

• 优化后：

flag && operate()

含有多个条件的 if

• 优化前：

if (x === 'abc' || x === 'def' || x === 'ghi' || x === 'jkl') {

//logic

}

• 优化后：

if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {

//logic

}

多个 else-if 返回值、执行优化

• 优化前：

function getPosition(direction) {

if (direction == 'left') {

return '左'

} else if (direction == 'right') {

return '右'

} else if (direction == 'top') {

return '上'

} else if (direction == 'bottom') {

return '下'

} else {

return '未知'

}

}

• 优化后：

function getPosition(direction) {

return (

{

left: '左',

right: '右',

top: '上',

bottom: '下',

}[direction] || '未知'

)

}

2. 空值检查

有时候我们需要对变量进行检查是否为 null 或未定义

• 优化前：

let testA

if (testB !== null || testB !== undefined || testB !== '') {

testA = testB

} else {

testA = 'default value'

}

• 优化后：

let testA = testB || 'default value'

3. 箭头函数

箭头函数简化了函数的写法

• 优化前：

function sumFunc(a, b) {

return a + b

}

• 优化后：

const sumFunc = (a, b) => a + b

4. switch 可以尝试的简写

箭头函数简化了函数的写法

• 优化前：

let widget: AbstractWidget

switch (type) {

case WidgetType.Input:

widget = new InputWidget(id, option)

break

case WidgetType.Select:

widget = new SelectWidget(id, option)

break

case WidgetType.Switch:

widget = new SwitchWidget(id, option)

break

case WidgetType.ColorPicker:

widget = new ColorPickerWidget(id, option)

break

case WidgetType.BrowseButton:

widget = new BrowseButtonWidget(id, option)

break

case WidgetType.Text:

widget = new TextWidget(id, option)

break

default:

widget = null

}

return widget

• 优化后：

const TYPE_2_WIDGETMODEL = {

[WidgetType.Input]: InputWidget,

[WidgetType.Select]: SelectWidget,

[WidgetType.Switch]: SwitchWidget,

[WidgetType.ColorPicker]: ColorPickerWidget,

[WidgetType.Button]: ButtonWidget,

[WidgetType.Radio]: RadioWidget,

[WidgetType.Spinner]: SpinnerWidget,

}

let widget: AbstractWidget = TYPE_2_WIDGETMODEL[type]

5. 函数的默认参数

• 优化前：

function testFunc(varl, var2) {

if (var2 === undefined) {

return varl + 1

}

return varl + var2

}

• 优化后：

const testFunc = (varl, var2 = 1) => varl + var2

6.扩展运算符的使用

• 优化前：

const data = [1, 2, 3]

const test = [4, 5, 6].concat(data)

• 优化后：

const data = [1, 2, 3]

const test = [4, 5, 6, ...data]

7.参数解析构

• 优化前：

const var1 = props.val1

const var2 = props.val2

const var3 = props.val3

• 优化后：

const { var1, var2, var3 } = props

8.查找数组考虑使用 find

const findInfo = [{ name: 'test' }, { name: 'test1' }].find(

(str) => str.name === 'test1'

)

9.字符串的一些快速写法

数组拼接成字符串

const classLists = ['class1', 'class1']

const className = classLists.join(' ')

字符串与变量的拼接，使用模板符号

const style = { backgroundImage: `url(${DEFAULT_COVER_IMAGES}` }

重复一个字符串多次

'test '.repeat(5)

10.React 中的一些优化写法

条件渲染

• 优化前：

<div>

{showTitle ? <div className="message_title">{options.title}</div> : null}

</div>

• 优化后：

<div>{showTitle && <div className="message_title">{options.title}</div>}</div>

布尔参数

• 优化前：

<Table columns={columns} pagination={true}></Table>

• 优化后：

<Table columns={columns} pagination></Table>