Js代码简洁写法

更新日期: 2021-12-22阅读: 1k标签: 代码

1.通过条件判断给变量赋值布尔值的正确姿势

// bad
if (a === 'a') {
    b = true
} else {
    b = false
}

// good
b = a === 'a'

2.在if中判断数组长度不为零的正确姿势

// bad
if (arr.length !== 0) {
    // todo
}

// good
if (arr.length) {
    // todo
}

3.同理,在if中判断数组长度为零的正确姿势

// bad
if (arr.length === 0) {
    // todo
}

// good
if (!arr.length) {
    // todo
}

4.简单的if判断使用三元表达式

// bad
if (a === 'a') {
    b = a
} else {
    b = c
}

// good
b = a === 'a' ? a : c

5.使用includes简化if判断

// bad
if (a === 1 || a === 2 || a === 3 || a === 4) {
    // todo
}

// good
let arr = [1, 2, 3, 4]
if (arr.includes(a)) {
    // todo
}

巧用数组方法,尽量避免用for循环

6.使用some方法判断是否有满足条件的元素

// bad
let arr = [1, 3, 5, 7]
function isHasNum (n) {
    for (let i = 0; i < arr.length; i ++) {
        if (arr[i] === n) {
            return true
        }
    }
    return false
}

// good
let arr = [1, 3, 5, 7]
let isHasNum = n => arr.some(num => num === n)

// best
let arr = [1, 3, 5, 7]
let isHasNum = (n, arr) => arr.some(num => num === n)

7.使用forEach方法遍历数组,不形成新数组

// bad
for (let i = 0; i < arr.length; i ++) {
    // todo
    arr[i].key = balabala
}

// good
arr.forEach(item => {
    // todo
    item.key = balabala
})

8.使用filter方法过滤原数组,形成新数组

// bad
let arr = [1, 3, 5, 7],
    newArr = []
for (let i = 0; i < arr.length; i ++) {
    if (arr[i] > 4) {
        newArr.push(arr[i])
    }
}

// good
let arr = [1, 3, 5, 7]
let newArr = arr.filter(n => n > 4) // [5, 7]

9.使用map对数组中所有元素批量处理,形成新数组

// bad
let arr = [1, 3, 5, 7],   
    newArr = []
for (let i = 0; i < arr.length; i ++) {   
    newArr.push(arr[i] + 1)
}

// good
let arr = [1, 3, 5, 7]
let newArr = arr.map(n => n + 1) // [2, 4, 6, 8]

巧用对象方法,避免使用for...in

10.使用Object.values快速获取对象键值

let obj = {  
    a: 1,  
    b: 2
}
// bad
let values = []
for (key in obj) {  
    values.push(obj[key])
}

// good
let values = Object.values(obj) // [1, 2]

11.使用Object.keys快速获取对象键名

let obj = {   
    a: 1,   
    b: 2
}
// bad
let keys = []
for (value in obj) {  
    keys.push(value)
}

// good
let keys = Object.keys(obj) // ['a', 'b']

巧用解构简化代码

12.解构数组进行变量值的替换

// bad
let a = 1,  
    b = 2
let temp = a
a = b
b = temp

// good
let a = 1,  
    b = 2
[b, a] = [a, b]

13.解构对象

// bad
setForm (person) {  
    this.name = person.name   
    this.age = person.age
}

// good
setForm ({name, age}) {  
    this.name = name  
    this.age = age 
}

14.解构时重命名简化命名

有的后端返回的键名特别长,你可以这样干

// bad
setForm (data) {   
    this.one = data.aaa_bbb_ccc_ddd   
    this.two = data.eee_fff_ggg
}
// good
setForm ({aaa_bbb_ccc_ddd, eee_fff_ggg}) {  
    this.one = aaa_bbb_ccc_ddd  
    this.two = eee_fff_ggg
}

// best
setForm ({aaa_bbb_ccc_ddd: one, eee_fff_ggg: two}) {  
    this.one = one   
    this.two = two
}

