持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第21天,点击查看活动详情
目录
今日题
题目
验证对象中的属性值,将其转换为布尔值并存入数组中
const obj = {
"key1": undefined,
"key2": null,
"key3": "",
"key4": [],
"key5": {},
"key6": {
"key1": "",
"key2": "ok"
},
"key7": "ok",
"key8": {
"key9": {
"key10": {
"key11": "ok"
},
"key12": 0
}
},
"key13": [{}],
"key14": ["ok", "no", {
"key15": ["ok"]
}]
}
转换后:
[false, false, false, false, false, [false, true], true, [[[true], false]], [false], [true, true, [[true]]]]
验证对象中的属性值,如果有值则向数组中存入true,如果没有值则存入false,当遇到内层对象或数组时,生成一个新的数组,也向当前数组里头存入true或者false,最后这个数组将存入到它的父级数组中
分析
在开发前端项目中我们经常要求请求后端接口来获取后台数据,但有时候我们请求到的数据的类型并不符合我们的前端需求,这个时候我们就需要去修改一下请求到数据
今天这道题就来锻炼一下大家对JS中对象数据类型的理解和考验一下大家一点算法能力。对JavaScript中对象的每个属性值做布尔转换,将其存入数组,当属性值为对象类型和数组类型的时候生成一个新的数组来存储其内部数据转换的布尔值
昨日题
题目
将传入的字符串变为小驼峰形式 例:
get_element_by_id
转换为:
getElementById
答案
昨天的题无固定答案:
function toCamelCase(WordName) {
return WordName.split("_").map((item, index) => index === 0 ? item : `${item[0].toLocaleUpperCase()}${item.slice(1)}`).join("");
}
"get_element_by_id".replace(/_[a-z]?/g, v => v.toUpperCase()[1])
function toCamelCase(str){
const index = str.indexOf("_");
if(index>-1){
let newString = ""
if(str[index+1]){
newString = str.replace(`${str[index]}${str[index+1]}`,str[index+1].toUpperCase())
}else{
newString =str.replace(`${str[index]}`,"")
}
return toCamelCase(newString)
}
return str
}
const toCamelCase = ( str ) => {
let res = ""
for (let index = 0; index < str.length; index++) {
if(str[index] === "_"){
let temp = str[index+1]
res += temp.toUpperCase()
index += 1
continue
}
res += str[index]
}
return res;
}
解析
将字符串转从下划线命名法转换为小驼峰命名法,我们得先自动小驼峰是什么。 小驼峰是代码中常见的变量命名方法,由多个单词组成,最开头的单词首字母为小写,往后每个单词的首字母均为大写
而下划线命名法有一个特点,就是每个单词之间都有一个字符串"_",所以从上面各个解法中我们都可以看到都有利用这一特点
好,基础解释完毕,我们将视线转移到第一个题解:可以看到这波代码上来就利用下划线的特点,直接一个split("_")进行分割,再接一手map(),各位应该知道map会将返回值存储起来变成一个新的数组的,在map中又接上一波是否为第一个单词的验证,看来做题者很好的意识到了小驼峰的命名规则,后面就进行了首字母转换为大写形式,还有拼接上单词后面的字符完美将单词进行了首字母大写的变化,打出了一波里应外合,最后使用join("")拼接落下帷幕
接着我们视线移动到第二个题解:这位选手看来对JS字符串API的使用非常老练,直接使用一个replace()来进行正则替换,写出来的正则也是非常的恰到好处,完美的匹配到了字符"_"和后面26个英文字母中的任意一个而且还是全局匹配的,也就是说整个字符串中所有和"_[a-z]"有关系的字符串都会匹配到,后面也是写上了一个回调函数,这个回调函数非同小可,所有被正则匹配到参数都会被传入这个回调函数,且这个回调函数的第一个形参正是这个匹配到的字符,我们可以看到做题者非常深刻到意识到了这一点,所以FuncJin在回调中对匹配到数据进行一波大写转换,而且在后面转换完成的字符串中,他只获取了转换后结尾字符,那个字符恰恰是下一个单词的首字母啊,这波代码写的真的是太完美了
接着接着,我们可以开始看下一个题解:开头就交了indexOf("_")的方法用来找到字符串中的"_"所在的位置,看来他对后面要写的代码非常的自信,接着就是一波判断,如果没有找到则直接返回字符串,找到了呢?没错!!他声明了一个新的字符串,我们知道在JS中字符串可是不会改变的,它只会出现新的字符串,看来他提前预判了JS引擎的底层运行逻辑,并且先手了一步,拿下优势,看来做题者这波直接到了大气层,接着他了又进行一步判断,判断获取到的"_"字符后面还有没有字符可以进行大写变化,看了他是又预判了有人会这么写所有提前做了这么一步,在这个if判断的内部他也是很熟练的想到了replace()这个方法,并且也是匹配到_加上后面的字符,但他做的更加的精确,直接指明了的后面的字符,看来他不仅是一名JS高玩,还是位追求精益求精的人,接着他将匹配到的字符进行的替换,替换的内容正是"_"字符后面的字母转换为大写形式后的内容,而且这个字符刚刚好就是下一个单词的首字母啊,接着在if判断后又接上了一个eles,随便清除了结尾的某些字符串结尾的"_",太贴心啦,简易就跟暖宝宝贴在心脏上一样贴心啊,最后我们看到他return了一个函数的返回值,而且这个函数还是这个函数它自己,没错!没错!这波操作正是JS玩家中耳熟能详的递归调用啊!!!它递归的作用正是按照相同的逻辑匹配和替换后面的字符ヾ(≧▽≦*)o
好的好的,接着我们来到了最后一个题解: 这波代码看起来并不复杂,使用的都是简单运算符和算法,但内部运行逻辑也是恰到好处,看来也是一位JS高玩,一切从简,我们可以到函数内部声明了新的字符串变量,那那那必定就是JavaScript高级玩家了。我的天,今天做题的都这么厉害。往后看,我们可以看到他使用了一个基础的JS算法中的for循环, 而for循环的结尾条件则是传入字符串的长度,看来是一位很有规划的做题者,在for循环内部中他很架起了一个简单的if判断,判断的内容正是验证该字符是否为 "_",拦截过路的字符,查看他们是否感染病毒,看来做题者是将现实中的疫情很好的融入到了代码中,这波代码很好的向人们展示疫情期间做好防护,出门带好口罩的重要性,他真的,我哭死இ௰இ,好的我们继续,能进入到if判断代码块中的时候str[index]想必已经是"_"了,而str[index+1]那必定就是下一个单词的首字符了,所以获取它,直接对它进行大写操作,index += 1是因为下一个字符已经做好了判断,做题者也是意识到了,所以他在后面补充了一个continue,而continue的作用就是跳过本次循环,而正常的字符就很有秩序的加入到了res这个新的字符串中
结语
此文章已收录至《JavaScript每日一题》专栏,如果你对本专栏有任何建议,欢迎反馈。如果你对此文章中的题目还有不懂的地方,那么请在评论区留言与大家一起讨论吧。
思维与创作皆不易,少年就请留个赞再走吧