本篇主要给广大js程序员介绍了怎么能让自己写的js代码好看易读，分析了几个需要注意的地方和方法，一起来学习下。
作为JS程序员，自己写的代码如果好看易读，不只是自己看起来好看，在别的程序员接手以后，也会是交接工作异常顺利。
不要在代码中留大段注释掉的代码
留给git去管理，不然你要git干嘛
// bad// function add() {// const a = b + c// return a// }function add() { return a + 1000}// goodfunction add() { return a + 1000}
登录后复制
适当地换行
// badfunction a() { const { state_a, state_b, state_c } = this.state this.setState({state_a: state_a * 2}) return 'done'}// goodfunction a() { const { state_a, state_b, state_c } = this.state this.setState({state_a: state_a * 2}) return 'done'}
登录后复制
适当的添加注释，但不要疯狂的添加注释
对一段代码或者一行特别需要注意的代码注释
不要疯狂的注释，太啰嗦，漂亮的代码自己会说话
// badconst a = 'a' // 这是aconst b = 'b' // 这是bconst c = 'c' // 这是c// good/** * 申明变量 */ const a = 'a' const b = 'b' const c = 'c'
登录后复制
将类似行为、命名的代码归类在一起
// badfunction handleClick(arr) { const a = 1 arr.map(e => e + a) const b = 2 return arr.length + b}// goodfunction handleClick(arr) { const a = 1 const b = 2 arr.map(e => e + a) return arr.length + b}
登录后复制
在不破坏语义性的情况下，’能省则省’
牢记js中函数是一等公民
但是，如果省略到影响可读性了，就是失败的
在可读性和简洁性至今必须选一个的话，永远先选可读性
function add(a) { return a + 1}function doSomething() {}// badarr.map(a => { return add(a)})setTimeout(() => { doSomething()}, 1000)// goodarr.map(add)setTimeout(doSomething, 1000)
登录后复制
箭头函数
// badconst a = (v) => { return v + 1}// goodconst a = v => v + 1// badconst b = (v, i) => { return { v, i }}// goodconst b = (v, i) => ({v, i})// badconst c = () => { return (dispatch) => { // doSomething }}// goodconst c = () => dispatch => { // doSomething}
登录后复制
提前对对象取值(写react的同学一定懂)
// badconst a = this.props.prop_a + this.props.prop_bthis.props.fun()// goodconst { prop_a, prop_b, fun} = this.propsconst a = prop_a + prop_bfun()
登录后复制
合理使用各种表达式
// badif (cb) { cb()}// goodcb && cb()// badif (a) { return b} else { return c}// goodreturn a ? b : c// badif (a) { c = a} else { c = 'default'}// goodc = a || 'default'
登录后复制
链式调用写法
// badfetch(url).then(res => { return res.json()}).then(() => { // doSomething}).catch(e => {})// goodfetch(url) .then(res => { return res.json() }) .then(() => { // doSomething }) .catch(e => { })
登录后复制
保持代码是纵向发展的
发现那些在整个文件中特别’突出’的代码时，应该考虑对他们做换行处理了
// badreturn handleClick(type, key, ref, self, source, props)// goodreturn handleClick( type, key, ref, self, source, props)// badconst a = this.props.prop_a === 'hello' ? world : null// goodconst a = this.props.prop_a === 'hello' ? world : null
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
JS保留一位数字后移除非数字
JS验证输入保留指定小数
JS使用分时函数优化代码
以上就是如何才能让你的JS代码更好看易读（请看详细介绍）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2761090.html