15.解构时设置默认值

// bad
setForm ({name, age}) {  
    if (!age) age = 16   
    this.name = name  
    this.age = age 
}

// good
setForm ({name, age = 16}) {  
    this.name = name   
    this.age = age
}

16.||短路符设置默认值

let person = {   
    name: '张三',  
    age: 38
}

let name = person.name || '佚名'

17.&&短路符判断依赖的键是否存在防止报错'xxx of undfined'

let person = {   
    name: '张三',  
    age: 38,  
    children: {     
        name: '张小三'  
    }
}

let childrenName = person.children && person.childre.name

18.字符串拼接使用${}

let person = {  
    name: 'LiMing',   
    age: 18
}
// bad
function sayHi (obj) {  
    console.log('大家好,我叫' + person.name = ',我今年' + person.age + '了')
}

// good
function sayHi (person) {  
    console.log(`大家好,我叫${person.name},我今年${person.age}了`)
}

// best
function sayHi ({name, age}) {   
    console.log(`大家好,我叫${name},我今年${age}了`)
}

19.函数使用箭头函数

let arr [18, 19, 20, 21, 22]
// bad
function findStudentByAge (arr, age) {  
    return arr.filter(function (num) {    
        return num === age   
    })
}

// good
let findStudentByAge = (arr, age)=> arr.filter(num => num === age)

20.函数参数校验

// bad
let findStudentByAge = (arr, age) => {
    if (!age) throw new Error('参数不能为空')
    return arr.filter(num => num === age)
}

// good
let checkoutType = () => {
    throw new Error('参数不能为空')
}
let findStudentByAge = (arr, age = checkoutType()) =>
    arr.filter(num => num === age)


链接: https://fly63.com/article/detial/10958

不要浪费时间写完美代码

一个系统可以维持5年,10年,甚至20年以上,但是代码和设计模式的生命周期非常短,当对一个解决方案使用不同的方法进行迭代的时候,通常只能维持数月,数日,甚至几分钟的时间

Google内部在代码质量上的实践

良好的编程习惯涉及到很多方面,但在软件行业内,大多数的公司或组织都不会把良好的编程习惯列为主要关注点。 例如,具有可读性和可维护性的代码比编写好的测试代码或使用正确的工具更有意义,前者的意义在于可以让代码更易于理解和修改。

减少嵌套,降低代码复杂度

减少嵌套会让代码可读性更好,同时也能更容易的找出bug,开发人员可以更快的迭代,程序也会越来越稳定。简化代码,让编程更轻松!

关于 Google 发布的 JS 代码规范

Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。

你解决的问题比你编写的代码更重要!

程序员似乎忘记了软件的真正目的,那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好,而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说:如果你拥有的只是一把锤子,那么一切看起来都像钉子一样

tinymce与prism代码高亮实现及汉化的配置

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的。

js函数式编程与代码执行效率

函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素。高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程

接手代码太烂,要不要辞职?

朋友发表了一条说说:入职新公司,从重构代码到放弃”,我就问他怎么了?他说,刚进一家新公司,接手代码太烂,领导让我先熟悉业务逻辑,然后去修复之前项目中遗留的bug,实在不行就重构

js高亮显示关键词_页面、搜索关键词高亮显示

页面实现关键词高亮显示:在项目期间遇到一个需求,就是搜索关键词时需要高亮显示,主要通过正则匹配来实现页面关键词高亮显示。在搜索结果中高亮显示关键词:有一组关键词数组,在数组中筛选出符合关键字的内容并将关键字高亮

写优雅的代码,做优雅的程序员

软件工程学什么? 学计算机,写程序,做软件,当程序员。听说学计算机很辛苦? 是的,IT行业加班现象严重。在计算机世界里,技术日新月异,自学能力是程序员最重要的能力之一。选了这个专业,就要时刻保持好奇心和技术嗅觉,不能只满足于完成课内作业。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!