几个简单的js优化方法

74 阅读 0 评论 49 点赞

我是靠谱客的博主追寻老师，最近开发中收集的这篇文章主要介绍几个简单的js优化方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.减少if…else代码

const getData = (data)=>{
if(data == 1){
return '开心'
}else if(data == 2){
return '生气'
}..........
}
console.log(getData(1))

我们可以这样优化下

const dataList = {
1:'开心'，
2:'生气'，
3:'郁闷'
}
const getData = (name)=>{
return dataList[name]
}
console.log(getData(1))

2.管道操作取代冗余循环
我们如何找出type 为1的name

const dataList =[
{name:'开心1',type:'1'},
{name:'生气',type:'2'},
{name:'开心2',type:'1'},
{name:'开心3',type:'1'}
]

是不是会这样

let names = [];
for(let i=0;i<dataList.length;i++){
if(dataList[i].type === 1){
names.push(dataList[i].name)
}
}

不如我们来试试这样的
1.先过滤再重组

let names = [];
let names = dataList.filter(i=>i.type === 1).map(i=>i.name)
console.log(names)

find取代冗余循环
还是上面的数据我们需要找出特定的type名称,find 的用处就出来了

const findName = (list,name,type)=>{
for(let i=0;i<list.length;i++){
if(list[i].type === type && list[i].name === name){
return list[i]
}
}
}

让我们来看看find

const newData = dataList.find(i => i.name === '表情1' && i.type === 1);
console.log(newData)

includes取代冗余循环
1.拿老坛酸菜来说他里面有酸菜面牛肉粒烟头脚皮

const instantNoodles = [ '酸菜', '面', '牛肉粒', '烟头', '脚皮']
let foot = false;
for(let i=0;i<instantNoodles.length;++i){
if(instantNoodles[i] == '脚皮'){
foot = true
}
}
//我们可以用includes
const foot = instantNoodles.includes('脚皮')；
console.log(foot)

result返回值

const getUrl(content,prefix,suffix)=>{
let result = content;
if(prefix){
result = `${prefix}${result}`
}
if(suffix){
result = `${result}${suffix}`
}
return result
}
console.log(getUrl('www.baidu.com','https://','.cn'))