前端划水聊天之代码优化

269 阅读2分钟
某日在某前端划水群,某位群友白白抛出以下代码

大佬们,请问我这个代码还能怎么优化啊

	list.forEach(val => {
            let fin = val.goods.filter(item => item);
            if (e.value) {
                let ischeck = fin.filter(item => item.checked == true);
                if (ischeck.length == fin.length) {
                    val.carchecked = true;
                }
                let a = fin.filter(item => {
                    if (item.id == e.name) {
                        this.fininfo.push({
                            id: item.id,
                            price: item.price,
                            quantity: item.quantity,
                            carItemId: item.carItemId
                        })
                    }
                })
            } else {
                ...
            }
        })
        
在贴出此代码是,已经是该群友优化过一次了,初版像意大利面条一样长,各种嵌套循环 if else

此代码一出,群友们立马来了精神,从划水健将变身前端专家

群友A:啊这,你这个filter的使用场景不对,filter是遍历数组符合条件的元素,并返回一个合集,你第一个filter
完全是多余的啊,不如直接用解构得到一个新数组吧。

白白:好的,我改下
	...
    let fin = [...val.goods];
    ...
群友B:你的if判断里的第一个个filter可以简写吧,要返回item.checked为true的元素,就不用和true去进
行比较了吧,直接返回不行吗?

白白:大佬说的是,我这就改
...
let ischeck = fin.filter(item => item.checked);
...
群友C:你这里设置val.carchecked的值,这里完全不需要加if判断吧,直接让carchecked的值等于ischeck.length 
和 fin.length是否相等,也直接一点

白白:还能这么写吗,大佬太厉害了,学到了!
···
	val.carchecked = ischeck.length == fin.length;
···
群友D: 你最后用这个filter貌似也不对吧,这里用map或者forEach会更方便吧,item先解构了,用的时候更方便,用map的话直接返回符合条件的元素,用forEach的话判断过后push,
白白:哎,看来我对filter的理解还是不到位,晚上要在复习一下基础知识了。
···
	fin.forEach(({price, id, quantity, carItemId}) => 
                item.id == e.name && this.fininfo.push({
                	price, 
                    	id, 
                    	quantity, 
                    	carItemId
                })
            )
···

完整代码

	...
	const fin = [...val.goods];
        if (e.value) {
            const isCheck= fin.filter(item => item.checked);
            val.carchecked = isCheck.length == fin.length;
            fin.forEach(({price, id, quantity, carItemId}) => {
                item.id == e.name && this.fininfo.push({
                    price, 
                    id, 
                    quantity, 
                    carItemId
                })
            })
        }
    ,,,

总结&思考:

本次群友对这段代码的优化,涉及了对象解构,map,foreach,filter用法,隐式转换。对于基础知识的掌握,越灵活,写出的代码会更加优雅和已读。但是但就代码优化这一点,个人认为适合自己的才是最好的,优化代码是为了增加可读性和维护性,而不是为了减少代码量,如果是以减少代码量为起点去优化代码,反而为徒增工作量的同时,对代码的各个方面没有任何好处。比如:

	A:if (a.indexOf(b) !== -1)
    
    	B:if (~a.indexOf(b))

两行代码都能达到同一个目的,B代码量更少,也更简洁,但是相比于A,却不直观,就算是我此时写下这行代码,我也会停下思考,一个简单的if判断会让人停下思考,足以证明这行代码的不易读,以及增加学习成本。所以代码优化,应该以易读性,可维护性为目的。