codewars闯关小记录:首字母大写

写在前头

  • 身为一个JS学渣,每天都在冥思苦想怎么变成一个大师,在看到“学一门后端语言,有助于进阶Js水平”这类话后,开始兴冲冲地学习后端语言
    (怎么说前端后端真的差很多啊(´・_・`)后端输出好少嘤嘤婴,暂时感受不到成就感的说)
    (一天打渔,一星期晒网中)
    (认真过一遍《JS高级程序设计》才是正途吧呀喂\(`0´)/)。

--------话说作为一枚小前端,也应该了解一些后端语言嚯!(ง •̀_•́)ง--------

  • 言归正传,不知为啥虽然看不下那么厚一本《J高》,但是还是要有点追求啊!!
  • 于是某天,我发现了Codewars!
  • Codewars是啥?看标题(〜 ̄▽ ̄)〜 就是各类代码的小测试小闯关啦
  • 卧槽!搞起!

好吧,那就搞起呗(*ノ▽ノ)


请听题!

一、创建一个方法来接收数组,并返回值为首字母为大写,其余字母小写的数组。

Create a method that accepts an array of names, and returns an array of each name 
with its first letter capitalized.
example

capMe(['jo', 'nelson', 'jurie'])     // returns ['Jo', 'Nelson', 'Jurie']
capMe(['KARLY', 'DANIEL', 'KELSEY']) // returns ['Karly', 'Daniel', 'Kelsey']

( 」゚Д゚)」<

  • 碎碎念部分:作为一个渣,第一个想法就是,so easy,恩,先把值拆成两部分,第一个部分就是首字母啦,然后把它变成大写哒,剩下都变成小写哒,恩,直观又简单!搞起呀!
  • 涉及到的方法等:
  • toUpperCase()转换为大写
  • toLowerCase()转换为小写
  • charAt()返回给定位置的单个字符串(从0个开始算就不说啦┐(‘~`;)┌)
  • slice(3,7)返回给定位置开始的字符串
    (如果有两个值,就是给定位置之间字符串,这里给的就是返回第4~7这四位字符串)
    (注意:slice()计算位置包括空格,若要不包括,要使用substring()
    (我们这边暂时用啥都可以啦,因为,没有空格嘛(≧∇≦)/)
  • 我的代码:
function capMe(names) {
  for (var i = 0; i < names.length; i++){
    var firstLetter = names[i].charAt(0).toUpperCase();
    var remainLetter = names[i].slice(1).toLowerCase();
    names[i] = firstLetter + remainLetter;
    names = names.slice();
  }
  return(names);
}

中间用了concat()来传递字符串,然后写错了一些代码,结果就在数组末尾多了一个undefined
WHY!!!(ಥ_ಥ)
不过!终于通过了!(・∀・)
然后,我就提交了,再然后,就可以看到一些大师的代码(#/。\#)
看完感觉写了好多废代码的说,虽然通过了还是有点小问题,看了别人的代码以后自己改进了一下。

function capMe(names) {
  for (var i = 0; i < names.length; i++){
    names[i] = names[i].charAt(0).toUpperCase() + names[i].slice(1).toLowerCase();
  }
  return(names);
}

然后,想了想,应该也可以用传说中吊吊的正则,不过,这个暂时放后吧,不大懂不大懂。

  • 先来个版本,这是先都小写再首字母大写,substring里面的names[i].length可以去了
 function capMe(names) {
  for (i = 0; i < names.length; i++)
  {
    names[i] = names[i].toLowerCase();
    names[i] = names[i].substring(0, 1).toUpperCase() + names[i].substring(1, names[i].length);
  }
  return names;
 }
  • 再来个版本,俩map也是晕了
function capMe(names) {
   return names.map(function(name) {
      return name[0].toUpperCase() + name.slice(1).split('').map(function(elem, index) {
         return elem.toLowerCase();
      }).join('');
   });
}
  • 再看看赞最多的代码
function capMe(names) {
  return names.map(
    function (n) { return n.charAt(0).toUpperCase() + n.substring(1).toLowerCase();
 });
}

为什么这么短!!! _(:з」∠)_

容我仔细瞅瞅,哎哟喂~思路跟我一样嘛((」゚ペ)」这很正常吧)
看来我很有当大神的潜质嘛!(凑不要脸)_

这么多人用map!醉了醉了醉了!
我要翻翻我的《J高》了(Σ(っ °Д °;)っ你刚刚写代码的时候不是一直在翻吗!!)

⊙︿⊙没找到

那就只好谷歌一下了。
这就是map() 的介绍啦。

打不开的我把相关介绍附在后面了(๑´ㅂ`๑)
看他们举的例子就造了(map()相当于把数组的每个元素的值,以及索引,以及数组本身都传了进去)

function fuzzyPlural(single) {
  var result = single.replace(/o/g, 'e');  
  if( single === 'kangaroo'){
    result += 'se';
  }
  return result; 
}

var words = ["foot", "goose", "moose", "kangaroo"];
console.log(words.map(fuzzyPlural));

// ["feet", "geese", "meese", "kangareese"]

很炫酷的样子嘛。

话说Jquery也有个map(),这两者有啥不同吗?

JQuery map()

定义和用法

map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。

语法

.map(callback(index,domElement))

参数

callback(index,domElement)

描述

对当前集合中的每个元素调用的函数对象。

对比一下上下这俩解释,差不多嘛(・∀・)就是JQ中不返回数组本身罢了。

Array.prototype.map()

概述

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

语法

array.map(callback[, thisArg])

参数

  • callback

原数组中的元素经过该方法后返回一个新的元素。

  • currentValue

callback 的第一个参数,数组中当前被传递的元素。

  • index

callback 的第二个参数,数组中当前被传递的元素的索引。

  • array

callback 的第三个参数,调用 map 方法的数组。

  • thisArg

执行 callback 函数时 this 指向的对象。

描述

  • map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
  • callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身。
  • 如果 thisArg 参数有值,则每次 callback 函数被调用的时候,this 都会指向 thisArg 参数上的这个对象。如果省略了 thisArg 参数,或者赋值为 null 或 undefined,则 this 指向全局对象 。
  • map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)。
  • 当一个数组运行 map 方法时,数组的长度在调用第一次 callback 方法之前就已经确定。在 map 方法整个运行过程中,不管 callback 函数中的操作给原数组是添加还是删除了元素。map 方法都不会知道,如果数组元素增加,则新增加的元素不会被 map 遍历到,如果数组元素减少,则 map 方法还会认为原数组的长度没变,从而导致数组访问越界。如果数组中的元素被改变或删除,则他们被传入 callback 的值是 map 方法遍历到他们那一刻时的值。

那今天就写到这啦。

晚安么么哒(ノ´∀`*)ノ

补一句:自己写完看别人的代码,感慨万千,写法千千万啊( ̄(エ) ̄)ゞ

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容